CSS学习笔记（三）

盒子模型

• 外边距合并：如果两个盒子的外边距重叠，则只取最大那边的外边距值

• box-sizing:border-box; 传统意义上“width or height + padding + border = actual width or height”. 如果设置了box-sizing:border-box;属性，则”width or height = padding + border + content width or height”

• border-radius:50%绘制圆边框

• outline:solid 2px #ddd 轮廓线不会占用空间

• width:fit-content width:max-content width:min-content 根据根据内容来决定大小

定位布局

相对定位 relative

• 相对与元素在文档流中原来位置的定位
• 并且不会脱离文档流，以此原来的位置还在。并使该元素提升一个层级，会覆盖下面元素
• 不会改变元素块级或行内属性

绝对定位 absolute

• 会使元素脱离文档流，改变元素性质内变块
• 默认情况下，元素的绝对定位是参照浏览器窗口位置来定位
• 如果父级元素开启定位属性，该元素就会相对与该父级元素进行定位,如果没有会一直往上找
• 同样也会使元素提升一个层级，即具有覆盖属性

固定定位 fixed

• 永远相对于浏览器窗口进行定位

粘性定位 sticky

• Sticky positioning is a hybrid of relative and fixed positioning.
• An element with position: sticky; is positioned based on the user’s scroll position.
• 粘性定位是参照父级元素来定位
• 通常stick在父级元素的顶部 positon:sticky;top;0;