1. CSS选择器优先级
- ！important>内联>id选择器>类选择器>标签选择器>通用选择器（*）和继承
当内联样式里有important 则其最强
css 权重计算：
> 内联：1 0 0 0
> id选择器：0 1 0 0
> 类选择器：0 0 1 0
> 标签选择器: 0 0 0 1
> 通用选择器和继承等：0 0 0 0
> 样式层叠：先判断权重，权重大的生效；权重一样的话，比较位置，在css样式文件中靠后的生效。
2. CSS布局
2.1 定位布局(position)
- static：HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。
- fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。
- relative：相对定位，相对其本来的位置定位
- absolute：绝对定位，绝对定位的元素的位置相对于最近的已定位父元素（除了默认的static是非定位），如果元素没有已定位的父元素，那么它的位置相对于html。
- sticky：粘性定位，在滚动时表现，页面滚动超出目标区域时，它的表现就像position:fixed;，它会固定在目标位置。
2.2 流式布局
以百分比为主要形式，让屏幕自适应，这种布局方式定义灵活，能够根据屏幕的情况变化，但是这种方式设计的效果不太容易控制，一般移动端结合rem用的比较多，pc端用的不是非常多。
2.3 浮动布局(float)
float: left; 浮动脱离文档流，需要清除浮动
清除浮动的方法：
-
在后面添加一个额外的标签然后 添加 clear属性；
-
父元素加：overfloat: hidden / auto ;
-
父元素设置高度；
-
添加伪类：
.clearfix:after{ content:""; /*设置内容为空*/ height:0; /*高度为0*/ line-height:0; /*行高为0*/ display:block; /*将文本转为块级元素*/ visibility:hidden; /*将元素隐藏*/ clear:both; /*清除浮动*/ } .clearfix{ zoom:1; /*为了兼容IE*/ }
2.4 弹性布局(flex)
flex-direction：row,row-reverse,column,column-reverse;
flex-wrap: wrap,no-wrap,wrap-reverse;
flex-flow: [direction][wrap];
justify-content: flex-start,flex-end,center,space-between,space-around;
align-items: flex-start,flex-end,center,baseline,streth;
align-content: flex-start,flex-end,center,streth,space-between,space-around;
- 对于容器中的项目，我们可以使用order属性来指定项目的排列顺序
- 还可以使用flex-grow来指定当排列空间有剩余的时候，项目的放大比例。
- 还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例。
- align-self属性实现容器中项目的垂直方向排列规则。
3. 实现水平垂直居中
对于宽高固定的元素
（1）我们可以利用margin:0 auto来实现元素的水平居中。
（2）利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。
（3）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。
（4）使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。
不定宽高的元素
（1）绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate(-50%,-50%)来调整元素到页面中心。
（2）flex 布局
（3）表格布局：display：table-cell; text-align:center; vertical-align: middle;
4.移动端面适配
媒体查询设置viewport
<meta name='viewport'content='width=device-width,initial-scale=1,user-scale=no' />
- rem: root em 相对根元素HTML的font-size来计算
- em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
- vh/vw: 1vh 为视口高度的 1%
5.盒子模型
盒模型都是由四个部分组成的，分别是margin、border、padding和content。标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同。
- 标准盒模型：宽高 是由 content 组成
IE盒模型： 宽高由 content + padding + border 组成
可通过 box-sizing: border-box 转变为IE盒模型。
6.CSS动画
CSS3动画属性animation和CSS3的transition属性一样是一个复合属性，它包含了8个属性： animation-name，主要用来指定一个关键帧动画的名字，这个动画名必须对应一个@keyframes规则。CSS加载时会应用animation-name指定的动画， 从而执行动画。
animation-duration，主要用来设置动画播放所需时间，一般以秒为单位。
animation-timing- function主要用来设置动画的播放方式，与transition-timing-function类似。
animation-delay、主要用来指定动画开始时间，一般以秒为单位。
animation-iteration- count、主要用来指定动画播放的循环次数。
animation-direction、主要用来指定动画的播放方向。
animation-play- state，主要用来控制动画的播放状态。
animation-fill- mode，主要用来设置动画的时间外属性。
7.display:none和visibility:hidden的区别
两个都是使元素内容不显示
重绘和回流
重绘：相当于只改变样式，不改变dom节点
回流：dom节点发生改变，整个页面布局发生改变（尽量减少回流，优化浏览器性能）
display:none 隐藏元素，改变了html结构，该元素不再占用页面位置，会引起重绘和回流。
visibility:hidden 隐藏内容，不改变html结构，元素还会占用位置，只会引起重绘。
1.使用 transform 替代 top
2.使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局)
3.避免使用table布局，可能很小的一个小改动会造成整个 table 的重新布局。
4.尽可能在DOM树的最末端改变class，回流是不可避免的，但可以减少其影响。尽可能在DOM树的最末端改变class，可以限制了回流的范围，使其影响尽可能少的节点。
5.避免设置多层内联样式，CSS 选择符从右往左匹配查找，避免节点层级过多。
8.BFC
BFC格式化上下文，相当于一个独立容器，它是一个独立的渲染区域，让处于 BFC 内部的元素和外部的元素相互隔离，使内外元素的定位不会相互影响。
创建BFC {
添加float
overflow:hidden,scroll,auto;
display: inline-block，flex，table-cell等;
position: absolute,flexd;
9.三栏布局
浮动布局
<div class="box">
<div class="left">1</div>
<div class="right">3</div>
<div class="content">2</div>
</div>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.box > div {
min-height: 100px;
}
.left {
float: left;
width: 100px;
background: red;
}
.content {
background: yellow;
}
.right {
float: right;
width: 100px;
background: blue;
}
</style>
定位布局
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
}
.left {
position: absolute;
min-width: 100px;
min-height: 100px;
left: 0;
background-color: red;
}
.content {
min-height: 100px;
position: absolute;
left: 100px;
right: 100px;
background-color: blue;
}
.right {
min-width: 100px;
min-height: 100px;
position: absolute;
right: 0;
background-color: yellow;
}
</style>
<body>
<div class="box">
<div class="left">1</div>
<div class="content">2</div>
<div class="right">3</div>
</div>
</body>
弹性布局
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
}
.left {
width: 100px;
min-height: 100px;
background-color: red;
}
.content {
min-height: 100px;
flex: 1;
background-color: blue;
}
.right {
width: 100px;
min-height: 100px;
background-color: yellow;
}
</style>
<body>
<div class="box">
<div class="left">1</div>
<div class="content">2</div>
<div class="right">3</div>
</div>
</body>
圣杯布局
<style>
body,html{
height:100%;
padding: 0;
margin: 0;
text-align: center;
}
body {
padding-left: 100px;
padding-right: 200px;
}
.left {
background: red;
width: 100px;
float: left;
margin-left: -100%;
position: relative;
left: -100px;
}
.main {
background: blue;
float: left;
width: 100%;
}
.right {
background: yellow;
width: 200px;
float: left;
margin-left: -200px;
position: relative;
right: -200px;
}
</style>
<body>
<div class="main">Main</div>
<div class="left">Left</div>
<div class="right">Right</div>
</body>
双飞翼布局
<style>
body,
html {
height: 100%;
padding: 0;
margin: 0;
}
.left {
background: red;
width: 100px;
float: left;
margin-left: -100%;
}
.main-content {
float: left;
width: 100%;
}
.main {
background: blue;
margin-left: 100px;
margin-right: 200px;
}
.right {
background: yellow;
width: 200px;
float: left;
margin-left: -200px;
}
</style>
<body>
<div class="main-content">
<div class="main">Main</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>
</body>
10.PNG,GIF,JPG, WEBP的区别及如何选?
- gif：色彩不丰富，文件小，透明，兼容性好，支持动画，适合做动图
- jpg：色彩丰富，有损压缩，多次保存图图片质量下降，适合色彩丰富的图片
- png：无损压缩，支持透明，色彩丰富的图片文件大，适合icon或logo图
- webp：色彩丰富，透明，支持有损和无损压缩，支持动画，兼容性不好
