标签：

盒子模型&双飞翼实现

CSS盒模型素质上是一个盒子，封装周围的HTML元素，它包孕：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。

盒模型允许我们在其它元素和周围元素边框之间的空间安排元素。

盒模型有两种情况:W3C盒子模型和IE盒子模型

标准盒模型：css属性里的width和height规定的就是内容的宽高

怪异盒模型：css属性里的width和height规定的宽高是包罗表里边距和边框的

两种模型可以用box-sizing属性指定

即box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C（标准盒模型），border-box为IE盒子模型（怪异盒模型）。

解决两种模式下样式的兼容性问题

建议不要给元素添加指定宽度的内边距，而是测验考试将内边距或外边距添加到元素的父元素和子元素

css中width：100% 和widhth:auto 的区别

简单结论：auto表示为content+padding+border+margin值即是parent的宽度,不会溢出父亲，若设置为宽度是100%则当有内边距和外边距的时候，子元素的会溢出父亲

子元素的width为auto,且有表里边距:

子元素的width为100%,且有表里边距 :

双飞翼构造理解

(参考博文:https://www.jianshu.com/p/549aaa5fabaa)

双飞翼构造:两侧宽度固定，中间宽度自适应的三栏构造。

长处：

两侧宽度固定，中间宽度自适应

中间部分在DOM布局上优先，以便先行衬着

允许三列中的任意一列成为最高列

只需要使用一个特别的div标签

道理:主要是操作了margin为负数时的一些效果

实现思路:使用一个div包裹三块内容，，使三块内容浮动(原因:使三个Div在文档流中在同一行),center块使用padding属性摆布流出空间给left,right。left，right块元素分袂相对定位和magin为负数的影响移动至预留的位置里。

margin为负数孕育产生的影响:

1.对自身的影响:

margin-top为负值不会增加高度，只会孕育产生向上位移

margin-bottom为负值不会孕育产生位移，会减少自身的供css读取的高度。

2.对文档流的影响

元素如果用了margin-left:-20px;毋庸置疑的自身会向左偏移20px和定位（position：relative）有点不一样的是，在其后面的元素会补位，也就是后面的行内元素会紧贴在此元素的之后。。

CSS盒子模型与双飞翼构造

标签：

原文地点：https://www.cnblogs.com/D13blog/p/12185259.html