盒模型是初学 CSS 必须要掌握的一个点,涉及到页面的整体布局。常说的 CSS 盒模型分为 W3C 标准盒模型和 IE 盒模型。下面上一张图直观的看二者区别:
很明显 IE 盒模型的 width 和 height 包含了 padding 和 border,而标准盒模型没有包含。
那么二者怎么转化呢?
: 指的是 W3C 标准盒模型,也是默认的设置属性。
- box-sizing: content-box
:指的是 IE 盒模型,width 和 height 包含了 padding 和 border。
- box-sizing: border-box
方法得到 8 个值,除了 width 和 height 外的属性 x、y、left、top、right 和 bottom 都是相对于视口 (viewport) 的左上角位置而言的。如下:
- getBoundingClientRect()
- <style media="screen">
- #box {
- width: 100px;
- height: 100px;
- background: red;
- }
- </style>
- <div id="box"></div>
- <script>
- var box = document.getElementById('box');
- console.log(box.getBoundingClientRect());
- // x: 8, y: 8, width: 100, height: 100, top: 8, left 8, bottom: 108, right: 108
- </script>
BFC(Block Formatting Context):块级格式化上下文。是一种边距重叠解决方案。
- <style>
- #margin { background: #1890FF; overflow: hidden; } #margin p { margin:
- 15px auto 25px; background: yellowgreen; }
- </style>
- <section id="margin">
- <p>
- 1
- </p>
- <p>
- 2
- </p>
- <p>
- 3
- </p>
- <p>
- 4
- </p>
- </section>
1,2,3,4 的上边距应该都是 15px,下边距都是 25px,很明显,1 和 2,2 和 3,3 和 4 之间的边距发生了重叠,重叠的原则就是取较大值,即 1 和 2 之间的距离是 25px。
给某个子元素添加一个父元素,然后给这个父元素添加一个 BFC,可以解决该子元素的边距重叠问题,如下,给 2 添加一个父级 div,然后给定样式 overflow: hidden。
- <style>
- #margin { background: #1890FF; overflow: hidden; } #margin p { margin:
- 15px auto 25px; background: yellowgreen; }
- </style>
- <section id="margin">
- <p>
- 1
- </p>
- <div style="overflow: hidden">
- <p>
- 2
- </p>
- </div>
- <p>
- 3
- </p>
- <p>
- 4
- </p>
- </section>
1 和 2,2 和 3 之间就没有边距重叠现象了,边距都变成 15+25=40px 了,而不是之前取较大值的 25px。
- <style>
- #layout {
- background: blue;
- }
- .left {
- float: left;
- width: 100px;
- height: 100px;
- background: pink;
- }
- .right {
- height: 150px;
- background: yellowgreen;
- }
- </style>
- <section id="layout">
- <div class="left">1</div>
- <div class="right">2</div>
- </section>
图中可以看到 1 与 2 因为高度不同,发生了部分重叠,背景蓝色完全被遮挡。
可以给右侧 div 设定 overflow: hidden; 来创建一个 BFC 元素,消除重叠,如下:
- <style>
- #layout {
- background: blue;
- }
- .left {
- float: left;
- width: 100px;
- height: 100px;
- background: pink;
- }
- .right {
- height: 150px;
- background: yellowgreen;
- overflow: hidden;
- }
- </style>
- <section id="layout">
- <div class="left">1</div>
- <div class="right">2</div>
- </section>
1 和 2 的重叠消除了,背景蓝色显示出来。
- <style>
- #float {
- background: blue;
- }
- .float {
- float: left;
- color: yellowgreen;
- }
- </style>
- <section id="float">
- <div class="float">这是一个浮动元素</div>
- </section>
子元素为浮动元素时候,父级元素颜色未显示,高度为 0,子元素不参与父级元素高度的计算。
当把父级元素设为 BFC 时候,子元素也会参与到父级元素的高的计算中来,如下:
- <style>
- #float {
- background: blue;
- overflow: hidden;
- }
- .float {
- float: left;
- font-size: 35px;
- color:yellowgreen;
- }
- </style>
- <section id="float">
- <div class="float">这是一个浮动元素</div>
- </section>
给父级元素添加 overflow: hidden; 或 float: left 创建一个 BFC 之后,父级元素背景颜色出现,且子元素的高度参与了父级元素高度的计算。
来源: http://www.jianshu.com/p/8b8198095487