您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496netCSS定位难题,7种垂直居中方法

新葡亰496netCSS定位难题,7种垂直居中方法

发布时间:2019-12-01 01:15编辑:新葡亰官网浏览(63)

    CSS定位问题(1):盒模型、浮动、BFC

    2016/04/27 · CSS · BFC, 定位, 盒模型

    本文作者: 伯乐在线 - zhiqiang21 。未经作者许可,禁止转载!
    欢迎加入伯乐在线 专栏作者。

    引子:

    在谈到css定位问题的时候先来看一个小问题:

    已知宽度(假如:100px)div框,水平居中,左右两边分别使用div框填充.且左右div自适应.

    效果如下图: 新葡亰496net 1

    这个问题的难点主要是浏览器宽度未知,且两边div自适应宽度.

    第一种实现方法,是借助css3的新属性calc,实现代码如下:

    CSS

    body { margin: 0; padding: 0; font-size:0; } .left_div { background-color: #62FF09; /*calc是css3属性可以动态计算,兼容不同浏览器的类型需要加识别的前缀,非常重要的是要有空格*/ width: -webkit-calc(50% - 50px); width: calc(50%-50px); height: 200px; } .mid_div { width: 100px; height: 200px; margin-left: -50px; background-color: #20FFDA; margin:0 auto; } .right_div { background-color: #FFF81B; height: 200px; width: -webkit-calc(50% - 50px); } div{display:inline-block;}

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    body {
        margin: 0;
        padding: 0;
        font-size:0;
    }
    .left_div {
        background-color: #62FF09;
        /*calc是css3属性可以动态计算,兼容不同浏览器的类型需要加识别的前缀,非常重要的是要有空格*/
        width: -webkit-calc(50% - 50px);
        width: calc(50%-50px);
        height: 200px;
    }
    .mid_div {
        width: 100px;
        height: 200px;
        margin-left: -50px;
        background-color: #20FFDA;
        margin:0 auto;
    }
    .right_div {
        background-color: #FFF81B;
        height: 200px;
        width: -webkit-calc(50% - 50px);
    }
    div{display:inline-block;}

    第二种实现方式就是借助与display属性,将所有的div框具有table的单元格的属性.

    代码如下:

    CSS

    * { padding: 0; margin: 0; } .left_div, .mid_div, .right_div { height: 200px; display: table-cell; } .left_div { width: 50%; background: #369; } .mid_div { //非IE识别的属性,(>=IE8) min-width: 100px; width: 100px; background: #697; } .right_div { width: 50%; background: #126; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    * {
        padding: 0;
        margin: 0;
    }
    .left_div, .mid_div, .right_div {
        height: 200px;
        display: table-cell;
    }
    .left_div {
        width: 50%;
        background: #369;
    }
    .mid_div {
        //非IE识别的属性,(>=IE8)
        min-width: 100px;
        width: 100px;
        background: #697;
    }
    .right_div {
        width: 50%;
        background: #126;
    }

    这里解决问题的主要思路是当中间的宽度确定后,因为所有div是单元格所以使用50%使左右的单元格平分剩下的宽度.

    CSS3与页面布局学习笔记(三)——BFC、定位、浮动、7种垂直居中方法,css3bfc

    CSS 深入理解之 float 浮动

    2018/05/25 · CSS · float

    原文出处: micstone   

    float属性是CSS中常用的一个属性,在实际工作中使用的非常多,如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了,但是对于优秀的前端开发人员,需要有”刨根问底”的精神,这样在出现一些问题的时候才不至于”手慌脚乱”!因此,今天就特别整理和总结一下float属性。

    <style type="text/css"></style>
    <link href="public.css" rel="stylesheet" type="text/css"/>

    CSS float属性,cssfloat属性

    写在开篇:

    浮动属性的设计初衷,只是为了实现文本环绕效果!

    时刻牢记这一点,才能正确使用浮动。

     

    浮动元素的特征:

    1.浮动元素脱离文档流。

    2.浮动元素周围的外边距不会合并。

    3.浮动元素具有包裹性。

    4.浮动元素具有破坏性。

    下面这段代码,能够验证上述的四个特征,按提示操作即可。

    新葡亰496net 2 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>浮动</title> 6 <style> 7 * { 8 margin: 0; 9 } 10 11 .container { 12 background-color: green; 13 } 14 15 .box1 { 16 height: 100px; 17 width: 100px; 18 background-color: red; 19 margin: 20px; 20 } 21 22 .box2 { 23 height: 200px; 24 width: 200px; 25 background-color: blue; 26 margin: 20px; 27 } 28 29 .list { 30 margin-top: 50px; 31 background-color: cyan; 32 line-height: 1.5; 33 } 34 35 </style> 36 </head> 37 38 <body> 39 <div class="container"> 40 <div class="box1">box1</div> 41 <div class="box2">box2</div> 42 </div> 43 <div class="list"> 44 <ol> 45 <li>box1与box2在一个绿色的容器中垂直摆放,box1的margin-bottom与box2的margin-top合并,所以它们的margin为20px。</li> 46 <li>将容器浮动,浮动之后容器紧紧包裹着里面的元素,是为包裹性。<br /> 47 浮动之后,容器脱离文档流,列表向上占据容器的位置,由于浮动会实现文本环绕效果,所以文本在浮动元素周围显示,不会被覆盖在浮动元素之下;<br /> 48 由于列表的margin-top为50px,所以列表与视窗顶部有50px的距离;<br /> 49 (由于未知原因,浮动后的元素与后来居上的列表一样高)。 50 </li> 51 <li>将box1浮动,box1脱离文档流,box2向上占据box1的位置,box2的上外边距为20px,box1的上边距为20px,它们的上外边距没有合并。<br /> 52 字符“box2”如此显示是box1的margin-top和margin-right的原因。 53 </li> 54 <li>将box2浮动,容器的高度塌陷;box2的上外边距与box1的下外边距没有合并。<br /> 55 通过列表的背景颜色,可以很清晰地看到,列表向上占据了box2的位置,鉴于margin-top为50px的原因,它的顶端比box2低10px。<br /> 56 将容器也浮动,就可以把浮动的box2包裹在容器中,解决父元素高度塌陷的问题。<br /> 57 (实现原理:浮动元素会延伸,从而包含其所有后代浮动元素。) 58 </li> 59 </ol> 60 </div> 61 </body> 62 </html> View Code

    深入理解float的破坏性:

    新葡亰496net 3 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>深入理解float的破坏性</title> 6 <style> 7 body { 8 font-size: 16px; 9 line-height: 1.5; 10 } 11 12 .container { 13 width:100%; 14 float: left; 15 } 16 17 .wraper { 18 margin-right: 650px; 19 } 20 21 .box1,.box2 { 22 background-color: orange; 23 margin-bottom: 50px; 24 } 25 26 .box1 img,.box2 img { 27 margin:5px; 28 padding:5px; 29 border:1px solid red; 30 } 31 32 .box2 img,.box4 img { 33 float:left; 34 35 } 36 37 .box3 { 38 margin-top: 100px; 39 margin-bottom: 50px; 40 } 41 42 .box3,.box4 { 43 border:2px solid red; 44 } 45 46 .box5 { 47 width:600px; 48 float:left; 49 margin-left: -600px; 50 background-color: cyan; 51 } 52 </style> 53 </head> 54 55 <body> 56 <div class="container"> 57 <div class="wraper"> 58 <div class="box1"> 59 <p>深入理解float的破坏性 深入理解float的破坏性 深入理解float的破坏性 深入理解float的破坏性 60 <img src="" alt="A picture" style="width:140px;height:80px" /> 61 深入理解float的破坏性 深入理解float的破坏性 深入理解float的破坏性 深入理解float的破坏性 62 </p> 63 </div><!--关闭box1--> 64 <div class="box2"> 65 <p>深入理解float的破坏性 深入理解float的破坏性 深入理解float的破坏性 深入理解float的破坏性 66 <img src="" alt="A picture" style="width:140px;height:80px" /> 67 深入理解float的破坏性 深入理解float的破坏性 深入理解float的破坏性 深入理解float的破坏性 68 </p> 69 </div><!--关闭box2--> 70 <div class="box3"> 71 <img src="" alt="A picture" style="width:140px;height:80px" /> 72 </div><!--关闭box3--> 73 <div class="box4"> 74 <img src="" alt="A picture" style="width:140px;height:80px" /> 75 </div><!--关闭box4--> 76 </div><!--关闭wraper--> 77 </div><!--关闭container--> 78 <div class="box5"> 79 <h3>深入理解float的破坏性:</h3> 80 <p>比较左面两个盒子,第一盒子中图像没有浮动;第二个盒子中图像浮动了。</p> 81 <p>我们先来研究一下,图像在没有浮动的情况下,为什么会这样显示?</p> 82 <p>首先,每一个行内元素都会形成一个行内框,没有被任何标签包含的文本被称为“匿名行内元素”,(文本)行内框的高度为line-height的高度;图形的行内框的高度就是它自身盒子的高度(height padding border margin)。</p> 83 <p>然后,每一行都会形成一个行框,行框必须包含这一行中最高行内框的顶端和最低行内框的底端,于是,第一个盒子中的文本和图像就是这样显示了。</p> 84 <p>当所有的行框组合在一起,就形成了整个段落的框(containing box,包含盒子)。</p> 85 86 <p>再来看第二个盒子,图像浮动了,如果浮动只是改变了图像的位置,那么图像应该依旧与自己所在的那一行文字在同一行上,然而它并没有。</p> 87 <p>与它在同一行的文本重新形成了行框,这个行框的形成完全忽略了图像的行内框。也就是说,因为浮动的破坏性,图像的行内框没有了。</p> 88 <p>所有的行框组成这个段落的框,可以明显看到,这个段落的框没有把浮动图像包含在内。</p> 89 <p>总结:浮动的破坏性实际上破坏了浮动元素的高度,浮动元素的高度为0。</p> 90 91 <p>有一个例子最能证实浮动元素没有高度。</p> 92 <p>在一个div中有一个图像,图像浮动了,这个div高度塌陷,什么原因?</p> 93 <p>元素含有浮动属性 –- 破坏行内框 –- 破坏行框高度 –- 破坏包含盒子高度 –- 塌陷!</p> 94 </div><!--关闭box5--> 95 </body> 96 </html> View Code

    5.浮动元素块状化。不管元素本身是什么(inline/inline-block/block),只要浮动,自带display:block声明。

     

    浮动的规则:

    首先,必须了解浮动元素包含块的概念。

    浮动元素的包含块,是其最近的块级祖先元素。

    规则1:左浮动的元素,左外边界不能超出其包含块的左内边界。(浮动元素不能超出其包含块的内容区)

    新葡亰496net 4

    规则2:左浮动的元素,左外边界必须是源文档中之前出现的左浮动元素的右外边界;除非后出现的浮动元素的顶端在先出现的浮动元素的底端下面,那么这个后出现的左浮动元素会一直浮动到其包含块的左内边界。

    新葡亰496net 5

     规则3:左浮动元素的右外边界不会与右浮动元素的左外边界交叉。

    (如果两个浮动元素加起来的宽度大于包含块的宽度,那么后一个浮动元素将会向下浮动,直到其顶端在前一个浮动元素的底端之下。)

     新葡亰496net 6

    规则4:一个浮动元素的顶端不能超出其包含块的上内边界。(浮动元素不能超出其包含块的内容区)

    新葡亰496net 7

    规则5:浮动元素的顶端不能比它之前所有浮动元素或者块级元素的顶端更高。

    新葡亰496net 8

    规则6:如果一个段落中有一个浮动图像,这个图像的顶端最高只能到该图像所在行框的顶端。

     新葡亰496net 9

    规则7:如果有多个元素连续浮动,浮动元素不能超出包含块的内容区,除非某一浮动元素本身宽度就比包含块的内容区大。

    规则8:在满足以上规则的条件下,浮动元素要浮动得尽可能高、尽可能远。

     

    关于浮动元素负外边距:

    新葡亰496net 10 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 * { 8 margin: 0; 9 } 10 11 .container { 12 width: 800px; 13 height: 600px; 14 margin: 20px auto; 15 background-color: cyan; 16 border: 1px solid black; 17 line-height: 1.5; 18 } 19 20 img { 21 float: left; 22 margin-bottom: 20px; 23 margin-right: 20px; 24 } 25 26 p { 27 margin: 10px; 28 } 29 30 span { 31 background-color: red; 32 border: 1px solid black; 33 } 34 35 .blockElement { 36 border: 1px solid yellow; 37 background-color: green; 38 margin: 10px; 39 } 40 41 .clear { 42 clear: both; 43 margin-top: 20px; 44 } 45 46 </style> 47 </head> 48 49 <body> 50 <div class="container"> 51 <img src="" alt="a picture" style="width:200px;height:300px" /> 52 <p>浮动元素可以设置负外边距。</p> 53 <p>如果左浮动图像将左外边距设为负值,则图像向左移动相应的距离;如果左浮动图像将右外边距设为负值,那么浮动图像位置不动,其右边的文本向左移动相应的距离。</p> 54 <span>如果右边的文本是行内元素,则其边框、背景和文字豆都将在图像之上显示;</span> 55 <div class="blockElement">如果右边的文本是块级元素,则只有文本会在图像之上显示,边框和背景在图像之下显示。</div> 56 <p>清除区域,是在清除元素(设置了clear属性的元素)上外边界之外增加的额外区域,不允许这个区域有任何浮动元素存在。</p> 57 <p>假如一个清除区域的高度是25px,而清除元素的上外边距为15px,那么清除元素与浮动元素在垂直方向上将会紧挨着,要想它们之间有15px的距离,可以设置浮动元素的下外边距为15px。</p> 58 <ol class="clear"> 59 <li>设置浮动图像的margin-left为-50px,图像向左移动了30px的距离;如果浮动图像本身在视窗左上角,margin-left负值之后,相应地那一部分图像将会移动到视窗之外(不可见)。</li> 60 <li>设置浮动图像的margin-right为-50px,图像本身没有移动,文本的宽度增加了50px,导致文本覆盖到浮动图像之上;而且不同的文本表现不同。<br /> 61 行内框与一个浮动元素重叠时,其边框、背景和内容都在浮动元素“之上”显示。<br /> 62 块框与一个浮动元素重叠时,只有其内容在浮动元素“之上”显示,边框、背景都在浮动元素“之下”显示。 63 </li> 64 <li>可以通过设置浮动图像的margin值来控制浮动图像与环绕在其周围的文本的距离。</li> 65 </ol> 66 </div> 67 </body> 68 </html> View Code

     

    通过浮动元素负外边距实现不改变DOM结构的流体布局:

    新葡亰496net 11 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>不改变DOM结构的流体布局</title> 6 <style> 7 .container { 8 width:600px; 9 margin-left: auto; 10 margin-right: auto; 11 background-color: orange; 12 } 13 14 .box1 { 15 width:100%; 16 float:left; 17 } 18 19 .box2 { 20 margin-right: 220px; 21 } 22 23 img { 24 width:200px; 25 float:left; 26 margin-left:-200px; 27 } 28 29 .clearfix:after { 30 content: ""; 31 display: table; 32 clear: both; 33 } 34 35 .clearfix { 36 *zoom: 1; 37 } 38 39 </style> 40 </head> 41 <body> 42 <div class="container clearfix"> 43 <div class="box1"> 44 <div class="box2"> 45 <h3>不改变DOM位置的流体布局</h3> 46 <p>假如有一段文本和一幅图像,在DOM节点中,文本在前,图像在后,怎么能把图像定位到右边呢?</p> 47 <p>通常的做法是,调换DOM节点中图像与文本的位置,让图像在前,文本在后,然后将图像浮动到右边即可。</p> 48 <p>但这样改变DOM节点顺序始终不妥,还有什么更好的方法呢?</p> 49 <p>下面就介绍一种新的思路来完成布局。</p> 50 <ul> 51 <li>将文本用div包起来,定义为box1;现在的结构是一个box1和一个img。</li> 52 <li>将box1宽度设为100%,左浮动;将img设置一个宽度,也左浮动,然后margin-left设为负的宽度值;此时图像就定位到文本的右边啦。</li> 53 <li>但是有一个问题,图像盖住了文本内容,这可怎么办?</li> 54 <li>重点来了,在box1中增加一个box2,box2把文本全部包起来,然后margin-right设为图像的宽度( 额外的间距),这样就解决问题啦!</li> 55 </ul> 56 </div><!--关闭box2--> 57 </div><!--关闭box1--> 58 <img src="" alt="a picture" style="width:200px;height:300px" /> 59 </div><!--关闭container--> 60 </body> 61 </html> View Code

     

    float属性,cssfloat属性 写在开篇: 浮动属性的设计初衷,只是为了实现 文本环绕效果 ! 时刻牢记这一点,才能正确使用浮动。 浮动元...

    1.盒模型

    盒模型又分IE盒模型和非IE盒模型: 看下面的一张图(来自维基百科):

    新葡亰496net 12 由上面的图可以知道IE和非IE盒模型的区别主要是计算元素的宽度和高度不一样。

    1. IE浏览器: margin-left width margin-right
    2. 非IE浏览器:margin-left border-left padding-left width padding-right border-right margin-right

    看一段代码:

    XHTML

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>box-html</title> <style type="text/css"> *{margin:0;padding:0;} #body-box{ width:700px; height:500px; background-color:#FF00FF; /*overflow:hidden;*/ } .box-style{ width:500px; height:300px; border:10px dashed black; background-color:red; margin:10px 0 0 20px; padding: 10px 10px 10px 10px; } </style> </head> <body> <div id="body-box"> <div class="box-style">你好帅呀</div> </div> </body> </html>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>box-html</title>
        <style type="text/css">
            *{margin:0;padding:0;}
            #body-box{
                width:700px;
                height:500px;
                background-color:#FF00FF;
                /*overflow:hidden;*/
            }
            .box-style{
                width:500px;
                height:300px;
                border:10px dashed black;
                background-color:red;
                margin:10px 0 0 20px;
                padding: 10px 10px 10px 10px;
            }
        </style>
    </head>
    <body>
        <div id="body-box">
            <div class="box-style">你好帅呀</div>
        </div>
    </body>
    </html>

    效果如下: 新葡亰496net 13

    很明显我们发现一个问题,就是子元素的margin-top作用在了父元素上。

    当我们给父元素添加一个overflow:hidden属性时,结果正常。

    如下图: 新葡亰496net 14

    这是为什么呢?

    overflow 样式值为 非 visilbe 时,实际上是创建了 CSS 2.1 规范定义的 Block Formatting Contexts。创建了它的元素,会重新计算其内部元素位置,从而获得确切高度。这样父容器也就包含了浮动元素高度。这个名词过于晦涩,在 CSS 3 草案中被变更为名词 Root Flow,顾名思义,是创建了一个新的根布局流,这个布局流是独立的,不影响其外部元素的。实际上,这个特性与 早期 IE 的 hasLayout 特性十分相似。

    经过测试在IE8以上的浏览器表现与chrome和firefox浏览器表现效果相同。但是在IE7以下浏览器不用设置这个属性就可以表现正常的效果。如下图:

    新葡亰496net 15

    下面的文字出现错误: 很明显发现的一个问题就是IE8(包括IE8)以上浏览器的background-color是border padding content*.而IE8(不包括)是*padding content。

    上面的结论是我在 IE11 浏览器中模拟IE8IE9得出的结论,上面的文字是有问题的(可能是因为升级IE11后,浏览器的解析内核跟IE8和IE9不一样,因为微软IE浏览器的标准也是一直在改变的)。

    在真实的IE8IE9background-color都仅仅是padding content 。而IE11中background-colorborder padding content; 再来看一个示例,代码如下:

    XHTML

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TestBox</title> <style type="text/css"> body{margin:0;} .item1{ width:200px; height:300px; border:2px solid #f73bd6; padding:100px 0 0 0; } .item2{ width:150px; height:200px; margin:150px 0 0 0; border:2px solid #f73bd6; } </style> </head> <body> <div class="item1"> <div class="item2"></div> </div> </body> </html>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TestBox</title>
        <style type="text/css">
        body{margin:0;}
        .item1{
            width:200px;
            height:300px;
            border:2px solid #f73bd6;
            padding:100px 0 0 0;
        }
        .item2{
            width:150px;
            height:200px;
            margin:150px 0 0 0;
            border:2px solid #f73bd6;
        }
        </style>
    </head>
    <body>
        <div class="item1">
            <div class="item2"></div>
        </div>
    </body>
    </html>

    我非别在非IE浏览器(且>=IE8也同样的效果)中测试的结果如下:

    新葡亰496net 16

    在IE7中的效果如下图: 新葡亰496net 17

    在<=IE6之下显示的效果如下(默认会将父级框撑开):

    新葡亰496net 18

    关于div的最小(最大)宽度和高度在IE8(>=)之上和非IE浏览器上都实现了min-height,maxheight,min-width,max-width这四个属性。

    一、BFC与IFC

    1. float介绍

    CSS世界中的float属性是一个年代非常久远的属性,设置了float属性的元素会根据设置的属性值向左或者向右浮动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。设置了float属性的元素会从普通文档流中脱离,相当于不占据任何空间,所以文档中普通流中的元素表现的就像浮动元素不存在一样,因此,设置float属性的后会影响我们的页面布局。具体说来就是:让block元素无视float元素,让inline元素像流水一样围绕着float元素实现浮动布局

    float属性设计的初衷:仅仅是让文字像流水一样环绕浮动元素,就像下图中展示的一样:

    新葡亰496net 19

    优先级 <span style="color:red;"></span> 越接近元素的css属性优先级越高

    关于body的问题:

    看下面一段代码:

    XHTML

    <style type="text/css"> *{margin:0;padding:0;} div{ width:300px; height:200px; background-color:#9feb3d; } body{ border:5px solid #eb3dda; background-color:#3d3deb; } </style> <body> <div> <ul> <li>你是第1个</li> <li>你是第2个</li> <li>你是第3个</li> <li>你是第4个</li> <li>你是第5个</li> </ul> </div> </body>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <style type="text/css">
            *{margin:0;padding:0;}
            div{
                width:300px;
                height:200px;
                background-color:#9feb3d;
            }
            body{
                border:5px solid #eb3dda;
                background-color:#3d3deb;
            }
        </style>
    <body>
        <div>
            <ul>
                <li>你是第1个</li>
                <li>你是第2个</li>
                <li>你是第3个</li>
                <li>你是第4个</li>
                <li>你是第5个</li>
            </ul>
        </div>
    </body>

    并且代码的效果图如下:

    新葡亰496net 20

    由上可以知道body是一个特殊的div(盒子)。它的background-color会延伸到margin。

    1.1、BFC与IFC概要

    BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline 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(行内格式化上下文) 里格式化。

    2. float的特性

    float有哪些有意思的特性呢?具体如下:

    • 包裹性
    • 高度塌陷
    • 块状化
    • 没有任何margin合并

    下面将详细阐述这几点的含义。

    选择器优先级
    行内style >ID选择器 > class类选择器>html标签选择器
    .new ul li a.blue{color:blue;}> a:hover{color:red;} > .white{color:white;}

    标准流的概念:

    在不使用其他的与排列和定位相关的特殊CSS规则时,各种元素的排列规则。


    1.2、如何产生BFC

    当一个HTML元素满足下面条件的任何一点,都可以产生Block Formatting Context:
    a)、float的值不为none

    b)、overflow的值不为visible

    c)、display的值为table-cell, table-caption, inline-block中的任何一个

    d)、position的值不为relative和static

    CSS3触发BFC方式则可以简单描述为:在元素定位非static,relative的情况下触发,float也是一种定位方式。

    2.1 包裹性

    所谓”包裹性”,其实是由”包裹”和”自适应”两部分组成。假设有以下CSS代码:

    /* CSS代码 */ .father{ border: 1px solid deeppink; width: 200px; } .son { float: left; font-size: 0; border: 1px solid blue; padding: 5px; } .father img { width: 128px; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    /* CSS代码 */
    .father{
        border: 1px solid deeppink;
        width: 200px;
    }
    .son {
        float: left;
        font-size: 0;
        border: 1px solid blue;
        padding: 5px;
    }
    .father img {
        width: 128px;
    }

    1)包裹。本例中将浮动元素父元素宽度设置为200px,浮动元素的子元素是一个128px宽度的图片,则此时浮动元素宽度表现为”包裹”,也就是里面图片的宽度128px。

    /* HTML代码 */ <div class="father"> <div class="son"> <img src="../../lib/img/mm1.png"> </div> </div>

    1
    2
    3
    4
    5
    6
    /* HTML代码 */
    <div class="father">
        <div class="son">
            <img src="../../lib/img/mm1.png">
        </div>
    </div>

     新葡亰496net 21

     

    2)自适应性。在浮动子元素的中增加一些文字:

    /* HTML代码 */ <div class="father"> <div class="son"> <img src="../../lib/img/mm1.png"> <span style="font-size: 12px">美女1,美女2,美女3,美女4,美女5,美女6,后宫1,后宫2,后宫3,后宫</span> </div> </div>

    1
    2
    3
    4
    5
    6
    7
    /* HTML代码 */
    <div class="father">
        <div class="son">
            <img src="../../lib/img/mm1.png">
            <span style="font-size: 12px">美女1,美女2,美女3,美女4,美女5,美女6,后宫1,后宫2,后宫3,后宫</span>
        </div>
    </div>

    此时,浮动元素宽度就自适应父元素的200px宽度,最终的宽度表现也是200px。如下图所示:

    新葡亰496net 22

    <span style="">优先级最高</span>

    2.浮动

    float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素,且浮动元素的宽度是根据内容的宽度确定的。

    看下面的一段代码:

    XHTML

    <body> <span class="test-float1">你好吧</span> <span class="test-float2">我是还是吧</span> </body>

    1
    2
    3
    4
    <body>
        <span class="test-float1">你好吧</span>
        <span class="test-float2">我是还是吧</span>
    </body>

    然后分别对.test-float1和.test-float2应用样式,代码如下:

    CSS

    *{padding:0;margin:0px;} span{ background-color:#f73bd6; margin:0 0 0 10px; } .test-float1{ float:left; height:100px; width:20px; } .test-float2{ /*float:left;*/ height:100px; width:20px; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    *{padding:0;margin:0px;}
            span{
                background-color:#f73bd6;
                margin:0 0 0 10px;
            }
            .test-float1{
                float:left;
                height:100px;
                width:20px;
            }
            .test-float2{
                /*float:left;*/
                height:100px;
                width:20px;
            }

    效果如下:

    新葡亰496net 23

    由上面的代码我们可以得出一个结论,span作为一个行内元素本来是没有width和height属性的,但是当对行内元素使用float属性后,该元素具有了width和height属性

    注意:

    假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。

    浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

    看下面的一段代码:

    XHTML

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TestFloat</title> <style type="text/css"> body{ margin:0; } .item1, .item2, .item3, .item4{ width:200px; height:100px; background-color:#d8f73b; margin:10px 0 0 0; } .item1{ float:right; } .item2{ /*float:left;*/ } </style> </head> <body> <div id="body-div"> <div class="item1">item1</div> <div class="item2">item2</div> <div class="item3">item3</div> <div class="item4">item4</div> </div> </body> </html>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TestFloat</title>
        <style type="text/css">
            body{
                margin:0;
            }
     
            .item1, .item2, .item3, .item4{
                width:200px;
                height:100px;
                background-color:#d8f73b;
                margin:10px 0 0 0;
            }
            .item1{
                float:right;
            }
            .item2{
                /*float:left;*/
            }
     
        </style>
    </head>
    <body>
        <div id="body-div">
            <div class="item1">item1</div>
            <div class="item2">item2</div>
            <div class="item3">item3</div>
            <div class="item4">item4</div>
        </div>
    </body>
    </html>

    这个时候看到页面的结果有一个很明显的bug,如下图:

    新葡亰496net 24

    可以很明显的看到在浮动的item1和item2有一个间隔没有在一条水平线上。

    这个时候就回到了我们开头的问题,我们给父级的div盒子添加overflow属性触发父级div的BFC。代码如下:

    CSS

    <style type="text/css"> body{ margin:0; } //触发父级元素的BFC #body-div{ overflow:hidden; } .item1, .item2, .item3, .item4{ width:200px; height:100px; background-color:#d8f73b; margin:10px 0 0 0; } .item1{ float:right; } .item2{ /*float:left;*/ } </style>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <style type="text/css">
            body{
                margin:0;
            }
            //触发父级元素的BFC
            #body-div{
                overflow:hidden;
            }
            .item1, .item2, .item3, .item4{
                width:200px;
                height:100px;
                background-color:#d8f73b;
                margin:10px 0 0 0;
            }
            .item1{
                float:right;
            }
            .item2{
                /*float:left;*/
            }
     
        </style>

    效果如下图:

    新葡亰496net 25

    有关BFC的定义:

    BFC(W3C CSS 2.1 规范中的一个概念)就是所谓的Block formatting contexts (块级格式化上下文)。创建了 BFC的元素就是一个独立的盒子,里面的子元素不会在布局上影响外面的元素,反之亦然,同时BFC仍然属于文档中的普通流。

    那么怎么触发BFC呢?

    1. float 除了none以外的值
    2. overflow 除了visible 以外的值(hidden,auto,scroll )
    3. display (table-cell,table-caption,inline-block)
    4. position(absolute,fixed)
    5. fieldset元素

    注意:

    display:table 本身并不会创建BFC,但是它会产生匿名框(anonymous boxes),而匿名框中的display:table-cell可以创建新的BFC,换句话说,触发块级格式化上下文的是匿名框,而不是 display:table。所以通过display:table和display:table-cell创建的BFC效果是不一样的。


    fieldset 元素在www.w3.org里目前没有任何有关这个触发行为的信息,直到HTML5标准里才出现。有些浏览器bugs(Webkit,Mozilla)提到过这个触发行为,但是没有任何官方声明。实际上,即使fieldset在大多数的浏览器上都能创建新的块级格式化上下文,开发者也不应该把这当做是理所当然的。CSS 2.1没有定义哪种属性适用于表单控件,也没有定义如何使用CSS来给它们添加样式。用户代理可能会给这些属性应用CSS属性,建议开发者们把这种支持当做实验性质的,更高版本的CSS可能会进一步规范这个。

    BFC的特性:

    1)块级格式化上下文会阻止外边距叠加 当两个相邻的块框在同一个块级格式化上下文中时,它们之间垂直方向的外边距会发生叠加。换句话说,如果这两个相邻的块框不属于同一个块级格式化上下文,那么它们的外边距就不会叠加。 2)块级格式化上下文不会重叠浮动元素 根据规定,一个块级格式化上下文的边框不能和它里面的元素的外边距重叠。这就意味着浏览器将会给块级格式化上下文创建隐式的外边距来阻止它和浮动元 素的外边距叠加。由于这个原因,当给一个挨着浮动的块级格式化上下文添加负的外边距时将会不起作用(Webkit和IE6在这点上有一个问题——可以看这 个测试用例)。 3)块级格式化上下文通常可以包含浮动 触发了BFC的话,就不会被float元素覆盖,当子元素全部浮动的时候也能够正确地包含了

    深入研究浮动:

    来看下面的一段代码:

    XHTML

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{margin:0;} #body-div{ background-color:#ffff99; border:1px solid #111111; padding:5px; } #body-div div{ padding:10px; margin:15px; background-color:#90baff; } #body-div p{ border:5px dashed #111111; background-color:#ff90ba; } .item1{ border:5px dashed #111111; /*float:left;*/ } .item2{ border:5px dashed #f73b4d; } .item3{ border:5px dashed #0000CD; } </style> </head> <body> <div id="body-div"> <div class="item1">Box-1</div> <div class="item2">Box-2</div> <div class="item3">Box-3</div> <p>让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边,并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码:让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边,并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码:让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边,并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码:</p> </div> </body> </html>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            body{margin:0;}
            #body-div{
                background-color:#ffff99;
                border:1px solid #111111;
                padding:5px;
            }
            #body-div div{
                padding:10px;
                margin:15px;
                background-color:#90baff;
            }
            #body-div p{
                border:5px dashed #111111;
                background-color:#ff90ba;
            }
            .item1{
                border:5px dashed #111111;
                /*float:left;*/
            }
            .item2{
                border:5px dashed #f73b4d;
     
            }
            .item3{
                border:5px dashed #0000CD;
     
            }
        </style>
    </head>
    <body>
        <div id="body-div">
            <div class="item1">Box-1</div>
            <div class="item2">Box-2</div>
            <div class="item3">Box-3</div>
            <p>让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边,并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码:让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边,并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码:让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边,并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码:</p>
        </div>
    </body>
    </html>

    显示效果如下图:

    新葡亰496net 26

    1.3、BFC的作用与特点

    a)、不和浮动元素重叠,清除外部浮动,阻止浮动元素覆盖

    如果一个浮动元素后面跟着一个非浮动的元素,那么就会产生一个重叠的现象。常规流(也称标准流、普通流)是一个文档在被显示时最常见的布局形态,当float不为none时,position为absolute、fixed时元素将脱离标准流。

    没有BFC的情况:

    示例代码:

    新葡亰496net 27<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFC与IFC</title> <style type="text/css"> #div1{ width: 200px; height: 200px; background: lightgreen; float: left; } #div2{ width: 300px; height: 300px; background: lightblue; } </style> </head> <body> <h2>BFC与IFC</h2> <div id="div1">div1 </div> <div id="div2">div2 </div> </body> </html> View Code

    运行结果:

    新葡亰496net 28

    此时的div1因为float已经产生了BFC,在div2中添加样式overflow:hidden让其产生BFC,代码如下:

                #div2{
                    width: 300px;
                    height: 300px;
                    background: lightblue;
                    overflow: hidden;
                }
    

    运行结果:

    新葡亰496net 29

    b)、清除元素内部浮动,计算浮动元素的高度

    只要把父元素设为BFC就可以清理子元素的浮动了,最常见的用法就是在父元素上设置overflow: hidden样式,对于IE6加上zoom:1就可以了(IE Haslayout)。

    当一个元素的内部元素浮动时不会计算其高度,示例如下:

    新葡亰496net 30<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFC与IFC</title> <style type="text/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> <h2>BFC与IFC</h2> <div id="div0"> <div id="div1">div1 </div> <div id="div2">div2 </div> </div> </body> </html> View Code

    运行结果:

    新葡亰496net 31

    修改div0让其触发BFC,还原高度,代码如下:

                #div0 {
                    border: 2px solid lightsalmon;
                    padding: 20px;
                    width: 400px;
                    overflow: hidden;  /*让div0触发BFC*/
                }
    

    运行结果:

     新葡亰496net 32

    c)、外边距将不再与上下文之外的元素折叠 

    示例代码:

    新葡亰496net 33<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFC与IFC</title> <style type="text/css"> #div1 { width: 200px; height: 200px; background: lightgreen; margin-bottom: 100px; } #div2 { width: 200px; height: 200px; background: lightblue; margin-top: 100px; } </style> </head> <body> <h2>BFC与IFC</h2> <div id="div1">div1 </div> <div id="div2">div2 </div> </body> </html> View Code

    新葡亰496net 34

    如果此时将脚本的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 charset="UTF-8">
            <title>BFC与IFC</title>
            <style type="text/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>
            <h2>BFC与IFC</h2>
            <div id="div1">div1
            </div>
            <div id="div2-outer">
                <div id="div2">div2
                </div>
            </div>
        </body>
    </html>
    

    运行结果如下:

    新葡亰496net 35

     d)、元素会一个接一个地被垂直放置,它们的起点是一个包含块的顶部(文字不会环绕布局)

    示例代码:

    新葡亰496net 36<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFC</title> <style> .div1 { border: 3px solid blue; width: 300px; } .cls1 { width: 100px; height: 100px; background: lightblue; margin: 5px; float:left; } </style> </head> <body> <div class="div1"> <div id="div11" class="cls1">div11</div> <p> 扁粉菜(BFC)是安阳名吃,制作原料和工艺都很简单。扁粉菜是大锅菜,以扁粉条为主原料;熬一大锅的高汤,将扁粉条下锅煮熟,再烩入豆腐片,猪血片和青菜。盛上一碗加点辣椒,配上热乎乎的油饼,吃上一口,怎一个“爽”字了得!扁粉菜最有营养的算是高汤和猪血片了,而且可以续汤,虽然它是粗食,但是便宜,实惠,营养,所以大家都爱吃 </p> </div> </body> </html> View Code

    没有BFC时的运行结果:

    新葡亰496net 37

    从运行结果可以看出div与p还是重叠了,只是文字被挤出,和前面提到的重叠是同一个意思,将p元素触发BFC后的效果如下图所示:

                p{
                    overflow: hidden;
                }
    

    运行结果:

    新葡亰496net 38

    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-block
    height: (除 auto 外任何值)
    width: (除 auto 外任何值)
    float: (left 或 right)
    position: absolute
    writing-mode: tb-rl
    zoom: (除 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 Context),FFC是弹性盒格式化上下文(Flex Formatting Context),FKC是开封菜的意思:)。

    2.2 高度塌陷

    float属性有一个著名的特性:会让父元素的高度塌陷。如章节2.1中的效果图,父元素div的高度并没有被子元素撑开(粉色区域),这种效果可以称为”高度塌陷“。导致高度塌陷的原因是因为浮动元素脱离了正常的文档流,则div.father认为其没有子元素,所以产生了高度塌陷。后文中将讲述如何解决高度塌陷的问题。

    (2)多个选择器的优先级计算
    假设,用1代表标签选择器,10代表类选择器,100代表ID选择器,1000代表行内样式
    H2{color:#FF0000} 优先级 1
    .news h2{color:#0000FF} 优先级 11
    div.news h2{color:#00FF00} 优先级 12
    div#news h2{color:#FFFF00} 优先级 102

    2.1为Box-1设置浮动

    CSS

    .item1{ border:5px dashed #111111; float:left; }

    1
    2
    3
    4
    .item1{
                border:5px dashed #111111;
                float:left;
            }

    效果如下图:

    新葡亰496net 39

    可以看到标准流中的Box-2的文字在围绕着Box-1排列,而此时的Box-1的宽度不再伸展,而是能容纳下内容的最小宽度。 因为此时的Box-1已经脱离了标准流,标准流中的Box-2会顶到原来Box-1的位置(也就是Box-2的左边框和Box-1的左边框重合)此时Box-2的文字会围绕着Box-1排列。

    二、定位

    使用css布局position非常重要,他的语法如下:

    position:static | relative | absolute | fixed | center | page | sticky
    默认值:static,center、page、sticky是CSS3中新增加的值。

    2.1、static
    可以认为静态的,默认元素都是静态的定位,对象遵循常规流。此时4个定位偏移属性不会被应用,也就是使用left,right,bottom,top将不会生效。

    示例:

    新葡亰496net 40<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>定位</title> <style type="text/css"> #div1{ width: 200px; height: 200px; background: lightblue; left:100px; top:100px; } </style> </head> <body> <div id="div1"> </div> </body> </html> View Code

    运行结果:

    新葡亰496net 41

    定义偏移并未起作用。

    2.3 块状化

    块状化的意思是,一旦元素float的属性不为none,则其display计算值就是block或者table。举个例子:

    /* JavaScript代码 */ var span = document.createElement('span') document.body.appendChild(span) console.log('1.' window.getComputedStyle(span).display) // 设置元素左浮动 span.style.cssFloat = 'left' console.log('2.' window.getComputedStyle(span).display)

    1
    2
    3
    4
    5
    6
    7
    /* JavaScript代码 */
    var span = document.createElement('span')
    document.body.appendChild(span)
    console.log('1.' window.getComputedStyle(span).display)
    // 设置元素左浮动
    span.style.cssFloat = 'left'
    console.log('2.' window.getComputedStyle(span).display)

    在控制台中的结果如下:

    1.inline 2.block

    1
    2
    1.inline
    2.block

    不知道大家有没有跟我一样的疑问:既然设置float后,元素就块状化了,那么怎么还能产生包裹性的效果呢?回答这个问题,需要重新阐述下块状化的意思,这里的块状化意思是可以像block元素一样设置宽和高,并不是真正的块元素。

    因此,没有任何理由出现下面的样式组合:

    span{ display: block; /* 多余 */ float: left; } span{ float: left; vertical-align: middle; /* 多余 */ }

    1
    2
    3
    4
    5
    6
    7
    8
    span{
        display: block; /* 多余 */
        float: left;
    }
    span{
        float: left;
        vertical-align: middle; /* 多余 */
    }

     

    2.2为Box-2设置浮动

    CSS

    .item2{ border:5px dashed #f73b4d; float:left; }

    1
    2
    3
    4
    .item2{
                border:5px dashed #f73b4d;
                float:left;
            }

    效果如下图:

    新葡亰496net 42

    这是很容易看出Box-3和Box-1的左边框重合。Box-3的文字围绕Box-2,并且Box-1和Box-2之间的空白是两者之间的margin产生的。

    2.2、relative

    相对定位,对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。

    示例代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>相对定位</title>
            <style type="text/css">
                div {
                    width: 200px;
                    height: 200px;
                    background: lightblue;
                    margin: 10px;
                }
                #div1 {
                    position: relative;  /*相对定位*/
                    left:30px;  /*在自己原有位置上相对左边偏移30像素*/
                    bottom: -30px;
                    background: lightgreen;
                }
            </style>
        </head>
        <body>
            <div id="div1">div1
            </div>
            <div id="div2">div2
            </div>
        </body>
    </html>
    

    运行结果:

    新葡亰496net 43

    2.4 没有任何的margin重叠

    在这里,我们将.son类增加margin:10px样式,在浏览器中查看实际效果。

    /* HTML 代码 */ <div class="father"> <div class="son"> <img src="../../lib/img/mm1.png"> </div> <div class="son"> <img src="../../lib/img/mm1.png"> </div> <div class="son"> <img src="../../lib/img/mm1.png"> </div> </div>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /* HTML 代码 */
    <div class="father">
        <div class="son">
            <img src="../../lib/img/mm1.png">
        </div>
        <div class="son">
            <img src="../../lib/img/mm1.png">
        </div>
        <div class="son">
            <img src="../../lib/img/mm1.png">
        </div>
    </div>

    新葡亰496net 44

    我们增加.son类的margin为10px,在浏览器中查看相邻的.son元素的空白区域的高度是20px,可以发现设置了float属性的元素没有任何的margin重叠,这和普通的元素margin重叠不一样。

    *{font-size:12px;} //通用选择器 ie6不支持,少用
    h1{font-size:12px;} // 标签选择器
    <div class=""></div> //类样式 【使用最多】
    <div id=""></div> // id 选择器 【多用于js调用,id唯一】

    2.3为Box-3设置浮动

    CSS

    .item3{ border:5px dashed #0000CD; float:left; }

    1
    2
    3
    4
    5
        .item3{
                border:5px dashed #0000CD;
                float:left;
     
            }

    效果如下图:

    新葡亰496net 45

    这个时候可以很明显的看出三个浮动的盒子(都脱离文档流)都被P标签的盒子所包围,并且被文字环绕。

    2.3、absolute

    绝对定位,对象脱离常规流,此时偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。

    元素定位参考的是离自身最近的定位祖先元素,要满足两个条件,第一个是自己的祖先元素,可以是父元素也可以是父元素的父元素,一直找,如果没有则选择body为对照对象。第二个条件是要求祖先元素必须定位,通俗说就是position的属性值为非static都行。

    示例代码:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>绝对定位</title>
            <style type="text/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 id="div1"> div1
                <div id="div2"> div2
                    <div id="div3">div3
                    </div>
                </div>
            </div>
    
        </body>
    
    </html>
    

    运行结果:

    新葡亰496net 46

     因为div3使用absolute绝对定位,它的参考对象是父元素div2,div1都不满足条件,因为两者都没有进行定位,是默认的定位值static,根据约定最终找到body,所以会出现在页面的右上角。此时如果想让div3的参照对象为div1,则可以修改代码为:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>绝对定位</title>
            <style type="text/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 id="div1"> div1
                <div id="div2"> div2
                    <div id="div3">div3
                    </div>
                </div>
            </div>
        </body>
    </html>
    

    运行结果:

     新葡亰496net 47

    3. float与流体布局

    使用float可以通过破坏正常的文档流实现CSS环绕,但是却带来了”高度塌陷”的问题!然而我们可以利用float破坏正常文档流的特性实现一些常用的布局:

    • 文字环绕变身-中间内容居中,左中右布局

    直接看例子:

    <div class="box"> <a href="javascript:;" class="fl">左青龙</a> <a href="javascript:;" class="fr">右白虎</a> <h3 class="text-center">标题</h3> </div>

    1
    2
    3
    4
    5
    <div class="box">
        <a href="javascript:;" class="fl">左青龙</a>
        <a href="javascript:;" class="fr">右白虎</a>
        <h3 class="text-center">标题</h3>
    </div>

    .box{ background-color: #f5f5f5; } .fl{ float: left; } .fr{ float: right; } .text-center{ text-align: center; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .box{
        background-color: #f5f5f5;
    }
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    .text-center{
        text-align: center;
    }

    从下图中看出,实现了中间内容居中的左中右布局。

    新葡亰496net 48

    • 文字环绕的衍生-单侧固定
    &lt;div class="box"&gt; &lt;a href="javascript:;"
    class="fl"&gt;左青龙&lt;/a&gt; &lt;a href="javascript:;"
    class="fr"&gt;右白虎&lt;/a&gt; &lt;h3
    class="text-center"&gt;标题&lt;/h3&gt; &lt;/div&gt;
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f69ec384a3401669605-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384a3401669605-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f69ec384a3401669605-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384a3401669605-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f69ec384a3401669605-5">
    5
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f69ec384a3401669605-1" class="crayon-line">
    &lt;div class=&quot;box&quot;&gt;
    </div>
    <div id="crayon-5b8f69ec384a3401669605-2" class="crayon-line crayon-striped-line">
        &lt;a href=&quot;javascript:;&quot; class=&quot;fl&quot;&gt;左青龙&lt;/a&gt;
    </div>
    <div id="crayon-5b8f69ec384a3401669605-3" class="crayon-line">
        &lt;a href=&quot;javascript:;&quot; class=&quot;fr&quot;&gt;右白虎&lt;/a&gt;
    </div>
    <div id="crayon-5b8f69ec384a3401669605-4" class="crayon-line crayon-striped-line">
        &lt;h3 class=&quot;text-center&quot;&gt;标题&lt;/h3&gt;
    </div>
    <div id="crayon-5b8f69ec384a3401669605-5" class="crayon-line">
    &lt;/div&gt;
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    

    .father{ border: 1px solid #444; overflow: hidden; } .father > img { width: 60px; height: 64px; float: left; } .girl { /* 环绕和自适应的区别所在 */ margin-left: 70px; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .father{
        border: 1px solid #444;
        overflow: hidden;
    }
    .father > img {
        width: 60px; height: 64px;
        float: left;
    }
    .girl {
        /* 环绕和自适应的区别所在 */
        margin-left: 70px;
    }

    和文字环绕效果相比,区别就是.girl多了一个margin-left: 70px,同时图片的宽度设置60px,因此不会发生文字环绕的效果。这里,我们也可以不使用margin-left,改用border-left或者padding-left都可以达到改变content box的尺寸,从而实现宽度自适应布局效果。

    新葡亰496net 49

    多元素选择器
    h1,h2{color:red;}

    2.4设置Box-3浮动的方向

    CSS

    .item3{ border:5px dashed #0000CD; float:right; }

    1
    2
    3
    4
    5
    .item3{
                border:5px dashed #0000CD;
                float:right;
     
            }

    效果如下图:

    新葡亰496net 50

    这个时候当我把浏览器窗口的宽度逐渐的缩小到不能容纳三个div宽度的时候,会有什么效果呢?如下图:

    新葡亰496net 51

    注意:

    这种效果我只在IE浏览器(<=IE8的浏览器中出现更怪异的情况)里面测试的时候可以小到让Box-3换行。

    在mac下得chrome,firefox和safari当窗口缩小到一定的宽度的时候,就无法在缩小宽度。无法出现Box-3被挤到下一行的情况。

    如下图:

    新葡亰496net 52

    这时如果我们设置item2右浮动item3左浮动当我缩小浏览器窗口的时候,会出现如下的情况(mac下chrome和safari中仍旧是之上的情况,缩小到一定宽度无法再缩小)。

    新葡亰496net 53

    由此我们可以得出一个结论:

    当浮动的元素在一行无法显示完全时,元素会按照普通流的顺序(Dom排列顺序)被挤到下一行。

    2.4、fixed

    固定定位,与absolute一致,但偏移定位是以窗口为参考。当出现滚动条时,对象不会随着滚动。

    简单的回顶端示例代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>固定定位</title>
            <style type="text/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 id="title">固定定位</h2>
            <div id="top"><a href="#title">回顶部</a></div>
        </body>
    </html>
    

    运行结果:

    新葡亰496net 54

    练习:

    新葡亰496net 55

    center:
    与absolute一致,但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。(CSS3)
    page:
    与absolute一致。元素在分页媒体或者区域块内,元素的包含块始终是初始包含块,否则取决于每个absolute模式。(CSS3)
    sticky:
    对象在常态时遵循常规流。它就像是relative和fixed的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。(CSS3)

    4. float的克星

    既然使用float属性会带来一系列的问题,那么有没有办法消除这些问题呢?答案是:肯定有。接着看下文。

    后代元素选择器
    子元素选择器

    2.5浮动的边界

    增加Box-1的高度,当缩小浏览器的宽度的时候,会出现如下的现象:

    新葡亰496net 56

    主要是因为这个时候Box-3的边缘被Box-1的边缘卡住的缘故。

    如下图红色的地方会有三个margin值:

    新葡亰496net 57

    2.5、z-index属性

    语法:z-index: auto | <integer>
    默认值:auto
    适用于:定位元素。即定义了position为非static的元素
    取值:
    auto: 元素在当前层叠上下文中的层叠级别是0。元素不会创建新的局部层叠上下文,除非它是根元素。
    整数: 用整数值来定义堆叠级别。可以为负值。 说明:
    检索或设置对象的层叠顺序。
    z-index用于确定元素在当前层叠上下文中的层叠级别,并确定该元素是否创建新的局部层叠上下文。
    当多个元素层叠在一起时,数字大者将显示在上面。

     示例:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/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 id="div1">
                div1
            </div>
            <div id="div2">
                div2
            </div>
            <div id="div3">
                div3
            </div>
        </body>
    </html> 
    

    未指定z-index时默认运行效果:

    新葡亰496net 58

    指定div2的z-index值时的运行效果:

    新葡亰496net 59

    4.1 clear属性

    在CSS中可以使用clear来清除float属性带来高度塌陷等问题,使用格式如下:

    clear: none | left | right | both

    1
    clear: none | left | right | both
    • none:默认值,允许两边都有浮动对象;
    • left:不允许左侧有浮动对象;
    • right:不允许右侧有浮动对象;
    • both:两侧不允许有浮动对象。

    如果单从字面上的意思来理解,clear:left应该是”清除左浮动“,clear:right应该是”清除右浮动“,实际上,这种说法是有问题的,因为浮动一直还在,并没有清除!只能清除浮动带来的影响。

    官方对clear属性的解释是:“元素盒子的边不能和前面的浮动元素相邻”。注意这里的”前面的”3个字,也就是clear属性对”后面的”浮动元素是不闻不问的。clear属性只能清除元素的自身,不能影响其他的元素。接着看下面的这个例子:

    /* HTML代码 */ <div class="box1"></div> <div class="box2"></div>

    1
    2
    3
    /* HTML代码 */
    <div class="box1"></div>
    <div class="box2"></div>

    /* CSS代码 */ .box1 { float: left; width: 100px; height: 60px; padding: 10px; border: 3px solid black; background: url("../../lib/img/mm1.png") center no-repeat; } .box2 { border: 3px solid red; padding:10px; width:100px; height: 60px; background: url("../../lib/img/mm2.jpg") center no-repeat; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    /* CSS代码 */
    .box1 {
        float: left;
        width: 100px;
        height: 60px;
        padding: 10px;
        border: 3px solid black;
        background: url("../../lib/img/mm1.png") center no-repeat;
    }
    .box2 {
        border: 3px solid red;
        padding:10px;
        width:100px;
        height: 60px;
        background: url("../../lib/img/mm2.jpg") center no-repeat;
    }

    新葡亰496net 60

    如上图所示,box1元素为设置了左浮动,已经脱离了正常的文档流,所以box2能够在box1的底层显示。如果想让box2能够换行排列,则只需要在.box2类中增加clear:left样式即可。如下图所示:

    新葡亰496net 61

    .new li{border:1px solid #ccc;} 后代所有元素【特别哦】
    .new > .title{color:red;} 子代元素 【只有一代】【少用】
    <div class="new">
    <div class="title">title</div>
    <div class="content">
    <li>公司成立</li>
    </div>
    </div>

    2.6取消浮动的影响

    使用CSS属性Clear,它有三个值left,right,both。

    如我们取消p元素左右两侧的浮动:

    代码如下:

    CSS

    #body-div p{ border:5px dashed #111111; background-color:#ff90ba; clear:both; }

    1
    2
    3
    4
    5
    #body-div p{
                border:5px dashed #111111;
                background-color:#ff90ba;
                clear:both;
            }

    效果如下: 新葡亰496net 62

    2.6、菜单

    使用前面的内容实现了一个简单的下拉菜单,效果如下:

    新葡亰496net 63

    菜单结构:

    新葡亰496net 64<ul class="menu"> <li> <a href="#">联系我们</a> </li> <li> <a href="#新葡亰496net,">公司掠影</a> <ul> <li><a href="#">版权声明</a></li> <li><a href="#">在线留言</a></li> <li><a href="#">技术支持</a></li> </ul> </li> <li> <a href="#">新闻中心</a> <ul> <li><a href="#">版权声明</a></li> <li><a href="#">在线留言</a></li> <li><a href="#">技术支持</a></li> </ul> </li> <li> <a href="#">版权声明</a> </li> <li> <a href="#">在线留言</a> <ul> <li><a href="#">版权声明</a></li> <li><a href="#">在线留言</a></li> <li><a href="#">技术支持</a></li> </ul> </li> <li> <a href="#">技术支持</a> </li> </ul> View Code

    示例代码:

    新葡亰496net 65<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/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(opacity=60); /* IE 滤镜 */ opacity:0.6; } </style> </head> <body> <ul class="menu"> <li> <a href="#">联系我们</a> </li> <li> <a href="#">公司掠影</a> <ul> <li><a href="#">版权声明</a></li> <li><a href="#">在线留言</a></li> <li><a href="#">技术支持</a></li> </ul> </li> <li> <a href="#">新闻中心</a> <ul> <li><a href="#">版权声明</a></li> <li><a href="#">在线留言</a></li> <li><a href="#">技术支持</a></li> </ul> </li> <li> <a href="#">版权声明</a> </li> <li> <a href="#">在线留言</a> <ul> <li><a href="#">版权声明</a></li> <li><a href="#">在线留言</a></li> <li><a href="#">技术支持</a></li> </ul> </li> <li> <a href="#">技术支持</a> </li> <li> <a href="#">在线留言</a> <ul> <li><a href="#">版权声明</a></li> <li><a href="#">在线留言</a></li> <li><a href="#">技术支持</a></li> </ul> </li> <li> <a href="#">技术支持</a> </li> </ul> <img src="img/banner (12).jpg"/> <ul class="menu"> <li> <a href="#">联系我们</a> </li> <li> <a href="#">公司掠影</a> <ul> <li><a href="#">版权声明</a></li> <li><a href="#">在线留言</a></li> <li><a href="#">技术支持</a></li> </ul> </li> <li> <a href="#">新闻中心</a> <ul> <li><a href="#">版权声明</a></li> <li><a href="#">在线留言</a></li> <li><a href="#">技术支持</a></li> </ul> </li> <li> <a href="#">版权声明</a> </li> <li> <a href="#">在线留言</a> <ul> <li><a href="#">版权声明</a></li> <li><a href="#">在线留言</a></li> <li><a href="#">技术支持</a></li> </ul> </li> <li> <a href="#">技术支持</a> </li> <li> <a href="#">在线留言</a> <ul> <li><a href="#">版权声明</a></li> <li><a href="#">在线留言</a></li> <li><a href="#">技术支持</a></li> </ul> </li> <li> <a href="#">技术支持</a> </li> </ul> <img src="img/banner (12).jpg"/> </body> </html> View Code

    运行结果:

    新葡亰496net 66

    4.2 clear属性的不足

    clear属性只对块级元素有效,但是::after等伪元素默认都是内联水平,因此,在实际工作中,我们常常使用下面的代码来清除浮动带来的影响:

    .clear::after{ content: ""; display: table;/*也可以是'block'或者是'list-item'*/ clear: both; }

    1
    2
    3
    4
    5
    .clear::after{
        content: "";
        display: table;/*也可以是'block'或者是'list-item'*/
        clear: both;
    }

    由于clear:both作用的本质是让自己不和float元素在一行显示,并不是真正意义上的清除浮动,因此float元素有一些不好的特性依然存在,表现在:

    • 如果clear:both元素前面的元素就是float元素,则设置margin-top无效;
    /* HTML代码 */ &lt;div class="box1"&gt;&lt;/div&gt; &lt;div
    class="box2"&gt;&lt;/div&gt;
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f69ec384b8874186375-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384b8874186375-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f69ec384b8874186375-3">
    3
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f69ec384b8874186375-1" class="crayon-line">
    /* HTML代码 */
    </div>
    <div id="crayon-5b8f69ec384b8874186375-2" class="crayon-line crayon-striped-line">
    &lt;div class=&quot;box1&quot;&gt;&lt;/div&gt;
    </div>
    <div id="crayon-5b8f69ec384b8874186375-3" class="crayon-line">
    &lt;div class=&quot;box2&quot;&gt;&lt;/div&gt;
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    

    /* CSS代码 */ .box1 { float: left; width: 100px; height: 60px; padding: 10px; border: 3px solid black; background: url("../../lib/img/mm1.png") center no-repeat; } .box2 { clear: both; margin-top: -20px; border: 3px solid red; padding:10px; width:100px; height: 60px; background: url("../../lib/img/mm2.jpg") center no-repeat; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    /* CSS代码 */
    .box1 {
        float: left;
        width: 100px;
        height: 60px;
        padding: 10px;
        border: 3px solid black;
        background: url("../../lib/img/mm1.png") center no-repeat;
    }
    .box2 {
        clear: both;
        margin-top: -20px;
        border: 3px solid red;
        padding:10px;
        width:100px;
        height: 60px;
        background: url("../../lib/img/mm2.jpg") center no-repeat;
    }

    在本例中,设置.box2中的margin-top没有任何的效果,如下图所示:
    新葡亰496net 67

    • clear:both后面的元素依旧可能会发生文字环绕现象。
    &lt;div class="father"&gt; &lt;div class="float"&gt; &lt;img
    src="../../lib/img/mm1.png"&gt; &lt;/div&gt;
    &lt;p&gt;美女1,美女2,美女3,美女4,美女5,美女6,后宫1,后宫2,后宫3,后宫&lt;/p&gt;
    &lt;/div&gt; &lt;div&gt;我要美女1,我还要美女2&lt;/div&gt;
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f69ec384bf922765024-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384bf922765024-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f69ec384bf922765024-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384bf922765024-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f69ec384bf922765024-5">
    5
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384bf922765024-6">
    6
    </div>
    <div class="crayon-num" data-line="crayon-5b8f69ec384bf922765024-7">
    7
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f69ec384bf922765024-1" class="crayon-line">
    &lt;div class=&quot;father&quot;&gt;
    </div>
    <div id="crayon-5b8f69ec384bf922765024-2" class="crayon-line crayon-striped-line">
        &lt;div class=&quot;float&quot;&gt;
    </div>
    <div id="crayon-5b8f69ec384bf922765024-3" class="crayon-line">
            &lt;img src=&quot;../../lib/img/mm1.png&quot;&gt;
    </div>
    <div id="crayon-5b8f69ec384bf922765024-4" class="crayon-line crayon-striped-line">
        &lt;/div&gt;
    </div>
    <div id="crayon-5b8f69ec384bf922765024-5" class="crayon-line">
        &lt;p&gt;美女1,美女2,美女3,美女4,美女5,美女6,后宫1,后宫2,后宫3,后宫&lt;/p&gt;
    </div>
    <div id="crayon-5b8f69ec384bf922765024-6" class="crayon-line crayon-striped-line">
    &lt;/div&gt;
    </div>
    <div id="crayon-5b8f69ec384bf922765024-7" class="crayon-line">
    &lt;div&gt;我要美女1,我还要美女2&lt;/div&gt;
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    

    /* CSS代码 */ .father{ border: 1px solid deeppink; width: 500px; height: 70px; } .father:after{ content: ''; display: table; clear: both; } .float{ float: left; } .father img { width: 60px; height: 70px; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    /* CSS代码 */
    .father{
        border: 1px solid deeppink;
        width: 500px;
        height: 70px;
    }
    .father:after{
        content: '';
        display: table;
        clear: both;
    }
    .float{
        float: left;
    }
    .father img {
        width: 60px;
        height: 70px;
    }

    在本例中,设置clean:both来阻止浮动对后面元素的影响,但是最后的错位效果依然发生了(可以设置.father的字体大小为0,然后设置p标签的字体大小解决错误的问题)。

    新葡亰496net 68

    由此可见,clear:both只能在一定程度上消除浮动的影响,要想完美去除浮动元素的影响,借助其他的手段——BFC,接着看下文。

    div.box class="box" 的 div
    div#header id="header"的div

    2.7浮动的影响

    当然浮动对父级元素也会带来影响,比如说伟大的“塌陷”,看代码:

    CSS

    <style type="text/css"> body{margin:0;} #body-div{ background-color:#ffff99; border:1px solid #111111; padding:5px; } #body-div div{ padding:10px; margin:15px; background-color:#90baff; } #body-div p{ border:5px dashed #111111; background-color:#ff90ba; clear:both; } .item1{ border:5px dashed #111111; float:left; height:30px; } .item2{ border:5px dashed #f73b4d; float:left; } .item3{ border:5px dashed #0000CD; float:left; } </style>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <style type="text/css">
            body{margin:0;}
            #body-div{
                background-color:#ffff99;
                border:1px solid #111111;
                padding:5px;
            }
            #body-div div{
                padding:10px;
                margin:15px;
                background-color:#90baff;
            }
            #body-div p{
                border:5px dashed #111111;
                background-color:#ff90ba;
                clear:both;
            }
            .item1{
                border:5px dashed #111111;
                float:left;
                height:30px;
            }
            .item2{
                border:5px dashed #f73b4d;
                float:left;
            }
            .item3{
                border:5px dashed #0000CD;
                float:left;
     
            }
        </style>

    效果如下图:

    新葡亰496net 69

    所有子元素的浮动不会将父级元素的高度撑开。

    那么怎么解决这个问题呢?

    一个很古老的办法就是在所有子元素的末尾添加一个空的div,并且设置它的clear:both。 看代码如下:

    CSS

    #body-div .clear-float{ clear:both; border:0; padding:0; margin:0; }

    1
    2
    3
    4
    5
    6
    #body-div  .clear-float{
                clear:both;
                border:0;
                padding:0;
                margin:0;
            }

    效果如下:

    新葡亰496net 70

    其实我在IE各版本浏览器和非IE浏览器中测试的效果都是如上面的效果可意很容易的发现父级的div盒子并没有被完全的撑开。

    不过有大神已经研究出了clearfix的写法,可以达到最合理的效果,主要目的就是触发父级盒子自身的BFC。

    版本一:

    CSS

    .clearfix:after { content: "200B"; display: block; height: 0; clear: both; } .clearfix { *zoom: 1;/*IE/7/6*/ }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
        .clearfix:after {
            content: "200B";
            display: block;
            height: 0;
            clear: both;
        }
     
        .clearfix {
            *zoom: 1;/*IE/7/6*/
        }

    > content:”200B”;这个参数,Unicode字符里有一个“零宽度空格”,即 U 200B,代替原来的“.”,可以缩减代码量。而且不再使用visibility:hidden。 **版本二:**

    CSS

    .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; /*IE/7/6 */ }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .clearfix:before, .clearfix:after {
        content: "";
        display: table;
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
    *zoom: 1;        /*IE/7/6 */
    }

    经过测试在IE的各个版本的浏览器中和非IE浏览器都能够正常的得到结果。

    新葡亰496net 71

    2.7、:target伪类

    语法:
    E:target { css }
    说明:
    匹配相关URL指向的E元素。
    解释:URL后面跟锚点#,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element),:target选择器用于选取当前活动的目标元素。只有支持CSS3的浏览器可用。

    新葡亰496net 72<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .content { height: 50px; font-size: 20px; color: royalblue; border: 2px solid darkblue; } div :target { background: lightgreen; } </style> </head> <body> <div id="div1"> <a href="#p1">第一段</a> <a href="#p2">第二段</a> <a href="#p3">第三段</a> </div> <div id="div2"> <div id="p1" class="content">第一段内容</div> <div id="p2" class="content">第二段内容</div> <div id="p3" class="content">第三段内容</div> </div> </body> </html> View Code

    运行结果:

    新葡亰496net 73

    通俗说就是url中的#选中的id元素将被css选择。在完成没有js的菜单,选项卡时如果不考虑ie8则可以使用这种新的办法。

    5. CSS世界的结界——BFC

    任何html元素都有 width height padding margin border background

    推荐阅读:

    打赏支持我写出更多好文章,谢谢!

    打赏作者

    三、浮动

    浮动在CSS布局中饱受诟病,因为控制起来比较麻烦,但如果掌握了他的特性使用起来还是不难的,在CSS中使用float指定浮动属性值,该属性的值指出了对象是否及如何浮动,浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的标准流中,所以文档的标准流中的块框表现得就像浮动框不存在一样。float的基本语法如下:

    float:none | left | right

    5.1 BFC的定义

    BFC全称block formatting context,中文为”块级格式化上下文“。BFC的表现原则为:如果一个元素具有BFC,那么它的内部子元素再怎么翻江倒海,都不会影响外部的元素。因此,BFC元素是不可能发生margin重叠的,另外,BFC元素也可以用来清除浮动的影响。

    那么满足什么条件才会有BFC呢?只要满足下面任意一个条件就会触发BFC:

    • html根元素;
    • float的值不为none;
    • overflow的值为auto、scroll或者hidden;
    • display的值为table-cell、table-caption和inline-block中的任何一个;
    • position的值不为relative和static;

    触发BFC后,就不需要使用clear:both属性去清除浮动的影响。

    body{font:bold italic 24px 黑体;} 简写的形式
    letter-spacing: 字间距
    line-height:150% 行高1.5倍

    打赏支持我写出更多好文章,谢谢!

    任选一种支付方式

    新葡亰496net 74 新葡亰496net 75

    4 赞 11 收藏 评论

    3.1、float取值

    none: 设置对象不浮动,默认值

    left: 设置对象浮在左边

    right: 设置对象浮在右边

    5.2 BFC的作用

    • 清除margin重叠
    /* HTML 代码 */ &lt;div class="parent"&gt; &lt;p&gt;item
    1&lt;/p&gt; &lt;p&gt;item 2&lt;/p&gt; &lt;p&gt;item 3&lt;/p&gt;
    &lt;p&gt;item 4&lt;/p&gt; &lt;/div&gt;
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f69ec384c6137798626-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384c6137798626-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f69ec384c6137798626-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384c6137798626-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f69ec384c6137798626-5">
    5
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384c6137798626-6">
    6
    </div>
    <div class="crayon-num" data-line="crayon-5b8f69ec384c6137798626-7">
    7
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f69ec384c6137798626-1" class="crayon-line">
    /* HTML 代码 */
    </div>
    <div id="crayon-5b8f69ec384c6137798626-2" class="crayon-line crayon-striped-line">
    &lt;div class=&quot;parent&quot;&gt;
    </div>
    <div id="crayon-5b8f69ec384c6137798626-3" class="crayon-line">
        &lt;p&gt;item 1&lt;/p&gt;
    </div>
    <div id="crayon-5b8f69ec384c6137798626-4" class="crayon-line crayon-striped-line">
        &lt;p&gt;item 2&lt;/p&gt;
    </div>
    <div id="crayon-5b8f69ec384c6137798626-5" class="crayon-line">
        &lt;p&gt;item 3&lt;/p&gt;
    </div>
    <div id="crayon-5b8f69ec384c6137798626-6" class="crayon-line crayon-striped-line">
        &lt;p&gt;item 4&lt;/p&gt;
    </div>
    <div id="crayon-5b8f69ec384c6137798626-7" class="crayon-line">
    &lt;/div&gt;
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    

    /* CSS 代码 */ .parent{ width: 300px; background-color: black; overflow: hidden; } p { background-color: white; margin: 10px 0; text-align: center; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    /* CSS 代码 */
    .parent{
        width: 300px;
        background-color: black;
        overflow: hidden;
    }
    p {
        background-color: white;
        margin: 10px 0;
        text-align: center;
    }

    在这种情况下,出现了margin重叠的效果。如下图所示:

    新葡亰496net 76

    利用BFC能消除margin重叠,谨记:只有当元素在同一个BFC中时,垂直方向上的margin才会clollpase。如果它们属于不同的BFC,则不会有margin重叠。因此我们可以再建立一个BFC去阻止margin重叠的发生。所以为了让他们的margin变成20px,我们只需要用div,建立一个BFC,令p元素处于不同BFC即可。请看例子:

    /* HTML 代码 */ <div class="parent"> <p>item 1</p> <p>item 2</p> <p>item 3</p> <p>item 4</p> </div>

    1
    2
    3
    4
    5
    6
    7
    /* HTML 代码 */
    <div class="parent">
        <p>item 1</p>
        <p>item 2</p>
        <p>item 3</p>
        <p>item 4</p>
    </div>

    从下图中可以看出,借助BFC消除了margin重叠的问题。

    新葡亰496net 77

    • 清除高度塌陷的问题

    在上面的章节中,如果子元素设置浮动属性,则父元素就会出现高度塌陷的问题。在这里,我们可以借助BFC消除高度塌陷的问题了,请看下面的这个例子:

    /* HTML代码 */ <div style="border: 1px solid deeppink;width: 200px; overflow: hidden"> <img src="../../lib/img/mm1.png" style="border: 1px solid blue; float: left"> </div>

    1
    2
    3
    4
    /* HTML代码 */
    <div style="border: 1px solid deeppink;width: 200px; overflow: hidden">
        <img src="../../lib/img/mm1.png" style="border: 1px solid blue; float: left">
    </div>

    从下图中可以看到,设置overflow:hidden样式后就产生了BFC,根据BFC的表现规则,内部元素的样式不会影响外部元素的样式,因此没有出现高度塌陷的问题。

    新葡亰496net 78

    • 自适应布局(阻止文本换行)
    /* HTML代码 */ &lt;div class="parent"&gt; &lt;img
    src="../../lib/img/mm1.png"&gt; &lt;p
    class="girl"&gt;美女1,美女2,美女3,美女4,美女5,美女6,后宫1,后宫2,后宫3,后宫4,&lt;/p&gt;
    &lt;/div&gt;
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f69ec384d4712979455-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384d4712979455-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f69ec384d4712979455-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69ec384d4712979455-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f69ec384d4712979455-5">
    5
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f69ec384d4712979455-1" class="crayon-line">
    /* HTML代码 */
    </div>
    <div id="crayon-5b8f69ec384d4712979455-2" class="crayon-line crayon-striped-line">
    &lt;div class=&quot;parent&quot;&gt;
    </div>
    <div id="crayon-5b8f69ec384d4712979455-3" class="crayon-line">
        &lt;img src=&quot;../../lib/img/mm1.png&quot;&gt;
    </div>
    <div id="crayon-5b8f69ec384d4712979455-4" class="crayon-line crayon-striped-line">
        &lt;p class=&quot;girl&quot;&gt;美女1,美女2,美女3,美女4,美女5,美女6,后宫1,后宫2,后宫3,后宫4,&lt;/p&gt;
    </div>
    <div id="crayon-5b8f69ec384d4712979455-5" class="crayon-line">
    &lt;/div&gt;
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    

    /* CSS代码 */ .parent{ border: 1px solid deeppink; width: 200px; font-size: 0; } .parent img{ border: 1px solid blue; float: left; } .girl{ /*overflow: hidden;*/ font-size: 12px; background-color: #cdcdcd; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    /* CSS代码 */
    .parent{
        border: 1px solid deeppink;
        width: 200px;
        font-size: 0;
    }
    .parent img{
        border: 1px solid blue;
        float: left;
    }
    .girl{
        /*overflow: hidden;*/
        font-size: 12px;
        background-color: #cdcdcd;
    }

    如果我们给.girl元素设置具有BFC特性的属性,如:overflow: hidden就可以实现更健壮、更智能的自适应布局。

    新葡亰496net 79

    这里的.girl元素为了不和浮动元素产生任何交集,顺着浮动边缘形成自己的封闭上下文。

    普通元素在设置了overflow:hidden后,会自动填满容器中除了浮动元素意外的剩余空间,形成自适应效果,这种自适应布局和纯流体布局相比:

    • 自适应内容由于封闭而更加健壮,容错性更强;
    • 自适应内容能够填满除浮动元素以外区域,不需要关心浮动元素宽度。

    padding:0px 0px 1px; 上 左右 下
    单行文本上下居中li{height:30px; line-height:30px;}
    li{list-style-type:none; }

    关于作者:zhiqiang21

    新葡亰496net 80

    做认为对的事情,如果可能是错的,那就做认为自己承受得起的事情! 个人主页 · 我的文章 · 11 ·      

    新葡亰496net 81

    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 charset="UTF-8">
            <title>float</title>
            <style type="text/css">
                #span1{
                    width: 100px;
                    height: 100px;
                    background: lightgreen;
                    float: right;
                }
            </style>
        </head>
        <body>
            span1
        </body>
    </html>
    

     不设置float时的效果:

    新葡亰496net 82

    设置向右float时的效果:

    新葡亰496net 83

    span是一个行内标签,默认设置高宽无效,但浮动后自动变成了块标签。

    d)、float在绝对定位和display为none时不生效

    当display为node时元素会隐藏,所以float意义不大;当position为absolute绝对定位时元素也将从标准流中脱离,元素使用偏移量移动,float特性无效。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>float</title>
            <style type="text/css">
                #div1{
                    width: 100px;
                    height: 100px;
                    background: lightgreen;
                    float: right;
                    position: absolute;
                    bottom: 5px;
                    left: 5px;
                }
            </style>
        </head>
        <body>
            <div id="div1">span1</div>
        </body>
    </html>
    

    新葡亰496net 84

    e)、浮动元素间会堆叠

    浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止,浮动元素间的堆叠示例:

    新葡亰496net 85<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>float</title> <style type="text/css"> div{ width: 100px; height: 100px; background: lightgreen; float: left; margin: 5px; } </style> </head> <body> <div id="div1">div1 </div> <div id="div2">div2 </div> <div id="div3">div3 </div> </body> </html> View Code

    运行结果:

    新葡亰496net 86

    f)、浮动元素不能溢出包含块

    浮动元素在包含块内,当包含块的宽度不足以容下浮动的子元素时,将自动折行;垂直方向当包含块认为浮动的子元素没有高度时,子元素会溢出,BFC能解决该问题。水平方向不会溢出,垂直方向有可能会溢出。

    新葡亰496net 87<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>float</title> <style type="text/css"> .cls1 { width: 100px; height: 100px; background: lightgreen; float: left; margin: 5px; } #div0{ width: 300px; padding: 5px; background: lightblue; } </style> </head> <body> <div id="div0"> <div id="div1" class="cls1">div1 </div> <div id="div2" class="cls1">div2 </div> <div id="div3" class="cls1">div3 </div> </div> </body> </html> View Code

    触发BFC时:

    新葡亰496net 88

    g)、相邻的浮动元素,left属性最前面的元素,排在最左边

    从e就可以看出效果,这里不举例。

    h)、相邻的浮动元素,right属性最前面的元素,排在最右边

    排列在最左边的向右浮动时出现在最右边,示例如下:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>float</title>
            <style type="text/css">
                div{
                    width: 100px;
                    height: 100px;
                    background: lightgreen;
                    float: right;
                    margin: 5px;
                }
            </style>
        </head>
        <body>
            <div id="div1">div1左
            </div>
            <div id="div2">div2中
            </div>
            <div id="div3">div3右
            </div>
        </body>
    </html>
    

    运行效果:

    新葡亰496net 89

    i)、包含块不会计算浮动元素的高宽

    示例代码:

    新葡亰496net 90<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>float</title> <style type="text/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 id="div0"> <div id="div1" class="cls1">div1 </div> <div id="div2" class="cls1">div2 </div> <div id="div3" class="cls1">div3 </div> </div> </body> </html> View Code

    运行结果:

    新葡亰496net 91

    j)、浮动元素与非浮动元素会重叠,挤出块中的内容

    示例代码:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>float</title>
            <style type="text/css">
                #div1 {
                    width: 100px;
                    height: 100px;
                    background: lightblue;
                    float: left;
                }
                #div2 {
                    width: 200px;
                    height: 200px;
                    background: lightgreen;
                }
            </style>
        </head>
        <body>
            <div id="div1">div1
            </div>
            <div id="div2">div2
            </div>
        </body>
    
    </html>
    

    运行结果:

    新葡亰496net 92

    当div1从float时从标准流中脱离开了,div2在标准流中,可以形象的认为在div2这个队列前没有元素了所以div2要向前靠,脱离标准流的元素的z方向排列时比标准流中的元素排列要靠前一些,但div2的内容被div1占用的空间挤出。

    6. 结语

    本文是我学习float属性总结文章,可能存在理解准确的地方,欢迎大家在评论区评论,指点迷津,大家互相帮助,互相进步。

    最后,希望本文的内容能够对您对float的理解能够有所帮助,感谢阅读。

    伪类选择器 <a>
    a:link,a:visited{text-decoration:none;}
    a:hover{text-decoration:underline;}

    3.3、清除浮动

    该属性的值指出了不允许有浮动对象的边。
    clear:none | left | right | both
    适用于:块级元素
    取值:
    none: 允许两边都可以有浮动对象
    both: 不允许有浮动对象
    left: 不允许左边有浮动对象
    right: 不允许右边有浮动对象

    参考

    张鑫旭-《CSS世界》


    作者简介:

    中文名:石头
    英文名:micstone
    某电商平台前端程序员一名,偶尔也写写后端代码,工作经历2016.7~至今。

    1 赞 1 收藏 评论

    新葡亰496net 93

    a.a1:link{color:red;} [厉害哦]

    3.3.1、清除外部浮动

    需要注意的是clear是用于控制元素本身的,不能影响别的元素,示例如下:

    新葡亰496net 94<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>清除浮动</title> <style type="text/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 id="div1">div1</div> <div id="div2">div2</div> </body> </html> View Code

    运行结果:

    新葡亰496net 95

    示例中div1的清除浮动并没有效果,因为他没有办法影响div2,如果设置div2清除浮动,则元素本身会向下一行,示例代码如下:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>清除浮动</title>
            <style type="text/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 id="div1">div1</div>
            <div id="div2">div2</div>
        </body>
    
    </html>
    

     运行结果如下:

     新葡亰496net 96

    如果div2后面还有一个div3也将会出现前面一样的情况:

    新葡亰496net 97<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>清除浮动</title> <style type="text/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 id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> </body> </html> View Code

    新葡亰496net 98

     练习:

    新葡亰496net 99

    <li><a>xx</a></li>
    <li><a class="a1">xxxxx</a></li>

    3.3.2、清除内部浮动

    当一个包含块内部有浮动元素时,外部块不会计算浮动块的高度与宽度,为了让内部的浮动元素撑开包含块,需要还原高度,暂且称为清除内部浮动。

    方法1:BFC

    新葡亰496net 100<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>float</title> <style type="text/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 id="div0"> <div id="div1" class="cls1">div1 </div> <div id="div2" class="cls1">div2 </div> <div id="div3" class="cls1">div3 </div> </div> </body> </html> View Code

    新葡亰496net 101

    新葡亰496net 102

    方法2:增加一个空的div,清除浮动

    新葡亰496net 103<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>float</title> <style type="text/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 id="div0"> <div id="div1" class="cls1">div1 </div> <div id="div2" class="cls1">div2 </div> <div id="div3" class="cls1">div3 </div> <div class="clear"></div> </div> </body> </html> View Code

    运行结果同方法1,要解释该方法的原理可以参考上文中的第j点。

    较为通用且兼容的清除浮动写法:

                .clearfix {
                    *zoom: 1;/*在旧版本的IE浏览器缩放大小,触发haslayout(类似BFC)*/
                }
                .clearfix:after {  /*伪元素,在应用该元素后添加一个伪元素*/
                    content: "";  /*内容为空*/
                    display: table;   /*BFC,清除内部浮动*/
                    clear: both; /*清除外部浮动*/
                }
    

    background-color
    background-image
    background-attachment 移动滚动条时,背景固定fix 还是滚动 scroll

    四、多种居中办法

    <style type="text/css">
    body,div,li{padding:0; margin:0;}
    ul,li{list-style:none;}
    li{
    padding-left:30px;
    background-repeat:no-repeat;
    background-image:url();
    background-position:left center;} li背景图片水平左对齐 垂直居中对齐
    </style>

    4.1、块标签自身水平居中

    当一个有宽度的块标签设置margin:0 auto时将实现自身的水平居中,示例脚本如下:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>float</title>
            <style type="text/css">
                #container {
                    margin: 0 auto;
                    width: 90%;
                    background: lightblue;
                    height: 200px;
                }
            </style>
        </head>
        <body>
            <div id="container">
            </div>
        </body>
    </html>
    

     运行结果:

    新葡亰496net 104

    行内元素 span a img 

    4.2、块标签内对齐

    text-align:start | 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 charset="UTF-8">
            <title>float</title>
            <style type="text/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 id="container">
                <div id="div1">div1</div>
                Hello Center
            </div>
        </body>
    </html> 
    

    运行结果:

    新葡亰496net 105

    这种对齐方式只针对块标签内的行内标签(inline box)与行内块标签(inline block)有将,对块标签是无效的因为块标签默认总是占整行。如果将示例中div1的显示方式修改为行内块标签(display: inline-block;),则效果如下所示:

     新葡亰496net 106

    在布局中经常会需要垂直居中,但没有像水平居中那么容易,这里总结出5种办法:

    行内元素的大小由内容决定,设置 width 和 height是看不到效果的

    4.3、垂直居中方法一

    当一个设置了定位的元素所有的偏移为0且margin为auto时将水平,垂直都居中,且父元素自身的高度可动态变化。

    示例代码:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>居中</title>
            <style type="text/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 id="div0">
                <div id="div1">
    
                </div>
            </div>
        </body>
    
    </html>
    

    运行结果:

    新葡亰496net 107

    个人认为box偏移上下左右都为0,这时候它就不知所措了,只好待在中间。

    行内元素转块元素

    4.4、垂直居中方法二

    如果是单行文本,行高如块的高度一样时将居中,只一行,行高和元素一样高,居中。

    line-height: 600px;
    height: 600px;

    只可以是文字等一些行内标签,图片不行,示例代码如下:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>居中</title>
            <style type="text/css">
                #div0 {
                    background: lightblue;
                    height: 80px;
                    /*line-height:40px;*/
                    font:20px/80px "microsoft yahei";
                }
            </style>
        </head>
        <body>
            <div id="div0">
                如果是单行文本,行高如块的高度一样时将居中,只一行,行高和元素一样高,居中
            </div>
        </body>
    
    </html>
    

    运行结果:

     新葡亰496net 108

    <span style="float:left;"></span> 变成了块元素

    4.5、垂直居中方法三

    让元素相对父元素定位,偏移左50%,上50%,把自身向左移半个宽度,向上移半个高度,同时完成了水平与垂直方向的居中

    新葡亰496net 109

    示例代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>居中</title>
            <style type="text/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 id="div0">
                <div id="div1">
                </div>
            </div>
        </body>
    
    </html>
    

    运行效果:

    新葡亰496net 110

    a span{display:block;} //行内元素转成块元素

    4.6、垂直居中方法四

    在CSS有一个属性应该欺骗过很多开发者,一直认为使用了他就可以垂直居中了,但不行,这个属性就是:

    语法:vertical-align:baseline | 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)来定位

     新葡亰496net 111

    示例代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>居中</title>
            <style type="text/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 id="div0">
                <img src="img/cp.png" id="img1"/>
            </div>
        </body>
    </html>
    

    运行效果:

    新葡亰496net 112

    其实此处只设置父元素的行高与高度一样时也能达到上面的效果,示例代码如下:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>居中</title>
            <style type="text/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 id="div0">
                <img src="img/cp.png" id="img1" />
            </div>
        </body>
    
    </html>
    

    在IE8与Google浏览器中运行效果:

    新葡亰496net 113

    新葡亰496net 114

    div{display:inline;} //块元素转行内元素

    4.7、垂直居中方法五

    行内元素,经过什么操作,可以变成“块元素”?
    浮动、display:block、固定定位、绝对定位

    4.7.1、使用div构造一个表格

    示例代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                .divTable {
                    display: table;
                    width:50%;
                }
    
                .divTr {
                    display: table-row;
                }
                .divTd {
                    display: table-cell;
                }
                div{
                    border:1px solid blue;
                }
            </style>
        </head>
    
        <body>
            <div class="divTable">
                <div class="divTr">
                    <div class="divTd">td11</div>
                    <div class="divTd">td12</div>
                </div>
                <div class="divTr">
                    <div class="divTd">td21</div>
                    <div class="divTd">td22</div>
                </div>
            </div>
        </body>
    </html>
    

    运行结果:

    新葡亰496net 115

    <span style="float:right;">右对齐
    float元素不占空间,不占px

    4.7.2、使用表格特性居中

    示例代码:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>居中</title>
            <style type="text/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 id="div0">
                <div id="div1">
                    <img src="img/cp.png" id="img1" height="200" />
                </div>
            </div>
        </body>
    
    </html>
    

    运行结果:

    新葡亰496net 116

    任何元素都可以浮动 float
    所有图片float:left; 只要宽度不够,就会自动换行,就有如下效果
    <ul><li><img src=""/></li></ul>
    图片1 图片2
    图片3 图片4

    4.8、垂直居中方法六

    在某些时候需要将小图片与文字对象,可以使用对齐的属性absmiddle(绝对居中),示例如下:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                #div1{
                    border: 2px solid lightblue;
                }
            </style>
        </head>
        <body>
            <div class="div1">
                <img src="img/018080.png" align="absmiddle"/>电视机
            </div>
        </body>
    </html>
    

    运行结果:

    新葡亰496net 117

    在IE8与chrome浏览器下的效果一样。

    p{width:580px; padding:20px 10px;} 宽就是600px了,添加padding margin 要减小width

    4.9、垂直居中方法七

    方法与4.5非常类似,但是4.5要求知道居中元素自身的高度与宽度,这样会有一定的局限,CSS3中可以使用transform移动元素自身的宽度与高度,示例代码如下:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>居中</title>
            <style type="text/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 id="div0">
                    <img src="img/cp.png" id="img1"/>
            </div>
        </body>
    
    </html>
    

    运行结果:

    新葡亰496net 118

    transform用于设置或检索对象的转换,参数translate()指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0

    每个div都定义高度
    li{float:left;}
    font-weight:bold;

    五、示例下载

    github:

    参照:

    新葡亰496net 119

    一、BFC与IFC 1.1、BFC与IFC概要 BFC(Block Formatting Context)即块级...

    <div class="class1 class2"></div> 加两个样式

    一行两个东西,一个float:left;一个float:right;

    css定位
    position: static(静态定位) fixed(固定定位) relative 相对定位 absolute 绝对定位
    left 设置元素距离左边多远
    right top bottom

    任何元素,默认是静态定位
    固定定位:相对于浏览器窗口(在线QQ) 固定元素,脱离文档,不占空间,是”块元素“
    相对定位:是相对于”它原来的自己“来进行的偏移,所占空间保留(淘宝图片新品标志)
    position:relative;
    right:-100px; //用负数

    绝对定位:相对于它的祖先(上级或者上上级,最终是<body>)定位,不占空间

    组合使用
    上级相对 position:relative;
    具体那个元素 position:absolute; top:-10px; right:-30px;

    CSS HACK 实在解决不了兼容性问题,可以试试使用css hack
    CSS HACK,针对不同浏览器IE6 IE7 IE8 火狐,编辑不同的CSS代码的过程,就叫CSS HACK。
    (1)CSS属性的HACK:
    div{
    background-color:red; //所有浏览器都支持 其他 显示 red
    *background-color:green; //ie6和IE7支持 ie7 显示 green
    _background-color:blue; //IE6认识 最终 ie6 显示 blue

     

    下面的css hack  未验证

    CSS Hack的实现方式:

             (1)IE条件语句:只在IE9-有效

                       <!--[新葡亰496netCSS定位难题,7种垂直居中方法。if IE]> 小于IE10的浏览器会看到此句<![endif]-->

                       <!--[if IE 6]> IE6看到此句<![endif]-->

                       <!--[if lt IE 8]> 小于IE8的浏览器会看到此句 <![endif]-->

                       <!--[if lte IE 8]> 小于等于IE8的浏览器会看到此句 <![endif]-->

                       上述条件语句中可以放置任何CSS/HTML/JS语句。

             (2)选择器前缀

                       <style>

                                .content{ }        所有浏览器都能理解的选择器

                                *html  .content{}                      只有IE6能理解的选择器

                                * html     .content{}                   只有IE7能理解的选择器

                       </style>

             (3)属性前缀

                       <style>

                                .content{

                                         -webkit-animation: anim1  3s;      

                                         -moz-animation: anim1  3s;

                                         -o-animation: anim1  3s;

                                         background: red;               /*所有浏览器都能识别*/

                                         *background:green;         /*IE6/IE7能识别*/

                                         _background:blue;            /*IE6/IE7能识别*/

                                         background:yellow;        /*IE能识别*/

                                         background: yellow9; /*IE9 能识别*/

                                         background: pink !important;  /*IE6无法识别*/

    }

                       </style>

    css 优化

    页面访问速度优化

             (0)硬件/网络优化

             (1)数据库优化

             (2)服务器优化

             (3)前端优化: HTML优化、CSS优化、JS优化

      CSS优化方案:

             优化原则:尽可能减少HTTP请求数量;尽可能减少每次请求的数据大小

             优化方法:

             (1)CSS Sprites:背景图滑动门、把很多的小背景图拼接为一副大图——百度“CSS Sprites在线”可以找到很多这样的工具

             (2)把CSS放到页面顶部,多用<link href=”x.css”/>代替@import url(x.css)

             (3)避免使用CSS表达式

             (4)避免空的src和href值

             (5)巧用浏览器缓存,把CSS放在尽可能少的HTML外部文件

             (6)首页中尽量不用外部CSS

             (7)不要在HTML中缩放图像

             (8)对JavaScript文件和CSS文件进行压缩(剔除空白/换行/注释等),减小文件大小。可使用类似YUI Compressor等工具    Yahoo UI Libary

     

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496netCSS定位难题,7种垂直居中方法

    关键词: