沂水网站开发,移动知识库管理系统,宝安三网合一网站建设,网络营销的推广一、BFC与IFC
1.1、BFC与IFC概要
BFC#xff08;Block Formatting Context#xff09;即“块级格式化上下文”#xff0c; IFC#xff08;Inline Formatting Context#xff09;即行内格式化上下文。常规流#xff08;也称标准流、普通流#xff09;是一个文档在被显示…一、BFC与IFC
1.1、BFC与IFC概要
BFCBlock Formatting Context即“块级格式化上下文” IFCInline Formatting Context即行内格式化上下文。常规流也称标准流、普通流是一个文档在被显示时最常见的布局形态。一个框在常规流中必须属于一个格式化上下文你可以把BFC想象成一个大箱子箱子外边的元素将不与箱子内的元素产生作用。
BFC是W3C CSS 2.1 规范中的一个概念它决定了元素如何对其内容进行定位以及与其他元素的关系和相互作用。当涉及到可视化布局的时候Block Formatting Context提供了一个环境HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC浮动元素内部子元素的主要受该浮动元素影响两个浮动元素之间是互不影响的。也可以说BFC就是一个作用范围。
在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) 类型可以是 block 或者是 inline 但不能同时属于这两者。并且 Block boxes(块框) 在 block formatting context(块格式化上下文) 里格式化 Inline boxes(块内框) 则在 Inline Formatting Context(行内格式化上下文) 里格式化。
1.2、如何产生BFC
当一个HTML元素满足下面条件的任何一点都可以产生Block Formatting Contexta)、float的值不为none
b)、overflow的值不为visible
c)、display的值为table-cell, table-caption, inline-block中的任何一个
d)、position的值不为relative和static
CSS3触发BFC方式则可以简单描述为在元素定位非static,relative的情况下触发float也是一种定位方式。
1.3、BFC的作用与特点 a)、不和浮动元素重叠清除外部浮动阻止浮动元素覆盖
如果一个浮动元素后面跟着一个非浮动的元素那么就会产生一个重叠的现象。常规流也称标准流、普通流是一个文档在被显示时最常见的布局形态当float不为none时position为absolute、fixed时元素将脱离标准流。
没有BFC的情况
示例代码 !DOCTYPE html
html
head
meta charsetUTF-8
titleBFC与IFC/title
style typetext/css
#div1{
width: 200px;
height: 200px;
background: lightgreen;
float: left;
}
#div2{
width: 300px;
height: 300px;
background: lightblue;
}
/style
/head
body
h2BFC与IFC/h2
div iddiv1div1
/div
div iddiv2div2
/div
/body
/html View Code 运行结果 此时的div1因为float已经产生了BFC在div2中添加样式overflow:hidden让其产生BFC代码如下 #div2{
width: 300px;
height: 300px;
background: lightblue;
overflow: hidden;
} 运行结果 b)、清除元素内部浮动计算浮动元素的高度
只要把父元素设为BFC就可以清理子元素的浮动了最常见的用法就是在父元素上设置overflow: hidden样式对于IE6加上zoom:1就可以了(IE Haslayout)。
当一个元素的内部元素浮动时不会计算其高度示例如下 !DOCTYPE html
html
head
meta charsetUTF-8
titleBFC与IFC/title
style typetext/css
#div0 {
border: 2px solid lightsalmon;
padding: 20px;
width: 400px;
}
#div1 {
width: 200px;
height: 200px;
background: lightgreen;
float: left;
}
#div2 {
width: 200px;
height: 200px;
background: lightblue;
float: left;
}
/style
/head
body
h2BFC与IFC/h2
div iddiv0
div iddiv1div1
/div
div iddiv2div2
/div
/div
/body
/html View Code 运行结果 修改div0让其触发BFC还原高度代码如下 #div0 {
border: 2px solid lightsalmon;
padding: 20px;
width: 400px;
overflow: hidden; /*让div0触发BFC*/
} 运行结果 c、外边距将不再与上下文之外的元素折叠
示例代码 !DOCTYPE html
html
head
meta charsetUTF-8
titleBFC与IFC/title
style typetext/css
#div1 {
width: 200px;
height: 200px;
background: lightgreen;
margin-bottom: 100px;
}
#div2 {
width: 200px;
height: 200px;
background: lightblue;
margin-top: 100px;
}
/style
/head
body
h2BFC与IFC/h2
div iddiv1div1
/div
div iddiv2div2
/div
/body
/html View Code 如果此时将脚本的div1与div2同时变成BFC环境修改的css如下 #div1 {
width: 200px;
height: 200px;
background: lightgreen;
margin-bottom: 100px;
overflow: hidden;
}
#div2 {
width: 200px;
height: 200px;
background: lightblue;
margin-top: 100px;
overflow: hidden;
} 执行时会发现效果还是一样此时的div1与div2都是BFC上下文但是要求的是外边距将不再与上下文之外的元素折叠按照要求我们应该将div1与div2放在不同的上下文中修改后的脚本如下 !DOCTYPE html
html
head
meta charsetUTF-8
titleBFC与IFC/title
style typetext/css
#div1 {
width: 200px;
height: 200px;
background: lightgreen;
margin-bottom: 100px;
}
#div2 {
width: 200px;
height: 200px;
background: lightblue;
margin-top: 100px;
}
#div2-outer
{
overflow: hidden;
}
/style
/head
body
h2BFC与IFC/h2
div iddiv1div1
/div
div iddiv2-outer
div iddiv2div2
/div
/div
/body
/html 运行结果如下 d)、元素会一个接一个地被垂直放置它们的起点是一个包含块的顶部文字不会环绕布局
示例代码 !DOCTYPE html
html
head
meta charsetUTF-8
titleBFC/title
style
.div1 {
border: 3px solid blue;
width: 300px;
}
.cls1 {
width: 100px;
height: 100px;
background: lightblue;
margin: 5px;
float:left;
}
/style
/head
body
div classdiv1
div iddiv11 classcls1div11/div
p
扁粉菜BFC是安阳名吃制作原料和工艺都很简单。扁粉菜是大锅菜以扁粉条为主原料熬一大锅的高汤将扁粉条下锅煮熟再烩入豆腐片猪血片和青菜。盛上一碗加点辣椒配上热乎乎的油饼吃上一口怎一个“爽”字了得扁粉菜最有营养的算是高汤和猪血片了而且可以续汤虽然它是粗食但是便宜实惠营养所以大家都爱吃
/p
/div
/body
/html View Code 没有BFC时的运行结果 从运行结果可以看出div与p还是重叠了只是文字被挤出和前面提到的重叠是同一个意思将p元素触发BFC后的效果如下图所示 p{
overflow: hidden;
} 运行结果 1.4、IE与Layout
Layout是 IE 浏览器渲染引擎的一个组成部分。在 IE 浏览器中一个元素要么自己对自身的内容进行组织和计算大小 要么依赖于包含块来计算尺寸和组织内容hasLayout 与 BFC 有很多相似之处。在IE中元素使用“布局”概念来控制尺寸和定位分为拥有布局和没有布局两种情况拥有布局的元素由它控制本身及其子元素的尺寸和定位而没有布局的元素则通过父元素最近的拥有布局的祖先元素来控制尺寸和定位而一个元素是否拥有布局则由 hasLayout 属性告知浏览器它是个布尔型变量true 代表元素拥有布局false 代表元素没有布局。简而言之hasLayout 只是一个 IE 下专有的属性hasLayout 为 true 的元素浏览器会赋予它一系列的效果。特别注意的是hasLayout 在 IE 8 及之后的 IE 版本中已经被抛弃所以在实际开发中只需针对 IE 8 以下的浏览器为某些元素触发 hasLayout。
出发IE下的haslayout方法
display: inline-blockheight: (除 auto 外任何值)width: (除 auto 外任何值)float: (left 或 right)position: absolutewriting-mode: tb-rlzoom: (除 normal 外任意值)min-height: (任意值)min-width: (任意值)max-height: (除 none 外任意值)max-width: (除 none 外任意值)overflow: (除 visible 外任意值仅用于块级元素)overflow-x: (除 visible 外任意值仅用于块级元素)overflow-y: (除 visible 外任意值仅用于块级元素)position: fixed
综合前面的内容清除浮动的写法如下 .floatfix{
*zoom:1; /*在旧版本的IE浏览器缩放大小触发haslayout*/
}
.floatfix:after{
content:;
display:table;
clear:both;
} 除了BFC还有IFC,GFC,FFC,是不同格式化上下文Formatting Context的简称GFC是网格格式化上下文Grid Formatting ContextFFC是弹性盒格式化上下文Flex Formatting ContextFKC是开封菜的意思:。
二、定位
使用css布局position非常重要他的语法如下
positionstatic | relative | absolute | fixed | center | page | sticky默认值staticcenter、page、sticky是CSS3中新增加的值。
2.1、static可以认为静态的默认元素都是静态的定位对象遵循常规流。此时4个定位偏移属性不会被应用也就是使用leftrightbottomtop将不会生效。
示例 !DOCTYPE html
html
head
meta charsetUTF-8
title定位/title
style typetext/css
#div1{
width: 200px;
height: 200px;
background: lightblue;
left:100px;
top:100px;
}
/style
/head
body
div iddiv1
/div
/body
/html View Code 运行结果 定义偏移并未起作用。
2.2、relative
相对定位对象遵循常规流并且参照自身在常规流中的位置通过toprightbottomleft这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
示例代码 !DOCTYPE html
html
head
meta charsetUTF-8
title相对定位/title
style typetext/css
div {
width: 200px;
height: 200px;
background: lightblue;
margin: 10px;
}
#div1 {
position: relative; /*相对定位*/
left:30px; /*在自己原有位置上相对左边偏移30像素*/
bottom: -30px;
background: lightgreen;
}
/style
/head
body
div iddiv1div1
/div
div iddiv2div2
/div
/body
/html 运行结果 2.3、absolute
绝对定位对象脱离常规流此时偏移属性参照的是离自身最近的定位祖先元素如果没有定位的祖先元素则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素其margin不与其他任何margin折叠。
元素定位参考的是离自身最近的定位祖先元素要满足两个条件第一个是自己的祖先元素可以是父元素也可以是父元素的父元素一直找如果没有则选择body为对照对象。第二个条件是要求祖先元素必须定位通俗说就是position的属性值为非static都行。
示例代码 !DOCTYPE html
html
head
meta charsetUTF-8
title绝对定位/title
style typetext/css
div {
border: 2px solid darkturquoise;
padding: 10px;
}
#div1 {
width: 400px;
height: 400px;
}
#div2 {
width: 300px;
height: 300px;
}
#div3 {
width: 200px;
height: 200px;
position: absolute;
right: 5px;
top: 5px;
}
/style
/head
body
div iddiv1 div1
div iddiv2 div2
div iddiv3div3
/div
/div
/div
/body
/html 运行结果 因为div3使用absolute绝对定位它的参考对象是父元素div2,div1都不满足条件因为两者都没有进行定位是默认的定位值static根据约定最终找到body所以会出现在页面的右上角。此时如果想让div3的参照对象为div1则可以修改代码为 !DOCTYPE html
html
head
meta charsetUTF-8
title绝对定位/title
style typetext/css
div {
border: 2px solid darkturquoise;
padding: 10px;
}
#div1 {
width: 400px;
height: 400px;
position: relative; /*相对定位*/
}
#div2 {
width: 300px;
height: 300px;
}
#div3 {
width: 200px;
height: 200px;
position: absolute;
right: 5px;
bottom: 5px;
}
/style
/head
body
div iddiv1 div1
div iddiv2 div2
div iddiv3div3
/div
/div
/div
/body
/html 运行结果 2.4、fixed
固定定位与absolute一致但偏移定位是以窗口为参考。当出现滚动条时对象不会随着滚动。
简单的回顶端示例代码 !DOCTYPE html
html
head
meta charsetUTF-8
title固定定位/title
style typetext/css
body{
height: 3000px;
}
#top{
width: 50px;
height: 70px;
line-height: 70px;
text-align: center;
background: lightblue;
position: fixed;
right: 1px;
bottom: 30%;
}
/style
/head
body
h2 idtitle固定定位/h2
div idtopa href#title回顶部/a/div
/body
/html 运行结果 练习 center与absolute一致但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。CSS3page与absolute一致。元素在分页媒体或者区域块内元素的包含块始终是初始包含块否则取决于每个absolute模式。CSS3sticky对象在常态时遵循常规流。它就像是relative和fixed的合体当在屏幕中时按常规流排版当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。CSS3
2.5、z-index属性
语法z-index: auto | integer默认值auto适用于定位元素。即定义了position为非static的元素取值auto 元素在当前层叠上下文中的层叠级别是0。元素不会创建新的局部层叠上下文除非它是根元素。 整数 用整数值来定义堆叠级别。可以为负值。 说明检索或设置对象的层叠顺序。 z-index用于确定元素在当前层叠上下文中的层叠级别并确定该元素是否创建新的局部层叠上下文。 当多个元素层叠在一起时数字大者将显示在上面。 示例 !DOCTYPE html
html
head
meta charsetUTF-8
title/title
style typetext/css
div {
width: 200px;
height: 200px;
position: absolute;
}
#div1 {
background: lightsalmon;
}
#div2 {
background: lightgreen;
left: 33px;
top: 33px;
z-index: 1;
}
#div3{
background: lightblue;
left: 66px;
top: 66px;
}
/style
/head
body
div iddiv1
div1
/div
div iddiv2
div2
/div
div iddiv3
div3
/div
/body
/html 未指定z-index时默认运行效果 指定div2的z-index值时的运行效果 2.6、菜单
使用前面的内容实现了一个简单的下拉菜单效果如下 菜单结构 ul classmenu
li
a href#联系我们/a
/li
li
a href#公司掠影/a
ul
lia href#版权声明/a/li
lia href#在线留言/a/li
lia href#技术支持/a/li
/ul
/li
li
a href#新闻中心/a
ul
lia href#版权声明/a/li
lia href#在线留言/a/li
lia href#技术支持/a/li
/ul
/li
li
a href#版权声明/a
/li
li
a href#在线留言/a
ul
lia href#版权声明/a/li
lia href#在线留言/a/li
lia href#技术支持/a/li
/ul
/li
li
a href#技术支持/a
/li
/ul View Code 示例代码 !DOCTYPE html
html
head
meta charsetUTF-8
title/title
style typetext/css
* /*重置浏览器默认样式*/
{
margin: 0;
padding: 0;
list-style: none;
}
.menu{
position: relative;
}
.menu li{ /*每项菜单的样式*/
width: 100px;
height: 36px;
line-height: 36px;
text-align: center;
background: darkblue;
}
.menu li a{
text-decoration: none;
color: white;
}
.menu li /*让子级li都浮动横排*/
{
float: left;
}
.menu ul{
display: none; /*让子菜单隐藏*/
position: absolute;
}
.menu li:hover ul{ /*当悬停在li上时选择子级的ul显示*/
display: block;
}
.menu ul li{
filter: Alpha(opacity60); /* IE 滤镜 */
opacity:0.6;
}
/style
/head
body
ul classmenu
li
a href#联系我们/a
/li
li
a href#公司掠影/a
ul
lia href#版权声明/a/li
lia href#在线留言/a/li
lia href#技术支持/a/li
/ul
/li
li
a href#新闻中心/a
ul
lia href#版权声明/a/li
lia href#在线留言/a/li
lia href#技术支持/a/li
/ul
/li
li
a href#版权声明/a
/li
li
a href#在线留言/a
ul
lia href#版权声明/a/li
lia href#在线留言/a/li
lia href#技术支持/a/li
/ul
/li
li
a href#技术支持/a
/li
li
a href#在线留言/a
ul
lia href#版权声明/a/li
lia href#在线留言/a/li
lia href#技术支持/a/li
/ul
/li
li
a href#技术支持/a
/li
/ul
img srcimg/banner (12).jpg/
ul classmenu
li
a href#联系我们/a
/li
li
a href#公司掠影/a
ul
lia href#版权声明/a/li
lia href#在线留言/a/li
lia href#技术支持/a/li
/ul
/li
li
a href#新闻中心/a
ul
lia href#版权声明/a/li
lia href#在线留言/a/li
lia href#技术支持/a/li
/ul
/li
li
a href#版权声明/a
/li
li
a href#在线留言/a
ul
lia href#版权声明/a/li
lia href#在线留言/a/li
lia href#技术支持/a/li
/ul
/li
li
a href#技术支持/a
/li
li
a href#在线留言/a
ul
lia href#版权声明/a/li
lia href#在线留言/a/li
lia href#技术支持/a/li
/ul
/li
li
a href#技术支持/a
/li
/ul
img srcimg/banner (12).jpg/
/body
/html View Code 运行结果 2.7、:target伪类
语法E:target { css }说明匹配相关URL指向的E元素。解释URL后面跟锚点#指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element):target选择器用于选取当前活动的目标元素。只有支持CSS3的浏览器可用。 !DOCTYPE html
html
head
meta charsetUTF-8
title/title
style typetext/css
.content {
height: 50px;
font-size: 20px;
color: royalblue;
border: 2px solid darkblue;
}
div :target {
background: lightgreen;
}
/style
/head
body
div iddiv1
a href#p1第一段/a
a href#p2第二段/a
a href#p3第三段/a
/div
div iddiv2
div idp1 classcontent第一段内容/div
div idp2 classcontent第二段内容/div
div idp3 classcontent第三段内容/div
/div
/body
/html View Code 运行结果 通俗说就是url中的#选中的id元素将被css选择。在完成没有js的菜单选项卡时如果不考虑ie8则可以使用这种新的办法。
三、浮动
浮动在CSS布局中饱受诟病因为控制起来比较麻烦但如果掌握了他的特性使用起来还是不难的在CSS中使用float指定浮动属性值该属性的值指出了对象是否及如何浮动浮动的框可以向左或向右移动直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的标准流中所以文档的标准流中的块框表现得就像浮动框不存在一样。float的基本语法如下
floatnone | left | right
3.1、float取值
none 设置对象不浮动默认值
left 设置对象浮在左边
right 设置对象浮在右边
3.2、float的特性
a)、浮动元素会从标准流中脱离
b)、浮动元素会触发BFC块级元素格式化、不影响外边距折叠
c)、 float元素会变成块标签
如果float不是none当display:inline-table时display的计算值为table当display:inline | inline-block | run-in | table-* 系时display的计算值为block其它情况为指定值。
示例代码 !DOCTYPE html
html
head
meta charsetUTF-8
titlefloat/title
style typetext/css
#span1{
width: 100px;
height: 100px;
background: lightgreen;
float: right;
}
/style
/head
body
span idspan1span1/span
/body
/html 不设置float时的效果 设置向右float时的效果 span是一个行内标签默认设置高宽无效但浮动后自动变成了块标签。
d)、float在绝对定位和display为none时不生效
当display为node时元素会隐藏所以float意义不大当position为absolute绝对定位时元素也将从标准流中脱离元素使用偏移量移动float特性无效。 !DOCTYPE html
html
head
meta charsetUTF-8
titlefloat/title
style typetext/css
#div1{
width: 100px;
height: 100px;
background: lightgreen;
float: right;
position: absolute;
bottom: 5px;
left: 5px;
}
/style
/head
body
div iddiv1span1/div
/body
/html e)、浮动元素间会堆叠
浮动的框可以向左或向右移动直到它的外边缘碰到包含框或另一个浮动框的边框为止浮动元素间的堆叠示例 !DOCTYPE html
html
head
meta charsetUTF-8
titlefloat/title
style typetext/css
div{
width: 100px;
height: 100px;
background: lightgreen;
float: left;
margin: 5px;
}
/style
/head
body
div iddiv1div1
/div
div iddiv2div2
/div
div iddiv3div3
/div
/body
/html View Code 运行结果 f)、浮动元素不能溢出包含块
浮动元素在包含块内当包含块的宽度不足以容下浮动的子元素时将自动折行垂直方向当包含块认为浮动的子元素没有高度时子元素会溢出BFC能解决该问题。水平方向不会溢出垂直方向有可能会溢出。 !DOCTYPE html
html
head
meta charsetUTF-8
titlefloat/title
style typetext/css
.cls1 {
width: 100px;
height: 100px;
background: lightgreen;
float: left;
margin: 5px;
}
#div0{
width: 300px;
padding: 5px;
background: lightblue;
}
/style
/head
body
div iddiv0
div iddiv1 classcls1div1
/div
div iddiv2 classcls1div2
/div
div iddiv3 classcls1div3
/div
/div
/body
/html View Code 触发BFC时 g)、相邻的浮动元素left属性最前面的元素排在最左边
从e就可以看出效果这里不举例。
h)、相邻的浮动元素right属性最前面的元素排在最右边
排列在最左边的向右浮动时出现在最右边示例如下 !DOCTYPE html
html
head
meta charsetUTF-8
titlefloat/title
style typetext/css
div{
width: 100px;
height: 100px;
background: lightgreen;
float: right;
margin: 5px;
}
/style
/head
body
div iddiv1div1左
/div
div iddiv2div2中
/div
div iddiv3div3右
/div
/body
/html 运行效果 i)、包含块不会计算浮动元素的高宽
示例代码 !DOCTYPE html
html
head
meta charsetUTF-8
titlefloat/title
style typetext/css
.cls1 {
width: 100px;
height: 100px;
background: lightgreen;
float: left;
margin: 5px;
}
#div0{
width: 330px;
padding: 5px;
border: 5px solid lightblue;
}
/style
/head
body
div iddiv0
div iddiv1 classcls1div1
/div
div iddiv2 classcls1div2
/div
div iddiv3 classcls1div3
/div
/div
/body
/html View Code 运行结果 j)、浮动元素与非浮动元素会重叠挤出块中的内容
示例代码 !DOCTYPE html
html
head
meta charsetUTF-8
titlefloat/title
style typetext/css
#div1 {
width: 100px;
height: 100px;
background: lightblue;
float: left;
}
#div2 {
width: 200px;
height: 200px;
background: lightgreen;
}
/style
/head
body
div iddiv1div1
/div
div iddiv2div2
/div
/body
/html 运行结果 当div1从float时从标准流中脱离开了div2在标准流中可以形象的认为在div2这个队列前没有元素了所以div2要向前靠脱离标准流的元素的z方向排列时比标准流中的元素排列要靠前一些但div2的内容被div1占用的空间挤出。
3.3、清除浮动
该属性的值指出了不允许有浮动对象的边。clearnone | left | right | both适用于块级元素取值none 允许两边都可以有浮动对象 both 不允许有浮动对象 left 不允许左边有浮动对象 right 不允许右边有浮动对象
3.3.1、清除外部浮动
需要注意的是clear是用于控制元素本身的不能影响别的元素示例如下 !DOCTYPE html
html
head
meta charsetUTF-8
title清除浮动/title
style typetext/css
#div1 {
width: 100px;
height: 100px;
background: lightblue;
float: left;
clear: both; /*div2的右边与左边都不能出现浮动元素*/
}
#div2 {
width: 200px;
height: 200px;
background: lightgreen;
float: left;
}
/style
/head
body
div iddiv1div1/div
div iddiv2div2/div
/body
/html View Code 运行结果 示例中div1的清除浮动并没有效果因为他没有办法影响div2如果设置div2清除浮动则元素本身会向下一行示例代码如下 !DOCTYPE html
html
head
meta charsetUTF-8
title清除浮动/title
style typetext/css
#div1 {
width: 100px;
height: 100px;
background: lightblue;
float: left;
}
#div2 {
width: 200px;
height: 200px;
background: lightgreen;
float: left;
clear: both; /*div2的右边与左边都不能出现浮动元素*/
}
/style
/head
body
div iddiv1div1/div
div iddiv2div2/div
/body
/html 运行结果如下 如果div2后面还有一个div3也将会出现前面一样的情况 !DOCTYPE html
html
head
meta charsetUTF-8
title清除浮动/title
style typetext/css
#div1 {
width: 100px;
height: 100px;
background: lightblue;
float: left;
}
#div2 {
width: 200px;
height: 200px;
background: lightgreen;
float: left;
clear: both; /*div2的右边与左边都不能出现浮动元素*/
}
#div3 {
width: 100px;
height: 100px;
background: lightcoral;
float: left;
}
/style
/head
body
div iddiv1div1/div
div iddiv2div2/div
div iddiv3div3/div
/body
/html View Code 练习 3.3.2、清除内部浮动
当一个包含块内部有浮动元素时外部块不会计算浮动块的高度与宽度为了让内部的浮动元素撑开包含块需要还原高度暂且称为清除内部浮动。
方法1BFC !DOCTYPE html
html
head
meta charsetUTF-8
titlefloat/title
style typetext/css
.cls1 {
width: 100px;
height: 100px;
background: lightgreen;
float: left;
margin: 5px;
}
#div0{
width: 330px;
padding: 5px;
border: 5px solid lightblue;
overflow: hidden; /*div0被触发BFC*/
}
/style
/head
body
div iddiv0
div iddiv1 classcls1div1
/div
div iddiv2 classcls1div2
/div
div iddiv3 classcls1div3
/div
/div
/body
/html View Code 方法2增加一个空的div清除浮动 !DOCTYPE html
html
head
meta charsetUTF-8
titlefloat/title
style typetext/css
.cls1 {
width: 100px;
height: 100px;
background: lightgreen;
float: left;
margin: 5px;
}
#div0{
width: 330px;
padding: 5px;
border: 5px solid lightblue;
}
.clear{
clear: both;
}
/style
/head
body
div iddiv0
div iddiv1 classcls1div1
/div
div iddiv2 classcls1div2
/div
div iddiv3 classcls1div3
/div
div classclear/div
/div
/body
/html View Code 运行结果同方法1要解释该方法的原理可以参考上文中的第j点。
较为通用且兼容的清除浮动写法 .clearfix {
*zoom: 1;/*在旧版本的IE浏览器缩放大小触发haslayout类似BFC*/
}
.clearfix:after { /*伪元素在应用该元素后添加一个伪元素*/
content: ; /*内容为空*/
display: table; /*BFC清除内部浮动*/
clear: both; /*清除外部浮动*/
} 四、多种居中办法
4.1、块标签自身水平居中
当一个有宽度的块标签设置margin:0 auto时将实现自身的水平居中示例脚本如下 !DOCTYPE html
html
head
meta charsetUTF-8
titlefloat/title
style typetext/css
#container {
margin: 0 auto;
width: 90%;
background: lightblue;
height: 200px;
}
/style
/head
body
div idcontainer
/div
/body
/html 运行结果 4.2、块标签内对齐
text-alignstart | end | left | right | center | justify | match-parent | justify-all默认值start适用于块标签left 内容左对齐。 center 内容居中对齐。 right 内容右对齐。 justify 内容两端对齐但对于强制打断的行被打断的这一行及最后一行包括仅有一行文本的情况因为它既是第一行也是最后一行不做处理。CSS3 start 内容对齐开始边界。CSS3 end 内容对齐结束边界。CSS3 match-parent 这个值和 inherit 表现一致只是该值继承的 start 或 end 关键字是针对父母的 direction 值并计算的计算值可以是 left 和 right 。CSS3 justify-all 效果等同于 justify但还会让最后一行也两端对齐。CSS3
示例代码 !DOCTYPE html
html
head
meta charsetUTF-8
titlefloat/title
style typetext/css
#container {
margin: 0 auto;
width: 90%;
background: lightblue;
height: 200px;
text-align: center;
}
#div1{
width: 100px;
height: 100px;
background: lightgreen;
}
/style
/head
body
div idcontainer
div iddiv1div1/div
Hello Center
/div
/body
/html 运行结果 这种对齐方式只针对块标签内的行内标签inline box与行内块标签inline block有将对块标签是无效的因为块标签默认总是占整行。如果将示例中div1的显示方式修改为行内块标签(display: inline-block;)则效果如下所示 在布局中经常会需要垂直居中但没有像水平居中那么容易这里总结出5种办法
4.3、垂直居中方法一
当一个设置了定位的元素所有的偏移为0且margin为auto时将水平垂直都居中且父元素自身的高度可动态变化。
示例代码 !DOCTYPE html
html
head
meta charsetUTF-8
title居中/title
style typetext/css
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#div0 {
width: 80%;
height: 90%;
border: 3px solid lightblue;
margin: 0 auto;
position: relative;
}
#div1 {
width: 200px;
height: 150px;
background: lightgreen;
position: absolute;
/*居中开始*/
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
/*居中结束*/
}
/style
/head
body
div iddiv0
div iddiv1
/div
/div
/body
/html 运行结果 个人认为box偏移上下左右都为0这时候它就不知所措了只好待在中间。
4.4、垂直居中方法二
如果是单行文本行高如块的高度一样时将居中只一行行高和元素一样高居中。
line-height: 600px;height: 600px;
只可以是文字等一些行内标签图片不行示例代码如下 !DOCTYPE html
html
head
meta charsetUTF-8
title居中/title
style typetext/css
#div0 {
background: lightblue;
height: 80px;
/*line-height:40px;*/
font:20px/80px microsoft yahei;
}
/style
/head
body
div iddiv0
如果是单行文本行高如块的高度一样时将居中只一行行高和元素一样高居中
/div
/body
/html 运行结果 4.5、垂直居中方法三
让元素相对父元素定位偏移左50%上50%把自身向左移半个宽度向上移半个高度同时完成了水平与垂直方向的居中 示例代码 !DOCTYPE html
html
head
meta charsetUTF-8
title居中/title
style typetext/css
#div0 {
width: 80%;
height: 500px;
background: lightblue;
position: relative;
margin: 0 auto;
}
#div1{
width: 200px;
height: 150px;
background: lightcoral;
position: absolute;
left: 50%;
top:50%;
margin-top: -75px;
margin-left: -100px;
}
/style
/head
body
div iddiv0
div iddiv1
/div
/div
/body
/html 运行效果 4.6、垂直居中方法四
在CSS有一个属性应该欺骗过很多开发者一直认为使用了他就可以垂直居中了但不行这个属性就是
语法vertical-alignbaseline | sub | super | top | text-top | middle | bottom | text-bottom | percentage | length
默认值baseline
作用设置或检索内联元素在行框内的垂直对其方式适用于内联级与 table-cell 元素baseline 把当前盒的基线与父级盒的基线对齐。如果该盒没有基线就将底部外边距的边界和父级的基线对齐 sub 把当前盒的基线降低到合适的位置作为父级盒的下标该值不影响该元素文本的字体大小 super 把当前盒的基线提升到合适的位置作为父级盒的上标该值不影响该元素文本的字体大小 text-top 把当前盒的top和父级的内容区的top对齐 text-bottom 把当前盒的bottom和父级的内容区的bottom对齐 middle 把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐 top 把当前盒的top与行盒的top对齐 bottom 把当前盒的bottom与行盒的bottom对齐 percentage 把当前盒提升正值或者降低负值这个距离百分比相对line-height计算。当值为0%时等同于baseline。 length 把当前盒提升正值或者降低负值这个距离。当值为0时等同于baseline。CSS2 说明设置或检索内联元素在行框内的垂直对其方式。 对应的脚本特性为verticalAlign。
不能实现对齐的主要原因是vertical-align这个属性的特点它是相对兄弟级行高line-height来定位 示例代码 !DOCTYPE html
html
head
meta charsetUTF-8
title居中/title
style typetext/css
#div0 {
width: 80%;
height: 500px;
background: lightblue;
position: relative;
margin: 0 auto;
text-align: center;
}
#img1{
vertical-align: middle;
}
#span1{
line-height: 500px;
}
/style
/head
body
div iddiv0
img srcimg/cp.png idimg1/span idspan1/span
/div
/body
/html 运行效果 其实此处只设置父元素的行高与高度一样时也能达到上面的效果示例代码如下 !DOCTYPE html
html
head
meta charsetUTF-8
title居中/title
style typetext/css
#div0 {
width: 80%;
height: 500px;
background: lightblue;
position: relative;
margin: 0 auto;
text-align: center;
line-height: 500px;
}
#img1 {
vertical-align: middle;
}
/style
/head
body
div iddiv0
img srcimg/cp.png idimg1 /
/div
/body
/html 在IE8与Google浏览器中运行效果 4.7、垂直居中方法五
4.7.1、使用div构造一个表格
示例代码 !DOCTYPE html
html
head
meta charsetUTF-8
title/title
style typetext/css
.divTable {
display: table;
width:50%;
}
.divTr {
display: table-row;
}
.divTd {
display: table-cell;
}
div{
border:1px solid blue;
}
/style
/head
body
div classdivTable
div classdivTr
div classdivTdtd11/div
div classdivTdtd12/div
/div
div classdivTr
div classdivTdtd21/div
div classdivTdtd22/div
/div
/div
/body
/html 运行结果 4.7.2、使用表格特性居中
示例代码 !DOCTYPE html
html
head
meta charsetUTF-8
title居中/title
style typetext/css
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
#div0 {
width: 80%;
height: 50%;
background: lightblue;
margin: 0 auto;
display: table; /*类似让div1为一个table*/
}
#div1{
display: table-cell; /*类似table中的td*/
vertical-align: middle; /*垂直居中*/
text-align: center; /*水平居中*/
}
/style
/head
body
div iddiv0
div iddiv1
img srcimg/cp.png idimg1 height200 /
/div
/div
/body
/html 运行结果 4.8、垂直居中方法六
在某些时候需要将小图片与文字对象可以使用对齐的属性absmiddle绝对居中示例如下 !DOCTYPE html
html
head
meta charsetUTF-8
title/title
style typetext/css
#div1{
border: 2px solid lightblue;
}
/style
/head
body
div classdiv1
img srcimg/018080.png alignabsmiddle/电视机
/div
/body
/html 运行结果 在IE8与chrome浏览器下的效果一样。
4.9、垂直居中方法七
方法与4.5非常类似但是4.5要求知道居中元素自身的高度与宽度这样会有一定的局限CSS3中可以使用transform移动元素自身的宽度与高度示例代码如下 !DOCTYPE html
html
head
meta charsetUTF-8
title居中/title
style typetext/css
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
#div0 {
width: 80%;
height: 70%;
background: lightblue;
margin: 0 auto;
position: relative;
}
#img1 {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
/style
/head
body
div iddiv0
img srcimg/cp.png idimg1/
/div
/body
/html 运行结果 transform用于设置或检索对象的转换参数translate()指定对象的2D translation2D平移。第一个参数对应X轴第二个参数对应Y轴。如果第二个参数未提供则默认值为0
五、示例下载
github:https://github.com/zhangguo5/CSS3_3
参照http://www.cnblogs.com/best
