css基础
相关原理
CSS加载过程：层叠、优先级和继承 出现冲突时通过判断权重来进行叠加和覆盖
CSS与HTML的结合：选择器 浏览器将载入的html变为dom树，但是此时没有任何显示样式。所以显示的样式，都是css定义的，浏览器只会通过css来渲染视图样式。
页面呈现：文字 + 块
盒模型：
元素的宽度自适应父元素的宽度 在标准盒子模型中，我们设置的宽度都是内容宽度，不是整个盒子的宽度。 设置整个盒子的宽度：box-sizing:border-box。此后宽度是内容 + border + 边框的宽度（不包括margin）
纵向margin的重叠 纵向的margin是会重叠的，大的会把小的“吃掉”
结构与布局
定位：
一个元素相对其他元素（父元素/浏览器窗口等）的位置
尺寸： 单位 百分比：百分比的参照物是父元素，50%相当于父元素width的50% rem：这个对于复杂的设计图相当有用，它是html的font-size的大小 em：它虽然也是一个相对的单位，相对于父元素的font-size，但是，并不常用，主要是计算太麻烦了。
display: inline、block、inline-block、inherit、none、flex 每个元素都有默认的 display 属性 1.inline 设置宽高都是无效的，其实际的宽高都是auto。margin / padding 值只对左右起作用. 转化为块级元素：①对inline元素设置position:absolute/fixed ②对inline元素设置float 2.block 没有设置宽度时，它的宽度是其容器的 100%； 3.inline-block 既具有块级元素可以设置宽高的特性，又具有行内元素不换行的特性。 空隙问题： 我们没有设置 margin 值，但是 div 之间会有空隙，这是因为浏览器会将 html 中的换行符、制表符、空白符合并成空白符。 去除空隙的方法： 1.对父元素添加，{font-size:0}，即将字体大小设为0，那么那个空白符也变成0px，从而消除空隙
定位position: static（默认值）/relative/absolute/fixed
浮动float： 1.浮动的元素会在浮动层上进行排布，而原先文档流中的元素位置会被删除，但仍会影响布局： 设置浮动后的元素会形成BFC（内部元素不被外部干扰），元素的宽度也不再自适应父元素宽度，而是适应自身内容 2.浮动未清除会造成高度塌陷 清除浮动： overflow: 将父元素的overflow，设置成hidden。 after伪类：对子元素的after伪类进行设置。 3.总结特性 破坏性：脱离文档流。一般而言，父级元素不设置高度时，高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0。 包裹性：div设置了float之后，其宽度会自动调整为包裹住内容宽度，而不是撑满整个父容器。 清空格：float排版出来的网页严丝合缝，没有换行和空格
弹性flex： 1.container, item, main axis, cross axis main/cross start/end
- container flex-flow: flex-direction + flex-wrap justify-content: 子项目的水平对齐方式 align-items: 子项目的垂直方向上的对齐方式
- items order flex-grow: 元素的所占空间的比例，如1：1：1是均分
布局： 1.两栏布局 左侧定宽 float，右侧自适应 2.三栏布局 两边定宽，然后中间的width是auto的，可以自适应内容，再加上margin边距，来进行设定。 （1）使用左右两栏使用float属性，中间栏使用margin属性进行撑开，注意的是html的结果 （2）使用position定位实现，即左右两栏使用position进行定位，中间栏使用margin进行定位 （3）圣杯布局 / 双飞翼布局
将middle的宽度设置为100%，然后将其float设置为left，其中的main块设置margin属性，然后左边栏设置float为left，之后设置margin为-100%，右栏也设置为float：left，之后margin-left为自身大小 （4） flex弹性布局
选择器
分类： 标签选择器（*是特殊情况），可但标签，也可上下文多标签； 属性选择器（id和class都是属性，特殊的属性）； 其中属性选择器有两种情况： 只通过属性名选择：img[title]{… } 通过属性名和属性值选择：input[type=’text’]{…}
伪类和伪元素
可针对任何一种选择器使用：为了格式化文档树以外的信息 1.伪类有两种 UI伪类：a:link{} / a:hover{} / a:active{} / a:visited{} 结构化伪类：table tr:nth-child(even){} / table tr:first-child{} / table tr:last-child{} 2.伪元素：:before和:after 非常常用，如fontAwesome字体库 / 清除浮动样式 ::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空
组合选择器 A B：B是A的后代节点 A > B：B是A的直接节点 A~B：B是A之后的兄弟节点中的任意一个 A + B： B是A的下一个兄弟节点
符号
连写：就是需要同时具备才会出现效果 逗号分隔：就是只需要具备其中之一即可出现效果，二者是并列关系 空格分隔：就是二者是父子关系，是当前的元素子元素才会出现效果
细枝末节
overflow：hidden 包裹性：宽度视内容而定 clearfix calc动态计算
absolute定位和float
absolute 属性值是不能与 float 共同使用的，当共同使用时，float 将会失效
absolute 属性值与 float 属性名，具有相同的特性：
- 包裹性：所谓的包裹性就是指元素的宽度会收缩到与内容一致。
- 破坏性：所谓的破坏性指的就是父元素的高度塌陷
注意，absolute定位的元素会被"正常页面流"忽略，即在"正常页面流"中，该元素所占空间为零，周边元素不受影响。
line-height 用于设置行间的距离（行高）。可以控制文字行与行之间的距离。 用于设置多行元素的空间量，如多行文本的间距。 line-boxes是根据文案、图片等这些资源生成的一个高度框，默认高度为字体高度的110%
inline-block布局 vs 浮动布局 a.不同之处：对元素设置display：inline-block ，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果 b.相同之处：能在某程度上达到一样的效果 display：inline-block的布局方式和浮动的布局方式，究竟使用哪个，我觉得应该根据实际情况来决定的： a.对于横向排列东西来说，我更倾向与使用inline-block来布局，因为这样清晰，也不用再像浮动那样清除浮动，害怕布局混乱等等。 b.对于浮动布局就用于需要文字环绕的时候，毕竟这才是浮动真正的用武之地，水平排列的是就交给inline-block了。
box-sizing box-sizing : content-box 标准盒子模型，设置元素的 height/width 属性指的是 content 部分的高/宽 box-sizing : border-box 怪异盒子模型，设置元素的 height/width 属性指的是 content + border + padding 部分的高/宽
css垂直居中 块级元素下使用text-align: center，使得其文本内容居中对齐。 vertical-align / text-align只对行内（包括inline-block）元素生效
less
:global{} 因为css module会将样式本身定义的名字改变，所以要设置全局变量，让CSS module不做转换。
&是sass的语法，表示嵌套的上一级