CSS盒子模型,定位

CSS盒子模型

css中盒子模型来讲,都是由margin, border , padding, content四部分内容组成，但是对于width的作用对象不同，分成两种盒子：W3C盒子模型和IE盒子模型。W3C盒子模型属于content-box，也就是width直接作用在content这一层，影响content这一层的宽度。但是IE盒子模型不同，其属于border-box，也就是width作用在由border, padding, content这三者的组合上，限制这三者组成的宽度。

CSS盒子模型 谷歌浏览器

顺带聊一下box-sizing这个属性，共有三种属性值

• border-box 代表的是边框盒子，就是CSS设置的width作用在边框border, 内边距padding和内容content三者上。
• content-box 代表的是内容盒子, 就是CSS设置的width作用在内容content上，大部分浏览器实现都是内容盒子。
• inherit 继承

CSS的定位

CSS的定位由属性position决定, 其有六种值。

1. absolute
2. relative
3. fixed
4. sticky
5. static
6. inherit

absolute:
绝对定位
定位方式: 相对于最近的父级定位元素进行定位（定位元素：position属性值不是static的元素）,元素位置通过top, left, bottom, right进行设定

relative
相对定位
定位方式: 相对于原来正常文档流的位置进行偏移定位。偏移量通过top，left，right，bottom进行设定。

fixed
固定定位
定位方式: 相对于浏览器窗口进行定位，元素位置通过top，left，bottom，right进行设定。

sticky
粘贴定位(我自己这么叫的)
比较新的一种属性，有坑。
定位方式： 固定在原来正常流的位置，不随滚动而滚动。
应用场景来说，用在头部固定的搜索栏等会比较有好处。sticky适配所有移动设备上的浏览器。

坑(出处:(position: sticky 防坑指南)：

1. sticky不会触发BFC，
2. z-index无效，
3. 当父元素的height：100%时，页面滑动到一定高度之后sticky属性会失效。
4. 父元素不能有overflow:hidden或者overflow:auto属性。
5. 父元素高度不能低于sticky高度，必须指定top、bottom、left、right4个值之一

static
正常流定位
定位方式: 按照正常的流定位进行定位。

inherit
继承自父元素