引子：
在谈到css定位问题的时候先来看一个小问题:
已知宽度(假如:100px)div框,水平居中,左右两边分别使用div框填充.且左右div自适应.
效果如下图: 
这个问题的难点主要是浏览器宽度未知,且两边div自适应宽度.
第一种实现方法,是借助css3的新属性calc,实现代码如下:
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的单元格的属性.
代码如下:
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%使左右的单元格平分剩下的宽度.
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
看一段代码：
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> 自适应.
效果如下图:
这个问题的难点主要是浏览器宽度未知,且两边div自适应宽度.
第一种实现方法,是借助css3的新属性calc,实现代码如下:
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的单元格的属性.
代码如下:
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%使左右的单元格平分剩下的宽度.
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
看一段代码：
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> 56850733670-23"></head> <body> <div id="body-box"> <div class="box-style">你好帅呀</div> </div> </body> </html> |
效果如下： 
|
