寒冬期前端准备总结---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移动端适配
* 布局视口：代码层面页面的宽度，会出现移动端页面水平滚动条的情况
* 视觉视口：用户通过屏幕看到的页面区域
* 理想视口：类似于浏览器视图
🌰<meta name="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,  maximum-scale=1.0,minimum-scale=1.0”>

附：移动设备忽略将页面中的数字识别为电话号码的方法
    meta标签 content属性设置‘telephone=no’

• CSS预处理和后处理

* 预处理：将一份扩展语法的css编译成纯CSS，例如less
* 后处理：纯CSS编译，例如autoPrefixer自动添加前缀（PostCSS框架）

• 相邻两个inline-block中间的间隔

原因：英文单词之间的空隙（英文排版问题）

解决：
* inline-block元素标签之间的空格删除
* 父级font-size设置为0
* 子元素letter-spacing设置为0

- 设置宽高比16:9的区域方案
.parent {
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
}
.child {
    width: 100%;
    height: 100%;
}

• div的属性 contenteditable设置为true, 模拟textarea

• BFC

 块级格式化上下文（Block Formatting Context）盒模型布局中的一种渲染方式，独立的渲染区域，解决盒子“塌陷”的问题，内部样式不会影响到外部元素

触发BFC的方式（任一条件）：
* body根元素
* 浮动元素：float除none以外的值
* 绝对定位元素：position（absolute、fixed）
* 行内块元素：display（inline-block）
* 表格单元格元素：display（table-cell、table、table-row等）
* 弹性布局和网格布局：display（flex、grid）
* overflow不为visiable的块级元素

BFC特性
* 内部box会在垂直方向上放置，内部相邻的块级盒子的垂直margin会产生折叠
* 形成BFC的区域不与外部的float盒子重叠（overflow：hidden）
* 计算高度时，内部浮动元素也参与计算

BFC应用
* 阻止margin重叠：对相邻的两个子盒子中的一个设置BFC，例如外层包裹一个overflow: hidden的div
* 清除内部浮动，父元素设置BFC，计算的高度包含float元素
* 阻止元素被浮动元素覆盖：水平两个元素float时，水平重叠的问题，将其中一个元素设置BFC

• 未知宽高的居中

// 1 子元素宽度自适应
.parent {
    position: relative
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

// 2 子元素宽度自适应
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

// 3 子元素宽度填充父元素
.parent {
    display: table;
    text-align: center;
}
.child {
    display: table-cell;
    vertical-align:middle;
}

// 4 伪元素 子元素宽度自适应
// ::after 在元素内部的最后加入的元素 vertical-align已行内元素的基线作为标准垂直对齐
.parent {
    text-align:center;
}
.parent::after {
    content: ‘’;
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
}
.child {
    display: inline-block;
    vertical-align: middle;
}

• position定位

* static 默认正常流（normal flow）
* relative 相对定位：相对自身之前的文档流 top，正常流的位置依然存在
* absolute 绝对定位：相对于除了static定位之外的第一个父元素定位，正常流的位置不存在
* fixed 固定定位：相对于视图窗口的