1、css 盒模型
盒模型是计算一个标签在网页中所占面积，是网页布局最基本的技术点，主要有四个组成部分，从内向外的话是内容区域的宽高，内边距padding，边框，外边距margin。
盒子模型分两种W3C标准盒模型和IE怪异盒模型。
在W3C标准盒模型中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在怪异模式下，IE的宽度和高度还包含了padding和border
标准模式和怪异模式的区别？
①盒模型：IE下标准模式为：盒模型的宽高一般是content。怪异模式下的宽度是包含了内边距和边框的
②怪异模式中IE6/7/8都不识别！important声明
③设置行内元素宽高，标准模式下不生效，怪异模式下生效
④margin:0 auto,在标准模式下会水平居中，怪异模式下不会
我们可以使用box-sizing 属性让盒模型在两种模式之间转换，box-sizing ：content-box 是标准盒模型，设置为border-box时是怪异模式
2、行内元素和块级元素的区别
1、所占空间上的区别：块级元素会占据一行，垂直方向排列；行内元素不会独占一整行而是在同一行水平方向排列
2、包含前台关系的区别：块级元素可以包含行内元素和块级元素，而行内元素只能包含行内元素，不能包含块级元素
3、边距属性的区别：块级元素的margin上下左右都生效，而行内元素上下设置不能生效，左右可以生效；
除了这两种还有行内块元素，行内块元素是xxxx（看下面的解释）常见的行内标签有xxx，行内块标签有xxx，块级标签有xxx，可以通过display属性进行转换，将块标签设置display：inline-block 标签就变成了行内块。
3、行内块元素有什么特点呢？
行内块元素相当于是以行的形式展示块级元素，和块级元素一样可以设置宽高内外边距，同时内部也可以包含块级和行内元素；
4、常见的行内元素和块级元素有哪些呢
常见的行内元素：
<span>：用于对文本进行分组，并对其应用样式。
<a>：用于创建超链接。
<label>: 关联输入框并获取焦点
行内块元素：
<img>：用于插入图像。
<input>：用于创建输入控件。
<button>：用于创建按钮。
<textarea>：用于创建多行文本输入框。
常见的块级元素：
div、p、h1-h6、ul、li、table等
5、css 几种定位的区别
css 定位的作用是控制元素在页面中的位置和布局，
通过定位可以将元素放在指定的位置，css定位有五种方式
1、相对定位 postion:relative相对元素在原文档流中的位置定位，设置相对定位不会脱离文档流，元素位置的变化不会影响其他元素
2、绝对定位position:absolute，绝对定位参考的是它的包含块，如果这个元素没有脱离文档流那么它的包含块就是父元素；如果脱离了文档流，就会找第一个拥有定位属性的祖先元素，如果没找到就以浏览器的视口为参考，设置了绝对定位后元素会脱离文档流，会对后面的兄弟元素和父元素有影响。
3、固定定位postion:fixed，相对于浏览器视口定位，会脱离文档流；
4、粘性定位postion：sticky它基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起 10 像素）为止，此后它就变得固定了，不会脱离文档流，参考点是距离它最近的一个拥有滚动机制的祖先元素
5、static 静态定位，默认的定位方式，元素按正常的文档流布局
6、css的选择器和优先级
css 选择器d的作用就是选择需要指定样式的标签，并能让css样式在对应的标签生效。
css选择器有通配符选择器、id选择器、类选择器、属性选择器、后代选择器、子元素选择器、并集选择器。。。
css 选择器的优先级是如何计算的，根据选择器的权重
权重如何计算？格式：（a，b，c）
a: id 选择器的个数
b：类、伪类、属性选择器的个数
c：标签、伪元素选择器的个数
每一项逐一比较，如（0,2，1），比（0,2，0）权重更高。
当权重相同时，如何选中？ 后来者居上，后写的优先
所以css选择器的优先级排序分别是：
0、！important
1、行内样式
2、id选择器
3、类、属性、伪类选择器（权重相同）
4、标签、伪元素选择器（权重相同）
7、隐藏元素的方法和区别
一、display: none：会将元素从正常的文档流中移除，并且不会占据任何空间，但其实该元素在HTML代码中仍然存在，只是它不会在页面上显示。不会响应绑定的监听事件，设置为none 后会影响页面布局。
二、visibility: hidden：元素设置了这个属性后会隐藏但是页面依然占据中空间，所以不会改变页面的布局，但是不会响应绑定的监听事件。
三、opacity: 0：元素设置了透明度为 0后会隐藏但是页面依然占据中空间，所以不会改变页面的布局，并且能够响应元素绑定的监听事件。
四、position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏，绑定的事件将不会响应。
五、z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。
六、rgba(0,0,0,0)：将背景颜色透明，会继续在文档流中占位，所以触发重绘。由于只作用于颜色或背景色，所以子元素不会继承，透明后可以触发点击事件。
8、css3新特性
css3 是css2 的升级版本，在其基础上新增了很多强大的新功能
新特性只是随便列几个：
一：CSS3选择器
伪元素选择器
伪类选择器
属性选择器
二：CSS3边框与圆角
CSS3圆角 border-radius
边框图像 border-image
盒阴影 box-shadow
三：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：设置动画将如何完成一个周期。
七：弹性盒子布局
9、flex布局
flex布局是css3中新增的特性，弹性盒子布局，我们给一个元素设置display：flex 属性该元素就变成了一个伸缩容器；他会根据我们给容器和容器里项目设置的属性自动调整布局。
六个可以设置在该容器上的属性：
一、flex-direction属性决定即项目的排列方向flex-direction: row | row-reverse | column | column-reverse;
二、flex-wrap默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。flex-wrap: | wrap | wrap-reverse | nowrap ；
三、flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
四、justify-content属性定义了项目在主轴上的对齐方式。justify-content: flex-start | flex-end | center | space-between 两端对齐（项目的左右两边贴近容器没有空间，中间的项目均匀分布） | space-around;（每个项目的左右方向margin都相同，最左边和右边距离容器都有一定的空间）
五、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。
在实际开发中我们经常使用flex布局来实现垂直居中效果、两栏布局等自适应的场景。
10、transition和animation的区别
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;
}
11、css中加载网页样式的方式有哪些
第一种：行内样式
<div style=color:red>
第二种：内嵌样式
<style>
.test1,.test2 {
width: 200px;
height: 200px;
}
.test1 {
background-color: rgba(0,0,0,0)
}
.test2 {
background-color: bisque；
}
</style>
第三种：link 标签
<head>
<link rel="stylesheet" href="./test.css">
</head>
第四种：@import
<style>
@import url(./test.css);
</style>
11、 link 和 @import 的区别？
这两个都可以加载外部样式
区别1：link是XHTML标签，除了加载CSS文件外，还可以加载图片等资源文件；@import属于CSS范畴，只能加载CSS样式文件
区别2：link引用CSS时，在页面载入时同时加载（并行）；@import需要页面网页完全载入以后加载（所以在网速慢的情况下，页面会出现刚开始没有样式闪烁一下才有）
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
总的来说，如果只需要引入样式表推荐使用linkb标签因为它兼容性更好并且和页面并行加载，性能较好。@import 主要用于在css文件中引入其他css文件，用于特定的样式组织需求，但是需要注意加载性能和浏览器兼容问题。
12、重绘和重排的区别？
重绘就是当元素的外观属性发生改变的时候,浏览器重新绘制渲染出来,但是不影响元素的位置、大小，例如颜色、字体大小
重排也叫回流,每个页面至少回流一次,当渲染树节点发生改变，影响了节点的几何属性（如宽、高、内边距、外边距、或是float、position、display：none;等等），导致节点位置发生变化，此时触发浏览器重排（reflow），需要重新生成渲染树。
重绘不一定引起重排,但重排一定引起重绘.
13、引起重排的原因？
1、添加或者删除可见的DOM元素；
2、元素位置改变——display、float、position、overflow等等；
3、元素尺寸改变——边距、填充、边框、宽度和高度
4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
5、页面渲染初始化；
6、浏览器窗口尺寸改变——resize事件发生时；
14、如何减少浏览器的重绘和重排？
1、尽量避免直接操作变更DOM的样式
2、避免逐条改变样式，可通过class类合并处理
3、对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁重排
4、使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发重排
5、减少不必要的动画，使用css动画代替js动画
15、伪元素和伪类的区别
伪类很像类，但是不是类，是元素特殊状态的一种描述。分为动态伪类和结构伪类两种；
常用的动态伪类
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 文档中、是一个虚拟的元素；css3为了区分这两个，建议伪类使用一个冒号，伪元素使用两个冒号。
16、为什么需要清除浮动？
因为元素设置了浮动之后会对父亲和兄弟元素产生影响：
对父亲元素的影响：无法撑起父元素的高度，导致父元素高度塌陷
对兄弟元素的影响：浮动元素后面的兄弟元素的布局会受到影响，因为浮动元素脱离了文档流，后面的元素就会跑到它的位置，但文本的位置却没变
17、那为什么还要设置浮动？
最初浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一。
浮动之后的特点：
1、元素脱离文档流。
2、不管浮动前是什么元素，浮动后默认的宽与高都是被内容撑开的。可以单独设置。
3、不会独占一行，可以与其他元素共用一行。
4、不会出现margin合并margin塌陷的问题，能够完美的设置四个方向的heading和margin
5、不会像行内块一样被当做文本处理，没有行内块的空白问题
18、margin合并margin塌陷问题是什么问题？
什么是margin 塌陷？
第一个子元素的上margin和最后一个子元素的下margin 会作用到父元素上。
为什么？
历史遗留问题，w3c标准设计如此
怎么办?
方法一、给父元素设置不为0的padding
方法二、给父元素设置不为0的border
方法三、给父元素设置css样式overflow：hidden
什么是margin 合并问题？
是什么？
上面兄弟的下margin 会和下面兄弟的上margin 合并，取一个最大值，而不是相加。
如何解决？
无需解决，布局时，相邻的值设置一个上下边距即可。
19、怎么清除浮动带来的影响？
如何清除浮动？
1、给父元素指定高度
2、给父元素也设置浮动，但产生其他的问题了
3、给父元素设置overflow：hidden
4、在所有浮动元素的后面，添加一个空元素为块级，并设置clear：both
5、给浮动元素的父元素添加一个伪元素
.parent:after {
content:'',
display:block;
clear:both;
}
20、说下BFC
块格式化上下文（Block Formatting Context，BFC）看这个名字就知道它描述的是块级元素，BFC是一个独立的渲染容器，它有以下特点：
1、块级元素从上之下排列
2、如果两个块级元素属于同一个BFC，它们的上下margin会重叠
3、BFC的区域不会与浮动的元素区域重叠
4、计算BFC的高度时，浮动元素也参与计算
5、一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
基于以上特点我们可以使用它解决一些问题
开启BFC 能解决什么问题
1、因为BFC的子元素不会影响外面的元素，所有我们只需要将其中一个子元素变为BFC，就可以解决margin合并问题
2、BFC的区域不会与浮动的元素区域重叠，利用这个特点实现两栏布局
3、计算BFC的高度时，浮动元素也参与计算，将父元素变为BFC，就算子元素浮动，元素自身不会塌陷，解决浮动带来的问题清除浮动
怎么开启BFC
1、根元素（html) 是默认的BFC
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
21、怎么实现两栏布局
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;
}
22、怎么实现三栏布局
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;
}
23、实现元素垂直居中的方式
方式一、 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;
}
