盒模型：盒模型有四个部分组成，从内向外的话是内容区域的宽高，内边距padding，边框，外边距margin
在W3C标准盒模型中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在怪异模式下，IE的宽度和高度还包含了padding和border
标准模式和怪异模式的区别？
①盒模型：IE下标准模式为：盒模型的宽高一般是content。怪异模式下的宽度是包含了内边距和边框的 。
②怪异模式中IE6/7/8都不识别！important声明
③设置行内元素宽高，标准模式下不生效，怪异模式下生效
④margin:0 auto,在标准模式下会水平居中，怪异模式下不会
1、所占空间上的区别：块级元素会占据一行，垂直方向排列；行内元素不会独占一整行而是在同一行水平方向排列
2、包含前台关系的区别：块级元素可以包含行内元素和块级元素，而行内元素只能包含行内元素，不能包含块级元素
3、边距属性的区别：块级元素的margin上下左右都生效，而行内元素上下设置不能生效，左右可以生效；
行内块元素相当于是以行的形式展示块级元素，和块级元素一样可以设置宽高内外边距，同时内部也可以包含块级和行内元素；
常见的行内元素：
<span>：用于对文本进行分组，并对其应用样式。
<a>：用于创建超链接。
<label>: 关联输入框并获取焦点
行内块元素：
<img>：用于插入图像。
<input>：用于创建输入控件。
<button>：用于创建按钮。
<textarea>：用于创建多行文本输入框。
常见的块级元素：
div、p、h1-h6、ul、li、table等
1、相对定位 postion:relative相对元素在原文档流中的位置定位，设置相对定位不会脱离文档流，元素位置的变化不会影响其他元素
2、绝对定位position:absolute，绝对定位参考的是它的包含块，如果这个元素没有脱离文档流那么它的包含块就是父元素；如果脱离了文档流，就会找第一个拥有定位属性的祖先元素，如果没找到就以浏览器的视口为参考，设置了绝对定位后元素会脱离文档流，会对后面的兄弟元素和父元素有影响。
3、固定定位postion:fixed，相对于浏览器视口定位，会脱离文档流；
4、粘性定位postion：sticky它基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起 10 像素）为止，此后它就变得固定了，不会脱离文档流，参考点是距离它最近的一个拥有滚动机制的祖先元素
css 选择器的优先级是如何计算的，根据选择器的权重
权重如何计算？格式：（a，b，c）
a: id 选择器的个数
b：类、伪类、属性选择器的个数
c：标签、伪元素选择器的个数
每一项逐一比较，如（0,2，1），比（0,2，0）权重更高。
当权重相同时，如何选中？ 后来者居上，后写的优先
所以css选择器的优先级排序分别是：
1、行内样式
2、id选择器
3、类、属性、伪类选择器（权重相同）
4、标签、伪元素选择器（权重相同）
一、display: none：把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。也不会响应绑定的监听事件。
二、visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。
三、opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
四、position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
五、z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。
六、rgba(0,0,0,0)：透明，会继续在文档流中占位，所以触发重绘。由于只作用于颜色或背景色，所以子元素不会继承，透明后可以触发点击事件
css3 是css2 的升级版本，在其基础上新增了很多强大的新功能
新特性只是随便列几个：
一：CSS3选择器
伪元素选择器
属性选择器
伪类选择器
二：CSS3边框与圆角
CSS3圆角 border-radius
盒阴影 box-shadow
边框图像 border-image
三：CSS3背景与渐变
CSS3背景
background-image：设置一个元素的背景图像。
background-origin：规定 background-position 属性相对于什么位置来定位。
background-clip：规定背景的绘制区域。
CSS3渐变
定义：可以在两个或者多个指定颜色之间显示平移的过渡
linear-gradient()：线性渐变。
radial-gradient()：径向渐变。
四：CSS3过渡
定义：允许css的属性值在一定时间区间内平滑的过渡，在鼠标点击，鼠标滑过或对元素任何改变中触发，并圆滑地以动画形式改变css的属性值。
transition：设置元素当过渡效果，四个简写属性为：
transition-property：过渡属性名。
transition-duration：规定完成过渡效果需要花费的时间（以秒或毫秒计）。
transition-timing-function：指定切换效果的速度。
五：CSS3变换
定义：让一个元素在一个坐标系统中变形，这个属性包含一系列的变形函数，可以移动，旋转，缩放元素。
transform：应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
六：动画
定义：使元素从一种样式逐渐变化到另外一种样式的效果。
animation：为元素添加动画，是一个简写属性。
animation-name：为 @keyframes 动画名称。
animation-duration：动画指定需要多少秒或毫秒完成。
animation-timing-function：设置动画将如何完成一个周期。
七：弹性盒子布局
flex布局是css3中新增的特性，弹性盒子布局，让盒模型更加灵活，我们将元素设置display：flex 属性该元素就变成了一个伸缩容器；
同时有六个可以设置在该容器上的属性：
一、flex-direction属性决定即项目的排列方向flex-direction: row | row-reverse | column | column-reverse;
二、flex-wrap默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。flex-wrap: | wrap | wrap-reverse;
三、flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。flex-flow: ;
四、justify-content属性定义了项目在主轴上的对齐方式。justify-content: flex-start | flex-end | center | space-between 两端对齐，项目之间的间隔都相等。 | space-around; 每个项目两侧的间隔相等。
五、align-items属性定义项目在交叉轴上如何对齐,align-items: flex-start | flex-end | center | baseline | stretch;
六、align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用,align-content: flex-start | flex-end | center | space-between | space-around | stretch;
还有六个可以设置在容器内项目上的属性：
一、order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
二、flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
三、flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
四、flex-basis
设置主轴方向的基准长度，会让宽度或高度失效，主轴就是方向轴
作用：浏览器根据这个属性的值，去计算主轴山是否有多余的空间，默认auto
五、flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
六、align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
1、transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；
2、animation 配合 @keyframe 可以不触发事件就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；
3、animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；
过渡的使用示例：
div {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s, background-color 2s;
}
div:hover {
width: 200px;
background-color: blue;
}
动画使用示例：
/*声明一个动画*/
@keyframes name {
0% {width:200px; height:200px; background: yellow;}
50% {width:400px; height:400px; background: green;}
75% {width:500px; background: black;}
100% {width:600px ; height:600px; background: cornflowerblue;}
}
#div7 {
animation-name: name;
animation-duration: 4s;
animation-iteration-count: infinite;
}
区别1：link是XHTML标签，除了加载CSS文件外，还可以加载图片等资源文件；@import属于CSS范畴，只能加载CSS样式文件
区别2：link引用CSS时，在页面载入时同时加载（并行）；@import需要页面网页完全载入以后加载（所有在网速慢的情况下，页面会出现刚开始没有样式闪烁一下才有）
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持，当使用@import引入样式时，样式表与HTML文档是分离的；
重绘就是当元素的外观属性发生改变的时候,浏览器重新绘制渲染出来,但是不影响元素的位置、大小，例如颜色、字体大小
重排也叫回流,每个页面至少回流一次,当渲染树节点发生改变，影响了节点的几何属性（如宽、高、内边距、外边距、或是float、position、display：none;等等），导致节点位置发生变化，此时触发浏览器重排（reflow），需要重新生成渲染树。
重绘不一定引起重排,但重排一定引起重绘.
1、添加或者删除可见的DOM元素；
2、元素位置改变——display、float、position、overflow等等；
3、元素尺寸改变——边距、填充、边框、宽度和高度
4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
5、页面渲染初始化；
6、浏览器窗口尺寸改变——resize事件发生时；
1、尽量避免直接操作变更DOM的样式
2、避免逐条改变样式，可通过class类合并处理
3、对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁重排
4、使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发重排
5、减少不必要的动画，使用css动画代替js动画
伪类很像类，但是不是类，是元素特殊状态的一种描述。分为动态伪类和结构伪类两种；
常用的动态伪类
1、link 超链接没有被访问的状态，a标签独有
2、visited 超链接访问过的状态，a标签独有
3、hover 悬浮，其他标签也有该伪类
4、active 激活，被点下去的那一瞬间，其他标签也有该伪类
5、focus 获取焦点的元素，表单类元素才有
常用 的结构伪类：
1、div>p：nth-child（n）所有兄弟元素中的第n个
2、div>p：first-child 所有兄弟元素中的第一个
3、div>p：last-child 所有兄弟元素中的最后一个
4、div>p：nth-child（2n+1）：nth-child（odd） 奇数
5、div>p: first-of-type 所有同类型兄弟元素的第一个
6、div>p: last-of-type 所有同类型兄弟元素的第最后一个
伪元素：很像元素，但不是元素（element），是元素中的一些特殊位置，它不存在于 DOM 文档中、是一个虚拟的元素
常见的伪元素：
1、div::first-letter 选中div的第一个字母
2、div::first-line 选中div的第一行
3、div::selection 选中的是div中被选择的文字
4、input::placeholder 选中的是input元素 中的提示文字
5、div::before { content: ‘ ’} 选中的是div元素开始的位置，并创建一个子元素
6、div::after 选中的是div元素最后的位置，并创建一个子元素
总结：伪类是元素特殊状态的一种描述，分为动态伪类和结构伪类两种；伪类是一个冒号，微元素是是元素中的一些特殊位置，它不存在于 DOM 文档中、是一个虚拟的元素两个冒号；
因为元素设置了浮动之后会对父亲和兄弟元素产生影响：
对父亲元素的影响：无法撑起父元素的高度，导致父元素高度塌陷
对兄弟元素的影响：浮动元素后面的兄弟元素的布局会受到影响，因为浮动元素脱离了文档流，后面的元素就会跑到它的位置，但文本的位置却没变
最初浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一。
浮动之后的特点：
1、元素脱离文档流。
2、不管浮动前是什么元素，浮动后默认的宽与高都是被内容撑开的。可以单独设置。
3、不会独占一行，可以与其他元素共用一行。
4、不会出现margin合并margin塌陷的问题，能够完美的设置四个方向的heading和margin
5、不会像行内块一样被当做文本处理，没有行内块的空白问题
什么是margin 塌陷？
第一个子元素的上margin和最后一个子元素的下margin 会作用到父元素上。
为什么？
历史遗留问题，w3c标准设计如此
怎么办?
方法一、给父元素设置不为0的padding
方法二、给父元素设置不为0的border
方法三、给父元素设置css样式overflow：hidden
什么是margin 合并问题？
是什么？
上面兄弟的下margin 会和下面兄弟的上margin 合并，取一个最大值，而不是相加。
如何解决？
无需解决，布局时，相邻的值设置一个上下边距即可。
如何清除浮动？
1、给父元素指定高度
2、给父元素也设置浮动，但产生其他的问题了
3、给父元素设置overflow：hidden
4、在所有浮动元素的后面，添加一个空元素为块级，并设置clear：both
5、给浮动元素的父元素添加一个伪元素
.parent:after {
content:'',
display:block;
clear:both;
}
块格式化上下文（Block Formatting Context，BFC）可以理解元素的一个特异功能，该功能默认处于关闭的状态，当元素满足了某些条件后，该功能被激活，就开启了BFC
开启BFC 能解决什么问题
1、元素开启后，其子元素不会产生margin塌陷问题
2、开启后，元素不会被浮动元素覆盖
3、开启后，就算子元素浮动，元素自身不会塌陷
怎么开启BFC
1、根元素（html）,或包含body的元素
2、设置浮动（float），且值不为none（为left、right），
3、设置定位（position）, 不为static或relative（为absolute、fixed）
4、设置 display 为这些值 inline-block、flex、grid、table、table-cell、table-caption、flow-root
5、设置 overflow，且值不为visible (为auto、scroll、hidden)
常用方式：display:flow-root或overflow: hidden
HTML 部分：
<div class="outer">
<div class="left">left</div>
<div class="right">right</div>
</div>
方案一：左边固定宽度做浮动，右边宽度自适应并设置overflow：hidden ，让它变成一个BFC不会与浮动元素发生重叠；
.outer {
height: 100px;
}
.left {
background-color: rgb(0, 255, 191);
width: 200px;
float: left;
}
.right {
background-color: antiquewhite;
overflow: hidden;
}
方案二、flex布局，左边固定宽度，右边设置flex为1 占满剩余空间
.outer {
display: flex;
height: 100px;
}
.left {
width: 200px;
background: tomato;
}
.right {
flex: 1;
background: gold;
}
方式三、利用子绝父相，左边设置绝对定位让其脱离文档流，右边元素设置margin-left让出位置
.outer {
position: relative;
height: 100px;
}
.left {
position: absolute;
width: 200px;
height: 100px;
background: tomato;
}
.right {
margin-left: 200px;
background: gold;
}
HTML 部分：
<div class="outer">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
方式一、使用浮动，左边左浮动、右边右浮动，中间设置 margin-left和
margin-right，但是使用这种方式在HTML部分要把中间放在最后，也就是这样
<div class="outer">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
.outer {
height: 100px;
}
.left {
float: left;
width: 100px;
height: 100px;
background: tomato;
}
.center {
height: 100px;
margin-left: 100px;
margin-right: 200px;
background: lightgreen;
}
.right {
float: right;
width: 200px;
height: 100px;
background: gold;
}
方式二、使用flex布局，左右两栏设置固定大小，中间一栏设置为flex:1
.outer {
display: flex;
height: 100px;
}
.left {
width: 100px;
background: tomato;
}
.right {
width: 100px;
background: gold;
}
.center {
flex: 1;
background: lightgreen;
}
方式三、左右两边设置绝对定位，中间元素设置 margin-left和margin-right，右边元素还要设置top和right 为 0
.outer {
position: relative;
height: 100px;
}
.left {
position: absolute;
width: 100px;
height: 100px;
background: tomato;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 100px;
background: gold;
}
.center {
margin-left: 100px;
margin-right: 200px;
height: 100px;
background: lightgreen;
}
方式一、 margin-top margin-left
.father {
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
.son {
width: 100px;
height: 100px;
background-color: wheat;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
方式二、translate
.father {
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
.son {
width: 100px;
height: 100px;
background-color: wheat;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
方式三、绝对定位
.father {
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
.son {
width: 100px;
height: 100px;
background-color: wheat;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
方式四、使用flex布局
.father {
display: flex;
justify-content: center;
align-items: center;
}