主要考点：css3新特性；弹性盒；浮动元素；BFC;动画；布局；布局单位；水平，垂直的方法；
前端全部面试题
CSS面试题
CSS(层叠样式表)
1.介绍一下标准的css的盒子模型？与低版本的IE盒子模型有什么不同？(重要)
标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本的IE盒子模型：宽度=内容宽度（content+border+padding）+ margin
标准表型指的是设置box-sizing为content-box的盒子模型，一般width,height指的是content的宽高。IE盒模型指的是box-sizing为border-box的盒子，宽高的计算是content+padding+border;
box-sizing属性
// 正常的
content-box(默认属性)
//IE:
border-box
// 从父元素继承 box-sizing 属性的值
inherit- css中box-sizing属性的值content-box的含义为：定义它的宽高的时候不包括border和padding
- css中box-sizing属性的值border-box的含义为：定义它的宽高的时候包括border和padding,内容的宽高需要减去相应方向的border和padding。注意：内容的宽和高必须保证不能为负，必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。
box-sizing属性值有什么作用？
用来控制元素的盒子模型的解析模式，默认为content-box
-
context-box：W3C 的标准盒子模型，设置元素的 height/width 属性指的是 content 部分的高/宽 -
border-box：IE 传统盒子模型。设置元素的 height/width 属性指的是 border + padding + content部分的高/宽
怎么避免盒模型是低版本的IE盒模型？
答：将box-sizing属性设置为content-box
为什么box-sizing:border-box没有被广泛应用？
答：因为IE兼容性问题
举例子（理解）
box-sizing:border-box 不是本来就是设置带边框的框吗...-慕课网
2.css框模型（box modal)
规定了元素框处理元素的内容（element)，内边距(padding),边框(border)和外边距(margin)
注意：margin：可以是负值，但是padding不可以，如果是负值就相当于把当前属性取消了
margin 和 padding 分别适合什么场景使用？
何时使用margin
- 需要在border外侧添加空白时。
- 空白处不需要背景（色）时。
- 上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。
何时使用padding
- 需要在border内测添加空白时。
- 空白处需要背景（色）时。
- 上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。
3.获取屏幕的高度和宽度 （屏幕分辨率）： window.screen.height/width
4.css选择器有哪些？哪些属性可以继承？(重要)
CSS选择符：(只需要说前5个即可)
- id选择器(#myid)、
- 类选择器(.myclassname)、
- 标签选择器(div, h1, p)、
- 相邻选择器(h1 + p)、
- 子选择器（ul > li）、
- 后代选择器（li a）、
- 通配符选择器（*）、
- 属性选择器（a[rel=”external”]）、
- 伪类选择器（a:hover, li:nth-child）
相邻选择器：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {margin-top:50px;}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>子选择器：
<DOCTYPE html>
<head>
<title>子选择器</title>
<style type="text/css">
h1 > strong {
color: red
}
</style>
</head>
<body>
<h1>我是<strong>漂亮的</strong></h1>
</body>
</html>后代选择器：
<html>
<head>
<style type="text/css">
h1 em {color:red;}
</style>
</head>
<body>
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
</body>
</html>
属性选择器：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[title]
{
color:red;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<h2 title="Hello world">Hello world</h2>
<a title="W3School" href="http://w3school.com.cn">W3School</a>
<hr />
<h1>无法应用样式：</h1>
<h2>Hello world</h2>
<a href="http://w3school.com.cn">W3School</a>
</body>
</html>伪类选择器：链接的状态不同显示方式就不同
<html>
<head>
<style type="text/css">
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
</style>
</head>
<body>
<p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p>
</body>
</html>
可继承的属性：
1、字体系列属性
- font-family：字体系列
- font-weight：字体的粗细
- font-size：字体的大小
- font-style：字体的风格
2、文本系列属性
- text-indent：文本缩进
- text-align：文本水平对齐
- line-height：行高
- word-spacing：单词之间的间距
- letter-spacing：中文或者字母之间的间距
- text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
- color：文本颜色
3.元素可见性：
- visibility：控制元素显示隐藏
4.光标属性:cursor：光标显示为何种状态
不可继承的样式：
盒模型的属性：padding, margin, width, height,border(只需要说前4个)
3.背景属性：
background,background-color,background-image,background-repeat,background-position,
background-attachment
优先级（就近原则）：!important >style >[ id > class > tag ]
注意：!important 比内联优先级高
!import>内联>ID选择器>类选择器=伪类选择器=属性选择器
!import的使用
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试!Important</title>
</head>
<style type="text/css">
#Box div
{
color: red;
}
.important_false
{
color: blue;
}
.important_true
{
color: blue !important;
}
</style>
<body>
<div id="Box">
<div class="important_false">
这一行末使用important</div>
<div class="important_true">
这一行使用了important</div>
</div>
</body>
</html>CSS代码第一行设定了box里面所有div中字体色为红色，第二行和第三行都用class重新定义了自身div的字体色为蓝色，
不同的是，第二行未使用!important，而第三行使用了!
5.CSS3新增伪类举例：(重要）
- p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
- p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
- p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
- p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
- p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
- :enabled :disabled 控制表单控件的禁用状态。
- :checked 单选框或复选框被选中。
li:first-child{}
li:last-child{}
li:nth-child(){}
li:nth-last-child(){}
li:first-of-type{}
li:last-of-type{}
li:nth-of-type(){}
li:nth-last-of-type(){}
ul li:only-child{选择属于其父元素的唯一子元素的每个 元素。}
6.如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？(重要)--居中这个还得在看，不是很懂
div:固定宽度，margin: 0 auto; 上下边距为0，左右边距为auto，就是自动适应。
border: 1px solid red;
margin: 0 auto;
height: 50px;
width: 80px;浮动元素的上下左右居中：固定宽高，position: absolute;float: left;left: 50%;top: 50%;margin: -50px 0 0 -100px; --不用看
border: 1px solid red;
float: left;
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px; 绝对定位的左右居中：固定宽高，position: absolute;margin: 0 auto;left: 0;right: 0;--加上absolute脱离文档流，所以只写margin:0 auto；不好用
border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0; 利用绝对定位元素的自动伸缩特性水平垂直居中
.father{
position: relative;
width: 500px;
height: 500px;
}
.son{
position:absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}利用flex布局水平垂直居中（回答这个显得更高端）
#box{
display: flex;
display: -webkit-flex;
border: 1px solid #0000FF;
height: 200px;
width: 400px;
align-items:center;
justify-content:center;
}
.item{
width: 50px;
height: 40px;
border: 1px solid #00C1B3;
}1、margin: 0 auto;
2、position: absolute;left: 50%;transform: translateX(-50%);
3、position: absolute;left: 50%;width: 200px;margin-left: -100px;
4、position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;
5、position: relative;left: 50%;width: 300px;margin-left: -150px;background-color: pink;css不定宽高，水平垂直居中
https://www.cnblogs.com/smartwange/p/14939810.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>与时俱进，css不定宽高垂直居中的5种方法</title>
</head>
<style>
/* 公用样色 */
.father{
padding:10px;
background-color:red;
}
.child{
padding:10px;
background-color:green;
}
textarea{
vertical-align: top;
}
p{
clear:both;
}
/* 方法一：table-cell + inline-block */
#demo1 .father{
width:400px;
height:150px;
text-align: center; /*水平居中*/
display: table-cell; /*垂直居中*/
vertical-align: middle;
}
#demo1 .child{
display: inline-block;
}
/* 方法二：css3 position + translate */
#demo2 .father{
width:400px;
height:150px;
position: relative;
}
#demo2 .child{
position: absolute;
left:50%;
top:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
transform:translate(-50%,-50%); /* 使用-50%偏移方法居中 */
}
/* 方法三：css3 box布局 */
#demo3 .father{
min-width:400px;
min-height:150px;
float: left; /* 使元素具有伸缩属性，子元素能撑开父元素 */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: box; /*box弹性布局*/
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
box-pack: center; /*水平居中*/
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
box-align: center; /* 垂直居中*/
}
/* 方法四：css3 flex布局 */
#demo4 .father{
min-width:400px;
min-height:150px;
float: left; /* 使元素具有伸缩属性，子元素能撑开父元素 */
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex; /*flex弹性布局*/
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center; /*主轴居中（这里相当于水平居中）*/
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center; /*子元素交叉轴居中*/
}
/* 方法五：css3 grid布局 */
#demo5 .father{
min-width:400px;
min-height:150px;
float: left; /* 使元素具有伸缩属性，子元素能撑开父元素 */
display:grid; /*grid网格布局*/
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center; /*主轴居中（这里相当于水平居中）*/
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center; /*子元素交叉轴居中*/
}
#demo5 .child{
display: inline-block;
}
</style>
<body>
<h3>方法一：table-cell + inline-block</h3>
<div id="demo1">
<div class="father">
<div class="child">
<textarea>子元素宽高不确定</textarea>
</div>
</div>
</div>
<p>
兼容性：ie8+, chrome全支持
</p>
<h3>方法二：css3 position + translate</h3>
<div id="demo2">
<div class="father">
<div class="child">
<textarea>子元素宽高不确定</textarea>
</div>
</div>
</div>
<p>
兼容性：ie9+, chrome全支持<br/>
缺点：采用了绝对定位，子元素不能撑开父元素，正式使用要加各种前缀(-webkit-,-ms-等)
</p>
<h3>方法三：css3 box布局</h3>
<div id="demo3">
<div class="father">
<div class="child">
<textarea>子元素宽高不确定</textarea>
</div>
</div>
</div>
<p>
兼容性：ie10+, chrome ?<br/>
缺点：兼容性较差，但比flex好，特别是是手机版，正式使用要加各种前缀(-webkit-,-ms-等)
</p>
<h3>方法四：css3 flex布局</h3>
<div id="demo4">
<div class="father">
<div class="child">
<textarea>子元素宽高不确定</textarea>
</div>
</div>
</div>
<p>
兼容性：ie10+, chrome 21+<br/>
缺点：兼容性较差，是box的替代方案，正式使用要加各种前缀(-webkit-,-ms-等)
</p>
<h3>方法五：css3 grid布局</h3>
<div id="demo5">
<div class="father">
<div class="child">
<textarea>子元素宽高不确定</textarea>
</div>
</div>
</div>
<p>
兼容性：ie不支持, chrome 52+<br/>
缺点：兼容性差，正式使用要加各种前缀(-webkit-,-ms-等)
</p>
</body>
</html>
7. display有哪些值？说明他们的作用?(重要)
inline（默认）–此元素会被显示为内联元素,不换行
<style>
p {display:inline}
</style>
<p>这两个段落生成内联盒子,和它的结果</p>
<p>这两个元素之间没有距离。</p>none–隐藏
<style>
h1.hidden {display:none;}
</style>
<h1>这是一个可见标题</h1>
<h1 class="hidden">这是一个隐藏标题</h1>
<p>注意, 实例中的隐藏标题不占用空间。</p>block–块显示
inline-block-块级元素能够在同一行显示
inherit:规定应该从父元素继承display属性的值
table–此元素会作为块级表格来显示。
list-item–像块类型元素一样显示，并添加样式列表标记。
8.position的值？(重要)
- static（默认）：按照正常文档流进行排列；
- relative（相对定位）：不脱离文档流，相对于自己 的父级
- absolute(绝对定位)：外面的父级，若没有父级，就是以左上角为准
- fixed(固定定位)：参照对象是浏览器窗口，出现滚动条的时候，不会随之滚动。
- sticky：用来实现吸顶效果（吸顶效果;正常再文档流内staitc属性,超出限制相当于走的是fixed属性。css中sticky属性有什么特点-css教程-Python学习网）
9. CSS3有哪些新特性？
- 文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）；盒阴影：box-shadow；text-overflow(当文本溢出包含它的元素时，应该如何显示);word-wrap(是否换行）；word-break(换行）
- 圆角（边框半径）：border-radius 属性用于创建圆角；边框图片：border-image: url(border.png) 30 30 round
- 颜色：新增RGBA、HSLA模式
- 盒子模型
- 背景（background-image；background-size；background-origin：背景图片的定位区域；background-clip：背景的绘制区域）
- 渐变（Gradients）：线性渐变（linear gradients）--向上下左右，对接方向；径向渐变（redial gradients---由它们中心定义）
CSS背景属性,background-origin和background-clip_斜杠青年:的博客-CSDN博客_background-origin属性
10.请解释一下CSS3的flexbox（弹性盒布局模型）
以更加高效的方式来对容器进行布局,对其和分配空间.
11.用纯CSS创建一个三角形的原理是什么？(重要)
首先，需要把元素的宽度、高度设为0。然后设置边框样式（上，左，右边框设置为透明，边框下面为设置为border-bottom: 40px soild #ffffff）。---不明白，为什么是border-top
思路：就是一个矩形留了1/4
// tansparent --背景透明
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
画三角形
设置border属性，长度宽度定义为0， 想要那个方向的三角形（上 右 下 左），就把其他方向的三角形颜色设置为 transparent
.box {
width: 0;
height: 0;
border: 50px solid;
border-color: transparent transparent #ff0 transparent;
}12.常见浏览器的兼容性问题？移动端兼容问题？
解决兼容性的方法：加对应浏览器的前缀
- 不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}
- 标准表型指的是设置box-sizing为content-box的盒子模型，一般width,height指的是content的宽高。IE盒模型指的是box-sizing为border-box的盒子。宽高的计算是content+padding+border;
- IE下在使用margin:0 auto;无法使其居中 。解决办法：为其父容器设置text-align:center;
========移动端========= - 上下拉动滚动条时卡，慢：移动端丨-webkit-overflow-scrolling:touch属性导致页面卡住 - Hrone - 博客园
-
body { // -webkit-overflow-scrolling:控制元素在移动设备上是否使用滚动回弹效果 // touch:手指从触摸屏上移开，内容会继续保持一段时间的滚动效果 -webkit-overflow-scrolling: touch; overflow-scrolling: touch; } - 圆角bug,有些安卓手机圆角失效
background-clip: padding-box;长时间按住页面闪退
-
element { -webkit-touch-callout: none; }
13.为什么要初始化CSS样式
因为浏览器兼容问题，不同浏览器对有些标签的默认值是不同的，如果没有对css初始化往往会出现浏览器之间的页面显示差异
14. 隐藏元素的方法有哪些？
display：none 隐藏某个元素，且隐藏的元素不会占用任何空间
- 隐藏的元素不占文档流
- 引发回流和重绘
- 其内部的标签全部隐藏，无论如何挣扎都无济于事
visibility：hidden 隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间
- 隐藏的元素存在空间
- 无回流和重绘
- 其元素若添加visibility:visibility；则会显示出来
opacity:0.将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。
clip/clip-path ：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
transform: scale(0,0)：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
15.display:none与visibility:hidden的区别
这两个属性都是让元素隐藏，不可见。两者区别如下：
表现上
（1）在渲染树中
display:none会让元素完全从渲染树中消失，渲染时不会占据任何空间；visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。
（2）是否是继承属性
display:none是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；visibility:hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible可以让子孙节点显示； （3）修改常规文档流中元素的display通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘；
（4）如果使用读屏器，设置为display:none的内容不会被读取，设置为visibility:hidden的内容会被读取
性能上
使用 visibility:hidden 比 display:none 性能上要好，display:none 切换显示时，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。
16.为什么会出现浮动和使用Float进行布局容易产生什么问题？什么时候需要清除浮动？清除浮动的方式？(重要)
为什么会出现浮动?
- 浮动定位将元素排除在普通流之外，即元素将脱离文档流，不占据空间。
- 浮动元素碰到浮动元素的边框停留。
浮动带来的问题：
- 子元素在设置 float 后会脱离文档流，造成父元素高度塌陷，影响与父元素同级的元素掘金
https://juejin.cn/post/6844903447376953357 - 与浮动元素同级的非浮动元素（内联元素）会跟随其后
- 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
清除浮动的方式：
- 给浮动元素父级div定义height
- 最后一个浮动元素后加空div标签 并添加样式clear:both。
- 包含浮动元素的父标签添加样式overflow为hidden或auto。【让父元素包住这个脱离了文档流的浮动元素，换句话说，"overflow:hidden"可以清除包含块内子元素的浮动的影响。】
- 父级div定义伪类：after
适合场景
文字环绕效果FL
必会:为什么会出现浮动？浮动元素会引起什么问题？如何清 除浮动？_帅帅程序猿的博客-CSDN博客_为什么会出现浮动
<div class="outter">
<div class="inner"></div>
<div style="clear: both;"></div>
</div>
// test.css
.outter { width:200px; background:#3FF; border:1px solid #000;}
.inner { float:left; width:120px; height:80px; background:#FF3; }17.设置元素浮动后，该元素的display值是多少？自动变成display:block
18.使用 CSS 预处理器吗？Less sass
19.Sass、LESS是什么？大家为什么要使用他们？
是CSS预处理器
1、结构清晰(语法嵌套)
2、可以轻松实现多重继承。
3、定义变量、定义
4、声明@mixin 使用@include调用。一处书写多次调用
5、占位选择器$ 通过@extend调用
6、函数(px转换rem就使用的)
7、强大的运算符()
@function pxRem($px){
@return $px / $baseFontSize * 1rem;
}变量：
$blue:#187ec7;//变量声明
div{
color:$blue;//变量引用
}
嵌套
.div {
width:500px;
.div_Children{
height:50px;
}
}
嵌套代码引用父元素
a{
&:hover{
color:red;
}
}
继承
.boderClass{
border:1px solid #ddd;
}
class2继承boderClass使用 @extend命令
class2{
@extend .boderClass;//继承
color:red;
}
代码重用
@minxin left{//声明
float:left;
margin-left:20px;
}
使用@include命令调用mixxin
div{
@include left;
}
引用文件
@import命令，用来插入外部文件。使用该命令会合并为一个文件
@import "path/filename.scss";
20. CSS优化、提高性能的方法有哪些？(css优化性能的方法.)
- 避免后代选择符
- 避免不必要的重复代码
- 少使用!important
-
避免不必要的命名空间
-
最好使用表示语义的名字。
-
正确使用display的属性：由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。
21.什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？(重要)
响应式网站设计是一个能够兼容多个终端而不是每一个终端做一个特定的版本
- 优点：一套代码兼容web端、平板、以及手机端网页
- 缺点：工作量大、UI设计也需要多个版本
场景：
- 同时兼容多种不同设备
- 基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
- 页面头部必须有meta声明的viewport。
<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>怎么实现响应式？
媒体查询media；rem(相对单位，相对根字体的大小）;%（顾名思义，就是父元素）除了这个还有其他的吗？其他的 没用过
22.有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度
弹性盒div:100%；flex:1；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度(三种方案)</title>
<style type="text/css">
html,
body { height: 100%; padding: 0; margin: 0; }
/*方案一*/
/*.outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; }
.A { height: 100px; margin: -100px 0 0; background: #BBE8F2; }
.B { height: 100%; background: #D9C666; }*/
/*方案二*/
/*.outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; position: relative; }
.A { height: 100px; background: #BBE8F2; position: absolute; top: 0 ; left: 0 ; width: 100%; }
.B { height: 100%; background: #D9C666; }*/
/*方案三*/
.outer { height: 100%; position: relative; }
.A { height: 100px; background: #BBE8F2; }
.B { background: #D9C666; width: 100%; position: absolute; top: 100px ; left: 0 ; bottom: 0; }
</style>
</head>
<body>
<div class="outer">
<div class="A"></div>
<div class="B"></div>
</div>
</body>
</html>23.style标签写在body后与body前有什么区别？
页面加载自上而下 当然是先加载样式。
写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）
24. CSS属性overflow属性定义溢出元素内容区的内容会如何处理?
overflow默认值visible
- 参数是scroll时,会出现滚动条
- 参数是hidden时,溢出隐藏
overflow:可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
25.单行，多行文本溢出隐藏
// 单行文本溢出
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
white-space: nowrap; // 规定段落中的文本不进行换行
// 多行文本溢出
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
display:-webkit-box; // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3; // 显示的行数
注意：由于上面的三个属性都是 CSS3 的属性，没有浏览器可以兼容，所以要在前面加一个-webkit- 来兼容一部分浏览器。26.对媒体查询的理解？
@media的作用：媒体查询可以在指定的设备上使用对应的样式替代原有的样式。
可以简单理解：告诉浏览器，当满足条件时，调用某样式。当满足条件A，调用A样式。当满足条件B时，调用B样式
检测：
1.viewport(视窗) 的宽度与高度
2.设备的宽度与高度
3.朝向 (智能手机横屏，竖屏)
4.分辨率等等
语法和操作符
语法一：内联@media
@media查询条件表达式{css样式}
例：
@media not|only mediatype and (expression){...}媒体查询由多媒体组成，可以包含一个或多个表达式，根据表达式条件判断是否成立，返回true或false
如果指定的多媒体类型匹配设备类型则返回查询结果为true,文档会在匹配的设备上显示指定样式效果
可以使用操作符‘not’或‘only’或‘and’或，限定
and：表示并且，要求必须满足所有的表达式要求时，才能使用media定义样式。
not：不，表示除…外，即排除掉某些特定的设备的，如 @media not print（非打印设备）。
注意：'not’针对的是一整条媒体查询语句，而非其中的某一个条件。
例：
@media not print and(max-width:1024px){...}
/* 或者 */
@media not(print and (max-width:1024px)){..}
only： 表示只有 仅仅，表示某一种的媒体类型设备。
注意：对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
,：多个条件设定使用逗号分隔，表手或者or，满足其中之一。
语法二：外链 media属性
例：
<link media=“查询条件表达式” />
除了上述格式，也可以在不同的媒体上使用不同的样式文件，使用link外联引入：
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
媒体类型(mediatype)
1.print 打印机
2.screen 电脑屏幕，平板，智能手机等。
3.speech语音合成器等发声设备
4.all 用于所有多媒体类型设备（默认）
常见媒体特性（属性）
1.color颜色
2.color-index 颜色索引
3.aspect-ratio指定设备视口区域的宽高比
例：
@media only screen and (min-aspect-ratio:16/9){...}
4.device-aspect-ratio设备屏幕宽高比
5.device-height设备屏幕高度
6.device-width设备屏幕宽度
7.grid网格栅格
8.scan扫描
9.height高度
10.monochrome黑白
11.orientation方向，横屏landscape还是竖屏portrait
例：
@media (orientation:landscape){
h1:before{
content: '现在是横屏效果';
color:green;
}
}
@media (orientation:portrait){
h1:before{
content: '现在是竖屏效果';
color:gold;
}
}
12.resolution设备的分辨率范围 分辨率(dpi),分辨率倍数(dppx)
例：
@media screen and (resolution:2dppx){...}
@media screen and (resolution:3dppx){...}
@media screen and (min-resolution:2dppx){...}
13.width视口宽度 终端设备对页面的渲染区域
视口就是通常我们定义移动端头部meta的viewport。
注意：在浏览器窗口中，视口不包括滚动条、顶部或底部工具栏、菜单的部分。
例：
/* 在屏幕可视窗口尺寸大于 480 像素的设备上修改背景颜色 */
@media screen and (min-width:480px){
body{
background-color:lightgreen;
}
}
/* 在屏幕可视窗口尺寸大于 500 像素时将菜单浮动到页面左侧 */
@media screen and (min-width:500px){
#leftsidebar{
width:200px;
float:left;
}
#main{
margin-left:200px;
}
}
注：以上几乎所有的属性都可以使用【min-】和【max-】前缀做限定 （grid、scan和orientation除外）
max-color：最大颜色
max-color-index：最大颜色索引
max-aspect-ratio：最大宽高比
max-device-aspect-ratio：最大设备屏幕宽高比
max-device-height：设备屏幕的最大高度
max-device-width： 设备屏幕的最大宽度
max-height： 最大高度
max-monochrome：每个像素的最大单色原件个数
max-resolution：最大分辨率
max-width：最大宽度
min-color：最小颜色
min-color-index：最小颜色索引
min-aspect-ratio：最小宽高比
min-device-aspect-ratio：最小设备屏幕宽高比
min-device-height：设备屏幕的最小高度
min-device-width： 设备屏幕的最小宽度
min-height： 最小高度
min-monochrome：每个像素的最小单色原件个数
min-resolution：最小分辨率
min-width：最小宽度
语法
简单来说，使用 @media 查询，可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是需要设置设计响应式的页面，@media 是非常有用的。当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
27.display:inline-block 什么时候会显示间隙？如何去除inline-blcok元素间隙？
空隙产生原因：
HTML中的换行符、空格符等。空白符占据一定宽度，使用inline-block会产生元素间的空隙。-----去除空格
字体大小不为0的情况下----父元素font-size设置为0，子元素font-size设置实际大小
margin正值的时候---把margin值设置为负数
解决办法：
- 把所有的子元素写在一行；
- 子元素设置浮动；
28.在不知道图片大小的情况下，如何设置样式让图片不变形？max-width: 100%
29.link @import导入css(link和@import的区别)
- link方式的样式权重比import的权重高。
- link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载
- link支持js可以改变样式，而import不支持
30.如何实现一个最大的正方形.
// 用 padding-bottom 撑开边距
section {
width:100%;
padding-bottom: 100%;
background: #333;
}31.一行水平居中，多行居左
<div><span>我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。</span></div>
<div><span>我是一行文字</span></div>
<style>
div{text-align: center;}
div span{display: inline-block;
text-align: left;}
</style>32.常见css布局单位
px(像素),%(百分比),em,rem,vm/vh,rpx
- px：绝对单位，页面按精准像素展
- em：相对单位，基准点为⽗节点字体的⼤⼩，如果⾃身定义了font-size按⾃身来计算（浏览器默认字体是16px），整个⻚⾯内1em不是⼀个固定的值。
- rem：相对单位，可理解为”root em”, 相对根节点html的字体⼤⼩来计算，CSS3新加属性，chrome/firefox/IE9+⽀持。一般只用于移动端。
- %：大部分相对于祖先元素，也有相对于自身的情况比如（border-radius、translate等)
- vw/vh:相对于视窗的尺寸
- rpx:微信小程序的尺寸的单位rpx，根据屏幕宽度进行自适应，若规定屏幕款750rpx,那就是750物理像素
1.CSS中，自适应的单位有哪些？
%，vw,vh,rem,em,rpx
2.rpx与px的换算单位（重点）
1rpx = 0.5px(750物理像素)
3.%和vm有什么区别？
百分比具有继承作用；vm之和设别的屏幕宽度有关。
4.100%是相对哪个元素
100% 是相对于父元素 100vh 是相对于 当前的window，有可能是ifame 嵌套 会有多个window
5. 相对长度和绝对长度的区别
- em指的是相对长度，值是不固定的，而是由其他元素尺寸来决定的相对值，并且会继承父元素字体大小。相对单位长度指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。相对长度还有：ex、ch、rem、vw、%等等。·
- px是绝对长度单位，它是一个固定的值，是多少就是多少，不会因为其他元素的尺寸变化而变化。它反应一个真实的物理尺寸。绝对长度还有：cm、mm、in、pt等等。
- 相同点：px和em都是长度单位
- 异同点：px的值是固定的，是多少就是多少，计算起来比较容易。em的值是不固定的，并且会继承父级元素的字体大小。
- 浏览器默认字体高是16px。所以未经调整的浏览器都符合1em=16px。那么12px = 0.75em,10px = 0.625em
6.rem布局原理
相对于 em 的好处是：不会发生逐渐增大或者减小字体尺寸的情况，因为始终继承根元素的字体尺寸；rem 单位不仅可应用于字体大小，还可以用于设定宽高等其他大小，使页面可以适配不同屏幕尺寸。rem 一般只用于移动端。
优点： 在屏幕分辨率千差万别的时代，只要将rem与屏幕分辨率关联起来就可以实现页面的整体缩放，使得在设备上的展现都统一起来了。 而且现在浏览器基本都已经支持rem了，兼容性也非常的好。
缺点：使用iframe引用也会出现问题。rem在多屏幕尺寸适配上与当前两大平台的设计哲学不一致。即大屏的出现到底是为了看得又大又清楚，还是为了看的更多的问 题。
相对于 em 的好处是：
不会发生逐渐增大或者减小字体尺寸的情况，因为始终继承根元素的字体尺寸；
rem 单位不仅可应用于字体大小，还可以用于设定宽高等其他大小，使页面可以适配不同屏幕尺寸。
项目中rem的使用
它是相对长度单位。相对于根元素(即html元素)font-size计算，是一个适配单位
首先建立一个js文件：@/utils/rem
window.onload = function() {
setRem();
};
window.onreset = function() {
setRem();
};
/* 设置字体rem */
function setRem() {
var width = document.body.offsetWidth; // 获取当前页面的宽度
var nowFont = width / 375 * 37.5; // 通过标签名称来获取元素
var htmlFont = document.getElementsByTagName('html')[0]; // 给获取到的元素的字体大小赋值
htmlFont.style.fontSize = nowFont + "px";
}
在main.js里面引入该文件
import rem from './utils/rem.js'
Vue.use(rem)
33.flex布局--容器属性；项目属性面试题（重点）主要看属性和值
Flex布局：flex属性详解 (flex和flex-grow的区别？)_无数_Mirage的博客-CSDN博客
在css中，flex属性是使用来设置或检索弹性盒模型对象的子元素如何分配空间，3个属性：是 flex-grow属性、flex-shrink属性和 flex-basis 属性的简写属性。flex属性针对的是弹性盒模型对象的子元素，对于其它元素，flex属性不起任何作用；
注：如果元素不是"弹性盒模型对象的子元素"，则 flex 属性不起作用。(弹性盒模型对象，即声明了display:flex或display: inline-flex的元素，这个元素被称为伸缩容器)
优点：简便、完整、响应式地实现各种页面布局 缺点：只兼容IE10+的浏览器
flex属性语法格式：
flex:flex-grow;flex-shrink;flex-basis/auto/initial/inherit1.flex布局flex-grow属性:
定义项目的放大(扩展)比例，即定义对剩余空间(如果有的话)的分配。对弹性容器内的元素，在当前列除自身宽度之外若还有剩余空间，而设定的分配
- 默认为0，即如果存在剩余空间，也不放大。
- 如果所有项目的
flex-grow属性都为1，则它们将等分剩余空间。 - 如果一个项目的
flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
下面这个示例比较全面，自行观察flex-grow设置为1、3、0的区别；以及设置为0但有内容和无内容的区别。
flex-shrink
定义项目的收缩比例：对弹性容器内元素，如果所有子元素的宽的总和超过了弹性容器设定的宽width,那么该属性分配元素的收缩比例。
默认为1，即每个子元素收缩比例相同，但不会忽略内容（如果元素中的内容超过了容器的宽，那么容器会被撑开）
如果一个项目的flex-shrink属性为1，其他项目都为2，且所有项目的宽超过了容器设定的width,则所有项目的宽将在原基础进行收缩，后者进行收缩的量为前者的2倍。但是不会忽略内容，内容会占据实实在在的宽度。
flex-basis
- flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间(main size)。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值auto,即项目的本来大小。
.item{
flex-basis:<length> | auto;
}- 和width不同。flex-basis用于设置或检索弹性盒伸缩基准值
- 推荐这篇文章：
flex-basis表示在flex子元素 被放入flex容器之前的大小，是子元素的理想或者假设大小但是并不是其真实大小，其真实大小取决于flex容器的宽度、flex子元素的min-width,max-width等其他样式
任何一个容器都可以指定为flex的布局.box{display:flex}
行内元素也可能使flex布局.box{display:inline-flex}
webkit内核的浏览器，必须加-webkit前缀
.box{display:-webkit-flex;/*Safari*/display:flex}
注意：设置弹性盒，子元素float,clear和vertical-align属性失效
flex-direction：排列方向
row:从左往右
row-reverse:从右往左
column:从上到下
column-reverse:从下到上flex-wrap: 是否换行
nowrap（默认）:不换行
wrap:换行
wrap-reserve
justify-content：水平对齐方式
flex-start(默认）：左对齐
flex-end:右对齐
center:居中
space-between:两端对齐，项目之间的间隔都相等
space-around:每个项目两侧的间隔相等align-item：竖直对齐方式
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。align-content:轴线对齐方式
flex-start:与交叉轴的起点对齐
flex-end:与交叉轴的终点对齐
center:与交叉轴的中点对齐
space-between:与交叉轴两端对齐，轴线之间的间隔平均分布
space-around:每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch:默认值，轴线占满整个交叉轴order:属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
.item {
order: <integer>;
}flex-grow：属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.item {
flex-grow: <number>; /* default 0 */
}题：
flex--内容宽度等分
//css
.box {
display: flex;
}
.box div {
flex: 1;
border: 1px solid red;
}
//html
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>flex布局如何允许换行呢？
设置flex-wrap样式属性
flex：1的原理是什么呢？
flex-grow 、flex-shrink 、flex-basis这三个样式的合集，全写状态为flex:0 1 auto，简写为flex: 1
35. ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用
- 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素
- 伪类：a:hover--鼠标悬浮，:link 应用于未被访问过的链接，:active 应用于被激活的元素；
- 伪元素：::before 在元素内容的最前面添加新内容。::after 在元素内容的最后面添加新内容
36.块级元素和行级元素有什么区别
行内元素：
- 与其他行内元素并排，行内元素不会自动换行
- 不设置宽高，设置宽高无效，默认宽度就是文字宽度
- 对margin设置左右方向有效，而上下无效，padding设置都有效
块级元素：
- 自己独占一行，不能与其他元素并列
- 可以自动换行，可以设置宽高，设置margin和padding都有效，如果不设置宽度，那么宽度将默认变为父级的100%
1)、内联元素，和其他元素都在一行上。
2)、内联元素中宽高，行高及顶和底边距不可设置。
3)、内联元素，只能容纳文本或者其他内联元素。
行内元素可以设置padding值、左右margin值、若行内元素浮动则上下margin生效
37.border:设置所有的边框属性
p{border: 5px soild red;}- border-width:边框宽度
- border-style:边框样式
- border-color:边框颜色
- inherit:从父元素继承border属性的设置
38.水平居中的方法
- 元素为行内元素，设置父元素
text-align:center - 如果元素宽度固定，可以设置左右
margin为auto; - 如果元素为绝对定位，设置父元素
position为relative,元素设left:0;right:0;margin:auto; - 使用
flex-box布局，指定justify-content属性为center.display设置为tabel-ceil
39.垂直居中的方法
- 单行文本的话可以使用
height和line-height设置同一高度。 position+margin：设置父元素:position: relative，子元素height: 100px;position:absolute;top: 50%; margin: -50px 0 0 0;（定高）position+transform：设置父元素position:relative,子元素：position: absolute;top: 50%;transform: translate(0, -50%);（不定高）- 百搭flex布局(ie10+)，设置父元素
display:flex;align-items: center;（不定高）
40.如何实现左右等高布局
table布局兼容性最好，当然flex布局的align-items: stretch;也行
table：会作为块级表格来显示（类似 <table>）
table-row：浏览器会默认创建一个表格行（类似<tr>）
table-cell：作为一个表格单元格显示（类似 <td> 和 <th>）
<div class="layout">
<div class="layout left">left</div>
<div class="layout right">center</div>
</div>
<style>
.layout{
display: table;
width: 100%;
}
.layout div{
display: table-cell;
}
.layout .left{
width: 50%;
height: 200px;
background: red;
}
.layout .right{
width: 50%;
background: yellow;
}
</style>
<div class="flex-container">
<div class="item item1">左侧内容</div>
<div class="item item2">右侧内容</div>
</div>
.flex-container {
display: flex;
flex-direction: row;
align-items: stretch;//
}
.item {
flex: 1;
padding: 10px;
}
.item1 {
background-color: #f6f6f6;
}
https://www.jianshu.com/p/47594ca109a8
41.line-height和heigh区别
line_height是行高的意思，它决定了元素中文本内容的高度，height则是定义元素自身的高度
- height:表示行高
- line-height:表示每行文字所占的高度
1.height:
<style>
ul{
background-color：red;
font-size:10px;
height:50px;
width:10px;
}
li{
display:inline-block;
}
</style>
<title>Tile<title>
<body>
<ul>
<li><a href="#">hello</a></li>
<li><a href="#">文件夹</a></li>
<li><a href="#">hhhh</a></li>
</ul>
</body>
2.行高为50px和文字高度为20px情况：
<style type="text/css">
ul{
background-color:gray;
font-size:20px;
line-height:50px;
width:50px;
}
li{
display:inline-block;
}
</style>
<title>Title</title>
<body>
<ul>
<li><a href="#">hello</a></li>
<li><a href="#">文件夹</a></li>
<li><a href="#">hhh</a></li>
</ul>
</body>
3.设置了文字高度和文字大小一样的此时满屏显示
<style>
ul{
background-color:gray;
font-size:50px;
line-height:50px;
width:50px;
}
li{
display:inline-block;
}
</style>
<title>Title</title>
<body>
<ul>
<li><a href="#">hello</a></li>
<li><a href="#">文件夹</a></li>
<li><a href="#">hhh</a></li>
</ul>
</body> 
“行高”顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离。
CSS中起高度作用的就是height以及line-height！如果一个标签没有定义height属性(包括百分比高度)，那么其最终表现的高度一定是由line-height起作用
line-height 与 height 的区别 - 远征i - 博客园
42.什么是CSS reset？
HTML标签在浏览器中都有默认的样式，不同的浏览器的默认样式之间存在差别。例如ul默认带有缩进样式，在IE下，它的缩进是由margin实现的，而在Firefox下却是由padding实现的。开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题，影响开发效率。现在很流行的解决方式是一开始就将浏览器的默认样式全部覆盖掉，这就是css reset。
前端面试：什么是css reset - 明烟雨任 - 博客园
43.BFC理解（BFC是什么？能解决什么问题？）
BFC 全称为 block formatting context，中文为“块级格式化上下文”。它是一个只有块级盒子参与的独立块级渲染区域，它规定了内部的块级盒子如何布局，且与区域外部无关。
BFC触发条件(规则)：
- 根元素，即html
- 浮动元素，float的值不为none（默认）
- position的值为absolute或fixed
- overflow的值不为visible（默认）
- display的值为inline-block、table-cell、table-caption
BFC特性：
- 内部的Box会在垂直方向上一个接一个放置。
- BFC可以解决margin重叠。（重点）
- 每个元素的margin box 的左边，与包含块border box的左边相接触。
- BFC不与float box重叠。（可用于清浮动）
- BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
- 计算BFC的高度时，浮动元素也会参与计算。（重点）
BFC全称：Block Formatting Context，译为块级格式化上下文是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
个人理解：
- BFC是一个独立的布局环境，BFC内部的元素与外部互不影响
- 可以通过一些条件触发BFC，从而实现布局上的需求或解决一些问题
- 可以将BFC想象成一个工具，无需探究其义，只要着重理解其功能
能够解决div浮动造成的遮盖问题【overflow:hidden; 触发bfc来解决遮挡问题】
BFC是什么？BFC有什么用？看完全明白 - qs-cnblogs - 博客园
层叠上下文
IFC
IFC也是一种布局规则，inline元素和inline-block符合IFC的布局规则。
- 框会从包含块的顶部开始，一个接一个地水平摆放。
- 摆放这些框时，它们在水平方向的 内外边距+边框 所占用的空间都会被考虑； 在垂直方向上，这些框可能会以不同形式来对齐： 水平的margin、padding、border有效，垂直无效。不能指定宽高;
- 行框的宽度是 由包含块和存在的浮动来决定; 行框的高度 由行高来决定
44.rgba()和opacity的透明效果有什么不同？rgba()和opacity都能实现透明效果
- opacity作用于元素，以及元素内的所有内容的透明度
- rgba()只作用于元素的颜色或其背景色（设置rgba透明的元素的子元素不会继承透明效果！）
opacity 父元素是0.5 子元素是1 透明度子元素是多少
当父元素设置了 opacity: 0.5 时，子元素的透明度会受到父元素透明度的影响。这意味着子元素的透明度是相对于父元素的。在这种情况下，子元素的最终透明度是父元素透明度和子元素自身设置的透明度的乘积。
假设父元素的透明度是 0.5，子元素的透明度是 1，那么子元素的最终透明度计算如下：
父元素透明度 * 子元素透明度 = 0.5 * 1 = 0.5
因此，子元素的最终透明度为 0.5。
46.用过哪些布局 css
1.单列布局 (普通布局:头部、内容、底部）
2.内容居中
49.CSS3动画
transform(变形）
对元素进行旋转：rotate(deg)，
缩放：scale(x,y)，
移动：translate(x,y)，
矩形变形：matrix
倾斜：skew(deg,deg)
举例子：transform: translateX(-50%);
transform不会触发回流和重绘
transition：设置过渡属性
- transition-property:设置过渡效果的名称(transition-property:width;)
transition-property（过渡属性name）
- transition-duration:完成过渡效果需要多少秒或毫秒(transition-duration: 5s;)
- transition-timing-function：规定速度效果的速度曲线(transition-timing-function: linear;)
- linear：以匀速过渡。
- ease：慢速开始，中间快速，以慢速结束。
- ease-in：慢速开始。
- ease-out：慢速结束。
- ease-in-out：以慢速开始和结束。
- transition-delay:定义过渡效果何时开始（transition-delay: 2s;）
animation：设置6个动画属性
- animation-name：为 @keyframes 动画规定名称。
- animation-duration:动画完成一个周期所需的时间(animation-duration:2s;)
- animation-timing-function:从开头到结尾以相同的速度来播放动画（animation-timing-function:2s）
- animation-delay:延迟时间（animation-delay:2s;）
- animation-direction：定义是否应该轮流反向播放动画(animation-direction:alternate;)
- 有 normal（正常顺序）、alternate（交替运行）、reverse（反向运行）以及 alternate-reverse（交替反向运行）四种模式。
- animation-play-state：定义动画是否正在运行或暂停，可能的值为 running（运行）、paused（暂停）
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:mymove;
animation-duration:5s;
/* Safari and Chrome */
-webkit-animation-name:mymove;
-webkit-animation-duration:5s;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation-name 属性。</p>
<div></div>
<p><b>注释：</b>始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。</p>
</body>
</html>
70.CSS 动画和 JS 实现动画分别有哪些优缺点？
1. CSS动画
优点
- 浏览器可以对动画进行优化
- 代码相对简单,性能调优方向固定
- 对于帧速表现不好的低版本浏览器，
CSS3可以做到自然降级，而JS则需要撰写额外代码
缺点
- 运行过程控制较弱,无法附加事件绑定回调函数
- 代码冗长，想用
CSS实现稍微复杂一点动画,最后CSS代码都会变得非常笨重
2. JS 动画
优点
- 控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。
- 动画效果比
css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有js动画才能完成 CSS3有兼容性问题，而JS大多时候没有兼容性问题
缺点
- 代码的复杂度高于
CSS动画 JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况
50.什么东西会引起回流重绘
回流：
- 添加或删除可见的元素
- 元素位置发生变化
- 元素尺寸发生变化（包括外边距，内边距，边框大小，高度和宽度等）
重绘：
- 触发回流一定会发生重绘，除此之外：
- 颜色的修改
- 文本方向的修改
51.css网格布局（Grid Layout）
【CSS 网格布局 (Grid Layout )】_Hey_Coder的博客-CSDN博客
【前端｜CSS系列第4篇】CSS布局之网格布局_前端 网格布局-CSDN博客
属性：
display: grid; // 网格布局
grid-template-columns:定义每一列的列宽
gris-template-rows:定义每一行的行高
repeat():重复的值
grid-template-columns: repeat(3, 33.33%);
grid-column-gap：网格元素的间距大小
fr单位：相等宽度的轨道，这些轨道会随着可用空间增长和收缩
display: grid;
width: 100%;
height: 100%;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
margin-top: 40px;
grid-row-gap: 35px;
grid-column-gap: 20px;52.流式布局（百分比布局） 也称非固定像素布局
通过盒子的宽度设置成百分比根据屏幕的宽度进行收缩，不受固定像素的限制，内容向两侧填充
在早期用来应对不同尺寸的PC端，如今也是移动端开发使用比较常见的布局方式
流式布局的特点就是采用display：flex；来控制整体布局，文字会随着屏幕的宽度自动延伸，弹性控件的空间会随着屏宽逐渐加大但不会自动增大，图片采用百分比进行缩放。
max-*、min-*
百分比布局经常搭配这两个使用
比如所选区域占宽75%，但是将视觉饰扣调小又需限制其最小宽度，所以往往通过min-width限制，在定义图片时往往使用max-width等于其宽度来防止图片拉伸变形
如：
body{
margin: 0 auto;
width: 100%;
min-width: 320px;
max-width: 640px;
font-size: 14px;
font-family: -apple-system,Helvetica, sans-serif;
color: #666;
line-height: 1.5;
}
优点：通过百分比设置宽度，可以自适应不同尺寸屏幕
缺点：高度和文字大小都是通过px固定取值，所以如果当显示屏幕过大或过小可能会导致某些页面元素被拉的很长很扁，不能正常显示。
53.rem布局
单位：
em：相对单位，使用较少，1em等于当前元素或父元素所设置的font-size大小的值，例如父元素当前字体大小为16px，则子元素或者父元素的1em大小就是16px
rem：相对单位，应用比较多，1rem等于根元素（html元素）的font-size值
vw/vh：应用较多，把屏幕分成100份，1vw等于屏幕宽的1%，那么1vh就是屏幕高度的1%，一般去设置vw的大小值
那么动态去设置font-size的值那？
目前我所学到的有两种方法也是比较常见的方法。
我们以设计稿按照iPhone6来设计为例 即屏幕宽度像素为375px
方法一、通过JavaScript获取屏幕宽度
方法二、在css文件中添加如下语句
45.px和em的区别
- px的值是固定的
- em得值不是固定的，会继承父级元素的字体大小。
- 浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。、
描述一个”reset”的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？
body,div,dl,dt,dd,del,ul,ol,li,h1,h2,h3,h4,h5,h6,input,p,figure{padding: 0;margin: 0;}
a{text-decoration: none;}
ul,ol{list-style: none;}
img{border: 0;}
h1,h2,h3,h4,h5,h6{font-size: 100%;font-weight: normal;font-style: normal;}
.clearfix{zoom:1;}
.clearfix:after{content:"",display: block;height: 0;visibility: hidden;clear: both;}
Normalize.css 保留浏览器原有的样式并且做到每个浏览器显示一致(没有重置所有的样式风格，但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。)
CSS Reset 相反吧浏览器默认样式全部重置
http://jerryzou.com/posts/aboutNormalizeCss/56.如何让谷歌浏览器适配更小的字体（默认最小是12px）?
使用缩放，例如transform:scale(0.8)来设置比12px更小的字体。
vue 转换px 为rem Vue项目自动转换 px 为 rem的实现方法
1.用postcss-pxtorem插件
2. 创建一个rem.js文件夹；在main.js中引入rem.js文件，查看页面html节点，是否被自动添加font-size
// 基准大小
const baseSize = 32
// 设置rem函数
function setRem(){
// 当前页面宽度相对于750宽的缩放比例，根据自己需求更改
const scale = document.documentElement.clientWidth / 750
// 设置页面根节点字体大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置rem
window.onresize = function () {
setRem()
}
57.为什么有时候用translate来改变位置而不是定位？
translate是transform的一个值。改变transform或者opacity不会触发浏览器重新布局，或者重绘，只会触发复合。而改变绝对定位会触发回流，进而触发重绘，所以说在使用绝对定位时会触发重绘和回流操作。
58.什么是z-index？
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
- auto——默认。堆叠顺序与父元素相等。
- number——设置元素的堆叠顺序。
- inherit——规定应该从父元素继承 z-index 属性的值。
z-index属性什么时候会失效？
通常 z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。z-index元素的position属性需要是relative，absolute或是fixed。
z-index属性在下列情况下会失效：
-
父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或static；
-
元素没有设置position属性为非static属性。解决：设置该元素的position属性为relative，absolute或是fixed中的一种；
-
元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block；
59.什么是CSS Sprite（“精灵图”）
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中。
再利用CSS的"background-image"，“background-repeat”，"background-position"的组合进行背景定位，background-position可以用数字精确的定位
https://blog.csdn.net/wshwsh_/article/details/131948285出背景图片的位置
60.使用CSS Sprites的好处
利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，同时解决了图片命名问题，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
缺点：
- 图片合成比较麻烦；
- 背景设置时，需要得到每一个背景单元的精确位置；
- 维护合成图片时，最好只是往下加图片，而不要更改已有图片。
63.CSS中的 "flex:1;" 是什么意思？
flex 是 flex-grow, flex-shrink 和 flex-basis的简写。
除了auto (1 1 auto) 和 none (0 0 auto)这两个快捷值外，还有以下设置方式：
- 当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：
.item {flex: 1;} .item { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; } 复制代码 - 当 flex 取值为 0 时，对应的三个值分别为 0 1 0%
.item {flex: 0;} .item { flex-grow: 0; flex-shrink: 1; flex-basis: 0%; } 复制代码
更多写法可前往 MDN-flex 查看
65.两个同级的相邻元素之间，有看不见的空白间隔，是什么原因引起的？有什么解决办法？
行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。
解决方法：
- 相邻元素代码代码全部写在一排
- 浮动元素，float:left;
- 在父级元素中用font-size:0;
66.元素竖向的百分比设定是相对于容器的高度吗？
当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度
67.atom css是什么？有哪些优点？
Atom CSS：原子CSS，意思是一个类只干一件事。
不同于大家常用的BEM这类规则，原子css就是拆分，所有 CSS 类都有一个唯一的 CSS 规则
优点
-
减少了css体积，提高了css复用，减少起名的复杂度
缺点
-
增加了记忆成本。将css拆分为原子之后，你势必要记住一些class才能书写，哪怕tailwindcss 提供了完善的工具链，你写background，也要记住开头是bg。
-
增加了html结构的复杂性。当整个dom都是这样class名，势必会带来调试的麻烦，有的时候很难定位具体css问题
69.如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。
71.CSS 加载会造成阻塞吗？
先说下结论：
- css加载不会阻塞DOM树的解析
- css加载会阻塞DOM树的渲染
- css加载会阻塞后面js语句的执行
为了避免让用户看到长时间的白屏时间，我们应该尽可能的提高css加载速度，比如可以使用以下几种方法:
-
对css进行压缩(可以用很多打包工具，比如webpack,gulp等，也可以通过开启gzip压缩)
-
减少http请求数，将多个css文件合并，或者是干脆直接写成内联样式(内联样式的一个缺点就是不能缓存)
68.CSSOM树和DOM树是同时解析的吗？
浏览器会下载 HTML 解析页面生成 DOM 树，遇到 CSS 标签就开始解析 CSS，这个过程不会阻塞，但是如果遇到了 JS 脚本，此时假如 CSSOM 还没有构建完，需要等待 CSSOM 构建完，再去执行 JS 脚本，然后再执行 DOM 解析，此时会阻塞。
75.为什么height:100%会无效？
对于普通文档流中的元素，百分比高度值要想起作用，其父级必须有一个可以生效的高度值
原因是如果包含块的高度没有显式指定，并且该元素不是绝对定位，则计算值为auto，因为解释成了auto，所以无法参与计算。
使用绝对定位的元素会有计算值，即使祖先元素的height计算为auto也是如此。
76.min-width/max-width 和 min-height/max-height 属性间的覆盖规则？
min-width > max-width > width
78.overflow:scroll时不能平滑滚动的问题怎么处理？
-webkit-overflow-scrolling: touch;
// 是因为这行代码启用了硬件加速特性，所以滑动很流畅79.1像素边框问题
原因：有些手机分辨率比较高，是二倍屏或者三倍屏，在 CSS 中定义 border 为 1px，这些手机可能是两个物理像素或者是三个物理像素的高度（即看起来比 1px 粗）。
解决方法：通过背景图片实现、通过 transform:scale(0.5) 实现、通过 viewport + rem 实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 50px;
position:relative;
}
#box1{
border-bottom: solid 1px black;
}
#box2::after{
content: '';
position: absolute;
width: 100%;
height: 1px;
background: black;
bottom: 0;
left: 0;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
#box2::after{
transform: scaleY(0.5);
}
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
#box2::after{
transform: scaleY(0.33333);
}
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
83.在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？
dns缓存，cdn缓存（暂时先不了解），浏览器缓存，服务器缓存。
dns缓存简单点的说就是当我们使用电脑访问某个网址的时候,需要DNS服务器解析，并且把这个网址的ip临时储存起来，这样你下次访问这个网址的时候就可以直接解析，提高了访问速度，这就是DNS缓存
84.链接的打开方式有几种，分别是什么？
- target="_self":当前窗口中打开
- target="_blank":在新窗口中打开
- target="_parent":在父窗口中打开
- target="_top":在顶级窗口中打开
下面不用考===========
85.css实现圆角div，在不同分辨率屏幕中居中显示
1.border-radius:5px // 实现div为5px的圆角div
2.用css实现200*200的div在不同分辨率屏幕上下左右居中css定位的使用
解题思路：
不同屏幕：
- 只能使用绝对定位
- 绝对定位标签是以左上角为起点
- 中心点是高*0.5，宽*0.5
- 不要忘记写z轴的高度
position：absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
z-index: 1000;88.知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？
微格式（Microformats）是结构化数据的开放标准。
优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。（应用范例：豆瓣，有兴趣自行google）
81.content与替换苏的关系
content属性生成的对象称为“匿名替换元素”。
（1）我们使用content生成的文本是无法选中、无法复制的，好像设置了user select:none声明一般，但是普通元素的文本却可以被轻松选中。同时，content生成的文本无法被屏幕阅读设备读取，也无法被搜索引擎抓取，因此，千万不要自以为是地把重要的文本信息使用content属性生成，因为这对可访问性和SEO都很不友好。
（2）content生成的内容不能左右:empty伪类。
（3）content动态生成值无法获取。
82.margin:auto的填充规则
margin的'auto'可不是摆设，是具有强烈的计算意味的关键字，用来计算元素对应方向应该获得的剩余间距大小。但是触发margin:auto计算有一个前提条件，就是width或height为auto时，元素是具有对应方向的自动填充特性的。
（1）如果一侧定值，一侧auto，则auto为剩余空间大小。
（2）如果两侧均是auto，则平分剩余空间。
73.letter-spacing 与 word-spacing 的区别？
letter-spacing作用于所有字符，但word-spacing仅作用于空格字符。换句话说，word-spacing的作用就是增加空格的间隙宽度。
74.无依赖绝对定位是什么？
没有设置left/top/right/bottom属性值的绝对定位称为“无依赖绝对定位”。无依赖绝对定位其定位的位置和没有设置position:absolute时候的位置相关。
Transform:它和width、left一样，定义了元素很多静态样式实现变形、旋转、缩放、移位及透视等功能，通过一系列功能的组合我们可以实现很炫酷的静态效果（非动画)。48.transform？animation？区别?animation-durationtransform？animation？区别?animation-duration
Animation:作用于元素本身而不是样式属性,属于关键帧动画的范畴，它本身被用来替代一些纯粹表现的javascript代码而实现动画,可以通过keyframe显式控制当前帧的属性值.
animation-duration：规定完成动画所花费的时间，以秒或毫秒计。
41.animation对应的属性
写法：animation: name duration timing-function delay iteration-count direction;
下面是对应的属性的介绍
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
42.transition?
css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值 注意区别transform，transform是进行2D转换的 如移动，比例化，反过来，旋转，和拉伸元素。
52.对requestAnimationframe的理解
实现动画效果的方法比较多，Javascript 中可以通过定时器 setTimeout 来实现，CSS3 中可以使用 transition 和 animation 来实现，HTML5 中的 canvas 也可以实现。除此之外，HTML5 提供一个专门用于请求动画的API，那就是 requestAnimationFrame，顾名思义就是请求动画帧。
MDN对该方法的描述：
window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。
语法： window.requestAnimationFrame(callback); 其中，callback是下一次重绘之前更新动画帧所调用的函数(即上面所说的回调函数)。该回调函数会被传入DOMHighResTimeStamp参数，它表示requestAnimationFrame() 开始去执行回调函数的时刻。该方法属于宏任务，所以会在执行完微任务之后再去执行。
取消动画： 使用cancelAnimationFrame()来取消执行动画，该方法接收一个参数——requestAnimationFrame默认返回的id，只需要传入这个id就可以取消动画了。
2022热门CSS面试题附答案共3638题-面试题库-面试哥
实现三列布局
CSS如何实现三列布局？实现三列布局的3种方法（代码示例）-css教程-PHP中文网
62.介绍css3中position:sticky
51.transform动画和直接使用left、top改变位置有什么优缺点
52.png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？（不重要）
- png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可以用。
- jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
- gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.
- webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。
13. CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？(不重要)
当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。
- chrome中，使用collapse值和使用hidden没有区别。
- firefox，opera和IE，使用collapse值和使用display：none没有什么区别。
15. position跟display、overflow、float这些特性相互叠加后会怎么样？(了解即可)
display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。
类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。
21.浏览器是怎样解析CSS选择器的？（不重要--理解就好）
CSS选择器的解析是从右向左解析的，为了避免对所有元素进行遍历。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。
而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。
22.在网页中的应该使用奇数还是偶数的字体？为什么呢？（不重要）
使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。
23.margin和padding分别适合什么场景使用？（不重要）
何时使用margin：
需要在border外侧添加空白
空白处不需要背景色
上下相连的两个盒子之间的空白，需要相互抵消时。
何时使用padding：
需要在border内侧添加空白
空白处需要背景颜色
上下相连的两个盒子的空白，希望为两者之和。
兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决
兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决。
24. 元素竖向的百分比设定是相对于容器的高度吗？
当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
25.全屏滚动的原理是什么？用到了CSS的哪些属性？(不重要)
- 当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
- overflow：hidden；transition：all 1000ms ease；
28.你对line-height是如何理解的？（不重要）
行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。
单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。
多行文本垂直居中：需要设置display属性为inline-block。
29.怎么让Chrome支持小于12px 的文字？
p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例30.让页面里的字体变清晰，变细用CSS怎么做？(不重要)
-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。
31.li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。
解决方法：
- 可以将<li>代码全部写在一排
- 浮动li中float：left
- 在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px
一个盒子不给宽度和高度如何水平垂直居中？
实现一个不设置宽高的盒子水平垂直居中的方法_syx_12的博客-CSDN博客
在网页中的应该使用奇数还是偶数的字体？为什么呢？
偶数字号相对更容易和 web 设计的其他部分构成比例关系
写一个左中右布局占满屏幕，其中左、右俩块固定宽200，中间自适应宽，要求先加载中间块，请写出结构及样式。
<div id="left">我是左边</div>
<div id="center">我是中间</div>
<div id="right">我是右边</div>
html,body{ margin: 0px;width: 100%; }
#left,#right{width: 200px;height: 200px;background-color: aqua;
position: absolute;}
#left{left: 0;top:0;}
#right{right: 0;top:0;}
#center{margin: 0 200px;background-color: blue;height: 200px;}44.水平垂直居中
两栏布局,左边固定,右边自适应,左右不重叠
flex做自适应布局很容易，但兼容性不好，这里统一不用flex布局
.left{
float:left;
width:300px;
margin-right: 10px;
background: red;
}
.right{
overflow: hidden; /* 创建BFC */
background: yellow;
}ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
有哪项方式可以对一个DOM设置它的CSS样式？
- 外部样式表，引入一个外部css文件
- 内部样式表，将css代码放在 head 标签内部
- 内联样式，将css样式直接定义在 HTML 元素内部
CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？
display: none;
visibility: hidden;
height: 0;overflow: hidden;
position: absolute;top: -999em;
opacity: 0;filter: Alpha(opacity=0);
position: absolute;visibility: hidden;用纯CSS创建一个三角形的原理是什么？
#demo{
width: 0;height: 0;border-width: 20px;border-style: solid;
border-color: transparent transparent red transparent;
}
左箭头(尖细)
sReturn{
display: block;content: '';width: 10px;height: 10px;
border-width: 2px;border-style: solid;
border-color: #fff transparent transparent #fff;
position: absolute;top: 50%;left: 15px;
transform: translateY(-50%) rotate(-45deg);
}
左箭头(钝)
#demo1{
width: 10px;height: 10px;
position: absolute;top: 50%;
border-left: 2px solid red;
border-top: 2px solid red;
transform: rotate(-45deg) translateY(-50%);
}浏览器是怎样解析CSS选择器的？
浏览器css匹配核心算法的规则是以 right-to-left 方式匹配节点的。
css中可以让文字在垂直和水平方向上重叠的两个属性是什么？
垂直方向：line-height
水平方向：letter-spacing
关于letter-spacing的妙用知道有哪些么？
可以用于消除inline-block元素间的换行符空格间隙问题。
absolute的containing block(容器块)计算方式跟正常流有什么不同？
无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素
CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？
当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。
如果这个元素是table相关的元素,它的表现却跟display: none一样，也就是说，它们占用的空间也会释放。
在谷歌浏览器里，使用collapse值和使用hidden值没有什么区别。
在火狐浏览器、Opera和IE11里，使用collapse值的效果就如它的字面意思：table的行会消失，它的下面一行会补充它的位置。
针对移动端的布局？
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
布局和PC一样、添加新的meta标签、使用rem或者传统/2方案适配
说说你对rem的理解？
根据改变根节点的font-size值、进行移动端大小的适配
Flexible会将视觉稿分成100份、而每一份被称为一个单位a、同时1rem单位被认定为10a。
1a = 7.5px
1rem = 75px
大漠Rem介绍：https://github.com/amfe/article/issues/17
lib.flexible开源项目：https://github.com/amfe/lib-flexible
<script type="text/javascript" src="js/flexible.js"></script>
@function Rem(){
@return ($px / 75) * 1rem;
}
用法:
.sCutimg{width: Rem(640);height: Rem(685);margin: 0 auto;padding-top: 40px;}
抽离样式模块怎么写，说出思路，有无实践经验？(抽离样式模块、结构分割成一个个小的复用模块、根据业务需求、内容的大小大部分是相对的值。命名规则则是跟其他的所有类型对待区别。比如加上moduleCss的前缀)
元素竖向的百分比设定是相对于容器的高度吗？(容器的宽度)
全屏滚动的原理是什么？用到了CSS的那些属性？
问题反问
1、您说的是哪个浏览器的哪类问题？
2、还是常用浏览的（前端）API差异？
3、Layout渲染差异？
4、谈谈浏览器为什么存在兼容问题？
5、兼容存在的历史原因？
想了解你常用的常见到的常解决到的，或者近期刚刚解决过的一些浏览器兼容问题1、IE低版本的事件怎么绑定？标准怎么绑定？阻止事件的API分别是什么（Pas）
2、jQuery怎么事件委托呢？
3、给你这个方法和这个方法，怎么实现jQuery这种形式的事件委托。
4、不要去了解如何兼容旧 IE，而是要更加符合趋势，关注优秀的、流行的东西。
对过时浏览器的兼容性问题是沉重的知识包袱， 关键是这种知识没有延续性，会影响你学习和使用新技术
5、如果问移动浏览器的兼容性还可以原谅，如果还拿ie8一下说事，立马走人不干了！让面试官满意最好的办法
1、多表达自己，免得让面试官主动问你
2、让对方看到你的发光点
3、一般面试官问一个大而无当的问题多半是他还没想到一个合适的问题，拖延一下时间，你可以和他一起把问题细化。
4、这个其实是需要分类去答，css兼容性网上很多，至于js的兼容性，看看jquery代码里面的注释就可以了
css2.0 和css3.0
答：css3加强了css2的功能，增加了新的属性和新的标签，并且删除了一些冗余的标签，在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了（columns之类的属性）。在效果方面加入了更多的效果(圆角，动画之类的)，还有在盒子模型和列表模块都进行了改进。不过CSS3兼容性不好，只有一些高级版本的浏览器支持。
12.viewport 所有属性 ？
(1)width :设置layout viewport的宽度，为一个正整数，或字符串'device-width';
(2)initial-scale:设置页面的初始缩放值，为一个数字，可以带小数。
(3)minimum-scale:允许用户的最小缩放值，为一个数字，可以带小数。
(4)maximum-scale:允许用户的最大缩放值，为一个数字，可以带小数。
(5)height:设置layout viewport的高度，这个属性对我们并不重要，很少使用
(6)user-scalable:是否允许用户进行缩放，值为‘no’或者‘yes’。
安卓中还支持：target-densitydpi，表示目标设备的密度等级，作用是决定css中的1px 代表多少物理像素
(7)target-densitydpi:值可以为一个数值或者 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个
17.常见兼容性问题？
* png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理。
* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
* 浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。） #box{ float:left; width:10px; margin:0 0 0 100px;} 这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
* 渐进识别的方式，从总体中逐渐排除局部。 首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。 接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
css// .bb{ background-color:#f1ee18; .background-color:#00deff\9; +background-color:#a200ff; _background-color:#1e0bd1; }
* IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用getAttribute()获取自定义属性; Firefox下,只能使用getAttribute()获取自定义属性. 解决方法:统一通过getAttribute()获取自定义属性。
* IE下,event对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性. * 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
* 超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
* 怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。现在可以使用[html5]( http://www.w3.org/TR/html5/single-page.html)推荐的写法：`<doctype html>`
* 上下margin重合问题
ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。
解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。
* ie6对png图片格式支持不好(引用一段脚本处理)
34.手机端上 图片长时间点击会选中图片，如何处理?
οnselect=function() {
return
40.解释在ie低版本下的怪异盒模型和c3的怪异盒模型 和 弹性盒模型?
IE当padding+border的值小于width或者height:
盒模型的宽度=margin(左右)+width（width已经包含了padding和border的值）
盒模型的高度=margin(上下)+height（height已经包含了padding和border的值）
当padding+border的值大于width或者height:
盒模型的宽度=margin(左右)+padding(左右)+border(左右)
盒模型的高度=margin(上下)+padding(上下)+border(上下)+19px （加一个默认行高 19px） 所以相当于是padding+border和width或者height比大小，谁大取谁。
以上几种DOCTYPE都是标准的文档类型，无论使用哪种模式完整定义DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式） CSS3box-sizing有两个值一个是content-box，另一个是border-box。
当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
当设置为box-sizing:border-box时，将采用怪异模式解析计算；
Css3弹性盒模型引入了新的盒子模型—弹性盒模型，该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。使用该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。
168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
