CSS定位问题（1）：盒模型、浮动、BFC_html/css_WEB-ITnose

引子：

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

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

效果如下图:

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

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

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的单元格的属性.

代码如下:

* {    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%使左右的单元格平分剩下的宽度.

1.盒模型

盒模型又分IE盒模型和非IE盒模型：看下面的一张图（来自维基百科）：

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

IE浏览器： margin-left+width+margin-right 非IE浏览器： margin-left+border-left+padding-left+width+padding-right+border-right+margin-right

看一段代码：

             box-html              *{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;        }           
        
你好帅呀

      
查看更多关于CSS定位问题（1）：盒模型、浮动、BFC_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did112011