盒子模型&双飞翼实现
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)有点不一样的是,在其后面的元素会补位,也就是后面的行内元素会紧贴在此元素的之后。。