CSS盒子模型与双飞翼布局

盒子模型&双飞翼实现

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin)、边框(border)、内边距(padding)、实际内容(content)四个属性。

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

CSS盒子模型与双飞翼布局

盒模型有两种情况: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,且有内外边距:

CSS盒子模型与双飞翼布局

子元素的width为100%,且有内外边距 :

CSS盒子模型与双飞翼布局

双飞翼布局理解

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

双飞翼布局:两侧宽度固定,中间宽度自适应的三栏布局。

优点:

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

中间部分在DOM结构上优先,以便先行渲染

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

只需要使用一个额外的div标签

原理:主要是利用了margin为负数时的一些效果

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

CSS盒子模型与双飞翼布局

margin为负数产生的影响:

1.对自身的影响:

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

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

2.对文档流的影响

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

上一篇:https大势已来?看腾讯专家如何在高并发压测中支持https


下一篇:用dup2和dup产生一份file descriptor 的拷贝