寒冬期前端准备总结---CSS篇

⚠️⚠️传送门⚠️⚠️

寒冬期前端准备总结---JS篇
寒冬期前端准备总结---浏览器篇
寒冬期前端准备总结---服务器和网络篇
[寒冬期前端准备总结---CSS篇]
寒冬期前端准备总结---框架篇
寒冬期前端准备总结---算法篇

• css优先级

!important > 内联 > id > class > 属性 > 标签 > 伪类 > 通配符（*）> 浏览器默认
行内、（内联、链接会被后面的覆盖）

max-width可以覆盖掉width：!important

• 盒模型

content  padding  border  margin
box-sizing:border-box/content-box
background-color: 包含content  padding
* 注意background的颜色

• flex布局

副作用：子元素的float、clear、vertical-align失效

容器属性
* flex-direction：主轴方向（row/column/row-reverse/column-reverse）
* flex-wrap：一条轴线排不下，如何换行（默认nowrap/wrap/wrap-reverse）
* flex-flow：flex-direction和flex-wrap的简写（默认row nowrap）
* justify-content：项目在主轴上的对齐方式（flex-start/flex-end/center/space-between/space-around）
* align-items：项目在交叉轴上的对齐方式（flex-start/flex-end/center/baseline/stretch）
* align-content：定义有多根轴线时，各轴线的对齐方式（flex-start/flex-end/center/space-between/space-around/stretch）

项目属性
* order：项目的排列顺序，数字越小越靠前
* flex-grow：项目的放大比例，数值，默认为0不放大，有数字时根据比例放大填满轴线剩余空间
* flex-shrink：项目的缩小比例，数值，默认为1空间不足时等比例缩小
* flex-basis：项目在分配多余空间之前，项目在主轴上占据的空间，默认为auto即项目本身的大小，填入数值时同width作用
* align-self：允许单个项目自定义对齐方式，默认为auto继承父align-items，会覆盖align-items

• 单位

* px：pixel像素，相对于显示器屏幕分辨率而言
* em：相对长度单位，参考为父元素的font-size
* rem：root em。CSS3新增相对单位，相对于html根元素的font-size来计算
* vw/vh：相对于视口（viewport）计算，单位长度为视口长宽的1/100，例如浏览器的宽度为200px，则1vw为2px

• 层叠上下文z-index

* z-index的属性值仅在定位元素（除static值的position）上有效果

* 判断元素在z轴上的堆叠顺序不仅仅是直接比较两个元素的z-index大小，由元素的层叠上下文、和层叠等级共同决定
* 先判断是否在一个层叠上下文中，不同上下文：判断所处的层叠上下文的层叠等级，相同上下文：根据层叠顺序判断
* 层叠顺序（background/border -> z-index<0 -> block块级盒子 -> float浮动盒子 -> inline/inline-block盒子 -> z-index:auto/0 -> z-index>0）

• 响应式布局

同一个页面在不同屏幕尺寸下有不同的布局。自适应布局需要开发多套页面用于不同客户端

实现方案
* 使用媒体查询：@media screen and (min-width: 375px)
* 百分比布局：css百分比
* rem布局：css3的新单位，响应式需要通过js来动态控制根元素的font-size大小
* 视口单位vw、vh
* 图片响应式：大小自适应、根据屏幕大小选择合适的分辨率

meta标签的viewport移动端适配
* 布局视口：代码层面页面的宽度，会出现移动端页面水平滚动条的情况
* 视觉视口：用户通过屏幕看到的页面区域
* 理想视口：类似于浏览器视图