1.选择器优先级

!important > 内联样式 > #id > .class类/:伪类> tag（标签）/::伪元素 > *(通配符) > 继承 > 默认

伪类和伪元素

伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树以外的元素。伪类使用的是单冒号，但是在css3中规定伪元素使用的双冒号，但是除了少部分的伪元素必须使用双冒号以外，像after还有before都是支持单引号的。为了兼容性所以目前还是在使用一些常见的伪元素的时候采用单冒号较为稳妥。

2.重绘和重排

重排：DOM的变化影响了元素的⼏何信息(元素在视⼝内的位置和尺⼨⼤⼩)，浏览器需要重新计算元素在视⼝内的⼏何属性，这个过程叫做重排。修改元素尺寸、增加可见的元素、操作offset相关属性等都会引起重排。
重绘：通过构造渲染树和重排（回流）阶段，我们知道了哪些节点是可⻅的，以及可⻅节点的样式和具体的⼏何信息，接下来就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘。
重排的成本要比重绘高很多。

浏览器渲染过程

解析HTML，⽣成DOM树，解析CSS，⽣成CSSOM树
遍历可⻅节点，将DOM树和CSSOM树结合，⽣成渲染树(Render Tree)
Layout(重排):根据⽣成的渲染树，进⾏重排(Layout)，得到节点的⼏何信息（位置，⼤⼩）
Painting(重绘):根据渲染树以及回流得到的⼏何信息，得到节点的绝对像素
Display:将像素发送给GPU，展示在⻚⾯上。

如何减少重排和重绘？

分离读写操作：在使用offset相关属性进行读之前，完成所有改变DOM的写操作。
将position设置为 absolute 或 fixed 使元素脱离⽂档流，这在制作复杂的动画时对性能的影响⽐较明显。
启用gpu加速：transform: translate3d(10px, 10px, 0)。transform 使浏览器为元素创建⼀个 GPU 图层，这使得动画元素在⼀个独⽴的层中进⾏渲染。
集中改变样式：将样式统一写在一个类名上。 (display:none和visibility:hidden，display不为被隐藏的对象保留其物理空间，visibility表示所占据的空间位置仍然存在，仅为视觉上的完全透明。其他隐藏元素的方式：opacity:0,overflow:hidden，position:absolute+top和left-9999px)

3.BFC

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。属于同一个BFC的两个相邻Box的margin会发生折叠，不同BFC不会发生折叠。BFC的区域不会与float的元素区域重叠。

BFC触发条件

根元素，即 <html>
浮动元素：float 值为 left 、right
overflow 值不为 visible，即为 auto、scroll、hidden
display 值为 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
绝对定位元素：position 值为 absolute、fixed

BFC特点

BFC 是页面上的一个独立容器，容器里面的子元素不会影响外面的元素。
BFC 内部的块级盒会在垂直方向上一个接一个排列
同一 BFC 下的相邻块级元素可能发生外边距折叠，创建新的 BFC 可以避免外边距折叠
每个元素的外边距盒（margin box）的左边与包含块边框盒（border box）的左边相接触（从右向左的格式的话，则相反），即使存在浮动
浮动盒的区域不会和 BFC 重叠
计算 BFC 的高度时，浮动元素也会参与计算

BFC应用场景

兄弟盒子外边距塌陷->给他们加BFC的父盒子，形成两个BFC。子盒子浮动，父盒子没有高度->父盒子触发BFC->父盒子有高度

4.继承属性

字体系列属性(font-size：设置字体的尺寸，font-family：规定元素的字体系列，font-weight：设置字体的粗细...)
文本系列属性(color：文本颜色,text-indent：文本缩进,text-align：文本水平对齐，line-height：行高...)
元素可见性：visibility
表格布局属性、列表属性、声音样式属性

5.CSS布局方式

flex、grid、float、position
box-sizing:border-box：为width/height、padding、border属性相加。
box-sizing:content-box：为width/height属性。

水平垂直居中的实现

1.flex

.father { display: flex; justify-content: center; align-items: center;}

2.gird

.father{display: grid;justify-items: center;align-items: center;}

3.float

父盒子触发BFC，可以不设定高度，被浮动的子盒子撑开

.father{overflow: auto;}
.son {float: left;margin-left: 50%;margin-top: 50%;transform: translate(-50%,-50%);}

4.position

.father { position: relative; }
.son { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

二栏布局(左侧固定，右侧自适应)

1.flex

.father设置display:flex
.left设置宽width:xxxpx
.right设置flex:1

2.gird

.father设置display:grid;grid-template-columns:1fr 1fr

3.float

或者.right设置overflow:hidden触发BFC

.left设置宽float:left;width:xxxpx
.right设置margin-left:xxxpx

4.position

.father设置position:relative
.left设置position:absolute;width:xxxpx;hight:100%
.right设置margin-left:xxxpx;hight:100%

三栏布局

1.flex

.father设置display:flex
.left和.right设置宽width:xxxpx
middle设置flex:1

2.gird

.father设置display:gird;gird-template-columns:1fr 1fr 1fr

3.float

指定宽

.left设置float:left
.right设置float:right
middle设置float:left

圣杯布局

两边固定，中间自适应，且中间栏放在文档流的前面，率先渲染

基本的dom结构（注意center需要排在第一个位置）

<div class="header">header</div>
    <div class="container">
        <div class="center column">center</div>
        <div class="left column" >left</div>
        <div class="right column" >right</div>
    </div>
<div class="footer">footer</div>

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
        * {
                margin: 0;
                padding: 0;
        }
        .container {
            border: 1px solid black;
            /* 防止容器盒子高度塌陷和给之后的左、右浮动元素预留位置 */
            overflow: hidden;
            padding: 0px 100px;
            min-width: 100px;
        }
 
        .left {
            background-color: greenyellow;
            /* 保证之后的"margin-left"属性可以将自身拉到上一行 */
            float: left;
            /* 固定宽度 */
            width: 100px;
            /* 将元素向左移动100%相对于父容器的宽度 */
            margin-left: -100%;
            /* 相对定位，需要将自身再向左移动自身的宽度，进入容器的"padding-left"区域 */
            position: relative;
            /* 自身的宽度，刚好进入容器的"padding-left"区域 */
            left: -100px;
        }
 
        .center {
            background-color: darkorange;
            float: left;
            width: 100%;
        }
 
        .right {
            background-color: darkgreen;
            float: left;
            width: 100px;
            /* 自身的宽度，在其他盒子看来这个right盒子是不占宽度的 */
            margin-right: -100px;
        }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="center"><br /><br /><br /></article>
            <article class="left"><br /><br /><br /></article>
            <article class="right"><br /><br /><br /></article>
        </section>
    </body>
</html>

flex布局属性

父盒子

flex-direction主轴row/column(-reverse)
justify-content主轴排列方式flex-start/end,center,space-around平分剩余空间,space-between先贴边再平分,space-evenly项目与项目&项目与边框之间间隔相等
flex-wrap默认nowrap,wrap
align-content多行时侧轴分布方式flex-start/end,center,stretch,space-around,space-between
align-items单行时侧轴分布方式flex-start/end,center,stretch
flex-flow简写方式，flex-direction和flex-wrap复合属性

子盒子：order（）越小越靠前）,align-self（指定盒子在侧轴上的排列方式）,flex.

flex:1的含义

代表子元素占剩余空间的几份。内涵是flex-grow:1和flex-shrink:1和flex-basis:0%的缩写。

flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小

position布局特性

默认值：static静态定位

相对定位：relative。元素的定位永远是相对于元素自身位置的，和其他元素没关系，也不会影响其他元素。不脱离文档流。一般父元素使用。
绝对定位：absolute。它会找到一个离它最近的设置了position:relative/absolute/fixed的元素定位，如果没找到，就以浏览器边界定位。脱离文档流定位。一般子元素使用。
固定定位：fixed。固定在可视窗口一个位置，不随滚动条滚动。脱离文档流定位。正常来说是相对于浏览器窗口定位的，但是当元素祖先的 transform 属性非 none 时，会相对于该祖先进行定位。
粘性定位：sticky。在跨越特定阈值前为相对定位relative，之后为固定定位fixed。一般导航栏使用。

清除浮动float

在父盒子中尾部写一个空div,样式clear:both
给父盒子加after伪元素

.parent:after{ content:''; height:0; clear:both; display:block;

父元素加样式overflow:hidden/auto----触发BFC

z-index什么情况下失效

1、父标签 position属性为relative；
2、问题标签无position属性（不包括static）；
3、问题标签含有浮动(float)属性。

z-index数值越大越靠上

gird布局

父元素：

dispaly:gird声明一个容器
gird-template-columns:repeat(3,500px)/使用fr宽度为500px，设置三列
gird(-row/column)-gap:xxpx间隙

6.块级元素，行内元素，行内块元素

行内元素inline:不能设置宽高，多个元素共享一行，占满的时候自动换行

span input textarea label select p button

块级元素block:可以设置宽高，一个元素沾满一行

h1/h2/h3/h4/h5 div ul li table

行内块元素inline-block:可以设置宽高，多个元素共享一行，占满自动换行

img。

7.适配问题

px rem em vh vw

px是相对于显示器屏幕分辨率而言的。em是说是父元素字体大小的几倍。rem(css3提出)是相对于html元素字体大小。vh和vm是相对于可视窗口而言，满高是100vh。百分比是相对于父盒子而言。

padding和margin百分比是针对父盒子宽度而言

1px问题

设备像素比dpr，即设备逻辑像素(CSS中)与物理像素的比值。

.scale-1px{ 
    position: relative;
    } 
.scale-1px:after{ 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 0;
    right: 0;
    border-top:1px solid #666
    /*核心是利用transform缩放边框*/ 
    transform: scaleY(0.5); 
    }

10.HTML5新增语义化标签

header,nav,article,section,aside,footer 好处：

让⼈更容易读懂（增加代码可读性）。
让搜索引擎更容易读懂，有助于爬⾍抓取更多的有效信息，爬⾍依赖于标签来确定上下⽂和各个关键字的权重（SEO）。
在没有 CSS 样式下，⻚⾯也能呈现出很好地内容结构、代码结构。

11.defer和async的区别

script:会阻碍HTML解析，只有下载好并执行完脚本才会继续解析HTML
async:解析HTML过程中进行脚本的异步下载，下载成功立马执行，有可能阻断HTML的解析。脚本文件会在下载好后立马执行，下载完后如果HTML还没有解析完成，则会暂停HTML的解析，等到脚本执行完才会恢复对HTML的解析。
defer:完全不会阻碍HTML解析，解析完成后再按照顺序执行脚本。具有defer属性的脚本会在脚本下载完并且HTML也解析完之后才执行
执行顺序：多个async属性的script标签，不可以保证最后的执行顺序一定按照HTML文档中的顺序来；多个defer的script标签，一定会按照文档中的顺序执行

sass/less等预处理器的使用原因

结构清晰，便于扩展，而且他们也能很好的兼容CSS代码，可以应用到老项目中。可以无需考虑游览器兼容性问题，让CSS更加简洁，增强其可读性与可维护性。

transition和animation

transition是过渡属性，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它设置一个开始关键帧，一个结束关键帧。
animation是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。

transition

transition:可以做动画的属性（可以设置为transform）时间曲线 delay时间

transform

transform:translate(x,y)->x,y是移动的位置
transform:translateX(n)->分开的写法，百分比是以自己为单位
transform:rotate(度数)
transform:scale(x,y)放大或缩小的倍数，也可以只写一个

12.溢出省略

overflow: hidden;
text-overflow:ellipsis;  //ellipsis;省略
white-space: nowrap;  //nowrap 不换行