CSS面试题
CSS3新增了那些特性？
-
CSS3实现圆角:border-radius
-
渐变：gradient
-
新增加很多CSS伪类选择器
：not选择器
：empty选择器
：root选择器
：target选择器
：selection选择器
以下的选择器的说明介绍里有个词叫“一组”。他的意思就是同一父元素下所有元素及文本节点，即为一组。
：nth-of-type(n)
：nth-last-of-type(n)
：first-of-type
：last-of-type
：only-of-type
：only-child
：nth-child()
：nth-last-child()
：enabled
: disabled
：checked
新增CSS3选择器
: element1~element2选择器
：[attribute*=value]选择器
：[attribute^=value]选择器
：[attribute$=value]选择器 -
多背景及背景属性
| 属性 | 作用 |
|---|---|
| background-image | 添加背景图片，可以放多张，用逗号隔开 |
| background-size | 控制背景图的大小 |
| background-origin | 指定背景图像的位置区域 |
| background-clip | 指定背景图从什么位置开始绘制 |
-
rgba() 函数使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。
-
border-image属性是速记属性用于设置border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat 的值。
-
媒体查询可以检测很多内容，其中包括：viewport（视窗）的宽度与高度、设备的宽度与高度、朝向（智能手机横屏，竖屏）、分辨率。
-
多列布局
| 属性 | 说明 |
|---|---|
| column-count | 指定需要分割的列数 |
| column-gap | 指定列与列直接的间隙 |
| column-rule-style | 指定列与列之间的边框样式 |
| column-rule-width | 指定了俩列的边框厚度 |
| column-rule-color | 指定了俩列的边框颜色 |
| column-rule | 是上方三个属性的简写 |
| column-span | 一般用于文章头，指定元素跨多少列 |
| column-width | 指定列的宽度 |
- Animation
- @keyframes规则
- Text-overflow
- @font-face
| 属性 | 描述 |
|---|---|
| font-family | 设置文本的字体名称 |
| font-style | 设置文本的样式 |
| font-variant | 设置文本是否大小写 |
| font-weight | 设置文本的粗细 |
| font-stretch | 设置文本是否横向的拉伸变形 |
| font-size | 设置文本的大小 |
| src | 设置自定义字体的相对路径或者绝对路径。 |
-
Flex弹性盒
弹性盒布局功能主要具有以下几点：屏幕和浏览器窗口大小发生变化时也可以灵活调整布局。
指定伸缩项目沿着主轴或侧轴按比例分配空余空间从而调整伸缩项目的大小。
指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间分配到项目之前、之后或之间。
指定如何将垂直于元素布局轴的额外空间分布到该元素周围。
控制元素在页面上的布局方向。
按照不同标准流所指定的排序方式对屏幕上的元素重新排序。
弹性盒模型中的专业术语：
a. 主轴和侧轴
b. 主/侧轴方向
c. 主/侧轴起点，主/侧轴终点
d. 主侧轴长度
e. 伸缩容器（外层）和伸缩项目（子元素或内容）
弹性盒的使用：
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
效果参考图
H5自适应方案
H5自适应方案大家在网速能找到很多，我个人推荐一种我非常喜欢的方式，就是rem. rem是一种相对单位，它基于html的font-size值来进行调整。
通常我们以750为基准，我们会在header中嵌套一段js脚本，获取手机网页分辨率尺寸除以375，为了方便计算，我们假设750像素下1rem = 100px；所以 我们除以375后需要乘以50.
BFC布局与普通文档流布局区别:
BFC布局规则:
浮动的元素会被父级计算高度(父级元素触发了BFC)
非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC)
margin不会传递给父级(父级触发BFC)
属于同一个BFC的两个相邻元素上下margin会重叠
普通文档流布局:
浮动的元素是不会被父级计算高度
非浮动元素会覆盖浮动元素的位置
margin会传递给父级元素
两个相邻元素上下的margin会重叠
水平居中
-
行内元素
首先看它的父元素是不是块级元素，如果是，则直接给父元素设置text-align: center;<style> #father { width: 500px; height: 300px; background-color: skyblue; text-align: center; } </style> <div id="father"> <span id="son">我是行内元素</span> </div>如果不是，则先将其父元素设置为块级元素，再给父元素设置 text-align: center;
<style> #father { display: block; width: 500px; height: 300px; background-color: skyblue; text-align: center; } </style> <span id="father"> <span id="son">我是行内元素</span> </span> -
块级元素
方案一：(分宽度定不定两种情况)
定宽度：需要谁居中，给其设置 margin: 0 auto;<style> #father { width: 500px; height: 300px; background-color: skyblue; } #son { width: 100px; height: 100px; background-color: green; margin: 0 auto; } </style> <div id="father"> <div id="son">我是块级元素</div> </div>
不定宽度：默认子元素的宽度和父元素一样，这时需要设置子元素为display: inline-block; 或 display: inline;即将其转换成行内块级/行内元素，给父元素设置 text-align: center;
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
text-align: center;
}
#son {
background-color: green;
display: inline;
}
</style>
<div id="father">
<div id="son">我是块级元素</div>
</div>
方案二：使用定位属性
首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%，即让子元素的左上角水平居中；
定宽度：设置绝对子元素的 margin-left: -元素宽度的一半px; 或者设置transform: translateX(-50%);
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}
#son {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
left: 50%;
margin-left: -50px;
}
</style>
<div id="father">
<div id="son">我是块级元素</div>
</div>
不定宽度：利用css3新增属性transform: translateX(-50%);
方案三：使用flexbox布局实现（宽度定不定都可以）
使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
display: flex;
justify-content: center;
}
#son {
width: 100px;
height: 100px;
background-color: green;
}
</style>
<div id="father">
<div id="son">我是块级元素</div>
</div>
垂直居中
-
单行的行内元素
只需要设置单行行内元素的“行高等于盒子的高”即可；<style> #father { width: 500px; height: 300px; background-color: skyblue; } #son { background-color: green; height: 300px; } </style> <div id="father"> <span id="son">我是单行的行内元素</span> </div> -
多行的行内元素
使用给父元素设置display:table-cell;和vertical-align: middle;属即可；<style> #father { width: 500px; height: 300px; background-color: skyblue; display: table-cell; vertical-align:middle; } #son { background-color: green; } </style> <div id="father"> <span id="son">我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素</span> </div>
水平垂直居中
-
已知高度和宽度的元素
方案一：设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;<style> #father { width: 500px; height: 300px; background-color: skyblue; position: relative; } #son { width: 100px; height: 100px; background-color: green; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } </style> <div id="father"> <div id="son">我是块级元素</div> </div>
方案二：设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}
#son {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
</style>
<div id="father">
<div id="son">我是块级元素</div>
</div>
- 未知高度和宽度的元素
方案一：使用定位属性
设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}
#son {
background-color: green;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
</style>
<div id="father">
<div id="son">我是块级元素</div>
</div>
方案二：使用flex布局实现
设置父元素为flex定位，justify-content: center; align-items: center;
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
display: flex;
justify-content: center;
align-items: center;
}
#son {
background-color: green;
}
</style>
<div id="father">
<div id="son">我是块级元素</div>
</div>
清除浮动的几种方式，各自的优缺点？
①给父元素单独定义高度
优点：简单快速、代码少。
缺点：无法进行响应式布局。
②在标签结尾处加空div标签<div style="clear: both"></div>
优点：简单快速、代码少，兼容性较高。
缺点：增加空标签，不利于页面优化。
③父级定义overflow:hidden
优点：简单快速、代码少，兼容性较高。
缺点：超出部分被隐藏了，在布局的时候要注意。
④父级定义class="clearfix"，使用after伪类和zoom
.clearfix:after{content:"";display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
.clearfix{zoom:1;}
优点：写法固定，没有多余结构，兼容性高。
缺点：代码多。
用纯CSS创建一个三角形的原理是什么
.box{
width:0px;
height:0px;
border: 50px solid transparent;
border-left:50px solid #ef4848;
}
三栏布局的方法有哪些分别描述一下
-
Flex 布局
<style> .container{ display:flex; justify-content: center; height: 200px; background: #eee; } .left { width: 200px; background-color: red; height: 100%; } .main { background-color: yellow; flex: 1; } .right { width: 200px; background-color: green; } </style> <div class="container"> <div class="left">1</div> <div class="main">2</div> <div class="right">3</div> </div> -
float布局
<style> .left { float: left; width: 100px; height: 200px; background-color: red; } .right { float: right; width: 100px; height: 200px; background-color: yellow; } .main { background-color: green; height: 200px; margin-left: 120px; margin-right: 120px; } .container { border: 1px solid black; } <div class="container"> <div class="left"></div> <div class="right"></div> <div class="main"></div> </div>
优势：简单
劣势：中间部分最后加载，内容较多时影响体验
- BFC规则
BFC(块格式化上下文)规则规定：BFC不会和浮动元素重叠。所以如果将main元素设定为BFC元素即可：
<style>
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: right;
width: 100px;
height: 200px;
background-color: yellow;
}
.main {
background-color: green;
height: 200px;
overflow: hidden;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
-
圣杯布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圣杯布局</title> <style type="text/css"> body { margin: 0; padding: 0; } header, footer { height: 100px; width: 100%; background-color: #bbbbbb; } .container { height: 300px; padding-left: 200px; padding-right: 300px; } .container div{ float: left; /* 圣杯布局 */ position:relative; } .left { width: 200px; height: 300px; background-color: #DC698A; margin-left: -100%; /* 圣杯布局 */ left:-200px; } .middle { width: 100%; height: 300px; background-color: #3EACDD; } .right { width: 300px; height: 300px; background-color: #8CB08B; margin-left: -300px; /* 圣杯布局 */ right:-300px; } </style> </head> <body> <header>头部</header> <div class="container"> <div class="middle">中间栏</div> <div class="left">左栏</div> <div class="right">右栏</div> </div> <footer>底部</footer> </body> </html> -
双飞翼布局
<!DOCTYPE html> <html lang="en"> <head> <style> .main { float: left; width: 100%; } .content { height: 200px; margin-left: 110px; margin-right: 220px; background-color: green; } .main::after { display: block; content: ''; font-size: 0; height: 0; clear: both; zoom: 1; } .left { float: left; height: 200px; width: 100px; margin-left: -100%; background-color: red; } .right { width: 200px; height: 200px; float: left; margin-left: -200px; background-color: blue; } </style> </head> <body> <div class="main"> <div class="content"></div> </div> <div class="left"></div> <div class="right"></div> </body> </html> -
绝对定位
<style type="text/css"> .container { } .middle { position: absolute; left: 200px; right: 200px; height: 300px; background-color: yellow; } .left { position: absolute; left: 0px; width: 200px; height: 300px; background-color: red; } .right { position: absolute; right: 0px; width: 200px; background-color: green; height: 300px; } </style> </head> <body> <div class="container"> <div class="middle">fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</div> <div class="left"></div> <div class="right"></div> </div> </body>
css3实现0.5px的细线
<style>
.line {
position: relative;
}
.line:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
background-color: #000000;
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
}
</style>
<div class="line"></div>
盒模型
·标准盒模型 margin, border, padding, content
·IE盒模型 border, padding, content
·通过 box-sizing属性改变元素的盒模型
CSS如何设置这两种模型：
box-sizing:content-box;
box-sizing:border-box; /IE模型/
js如何设置获取盒模型对应的宽和高
1、dom.style.width/height // 只能取到内联样式
2、dom.currentStyle.width/height // 取到渲染后的样式（只有IE支持）
3、window.getComputedStyle(dom).width/height // 兼容firefox，chrome，兼容性更好
4、dom.getBoundingClientRect().width/height // 运行后的宽度。
CSS选择器
·id选择器（#myId）
·类选择器（.myClassName）
·标签选择器（div, h1, p）
·后代选择器（h1 p）
·相邻后代选择器（子）选择器（ul > li）
·兄弟选择器（li~a）
·相邻兄弟选择器（li+a）
·属性选择器（a[rel="external"]）
·伪类选择器（a:hover, li:nth-child）
·伪元素选择器（::before, ::after）
·通配符选择器（*）
[详细解释]:(https://www.runoob.com/cssref/css-selectors.html)
::before 和 :after 中双冒号和单冒号的区别？这2个伪元素的作用？
·在 CSS3 中 : 表示伪类， :: 表示伪元素
·想让插入的内容出现在其他内容前，使用::befroe。否则，使用::after
CSS中哪些属性可以继承？
·每一个属性在定义中都给出了这个属性是否具有继承性，一个具有继承性的属性会在没有指定值的时候，会使用父元素的同属性的值
来作为自己的值。
·一般具有继承性的属性有，字体相关的属性，font-size和font-weight等。
·文本相关的属性，color和text-align等。
·表格的一些布局属性、列表属性如list-style等。
·还有光标属性cursor、元素可见性visibility。
·当一个属性不是继承属性的时候，我们也可以通过将它的值设置为inherit来使它从父元素那获取同名的属性值来继承。
浏览器兼容性有哪些？
① 浏览器默认的 margin 和 padding 不同
解决：加一个全局 *{ margin: 0; padding: 0; }来统一
② 谷歌中文界面下默认会将小于12px 的文本强制按照12px显示
解决：使用-webkit-transform:scale(.75);收缩的是整个span盒子大小，这时候，必须将span准换成块元素。
③ 超链接访问过后hover样式就不会出现了，被点击访问过的超链接样式不再具有hover 和active 了
解决：改变css 属性的排列顺序L-V-H-A
CSS优化，提高性能的方法有哪些？
·加载性能：
① CSS 压缩：将写好的CSS 进行打包压缩，可以减少很多的体积。
② CSS单一样式：当需要下边距和左边距的时候，很多时候选择：margin: top 0 bottom 0;
但margin-top: top;margin-bottom: bottom;执行的效率更高。
·选择器性能：
① 关键选择器。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。
src与href的区别？
1、href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
2、src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
stylus/sass/less区别
均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性
Scss和LESS语法较为严谨，LESS要求一定要使用大括号“{}”，Scss和Stylus可以通过缩进表示层次与嵌套关系
Scss无全局变量的概念，LESS和Stylus有类似于其它语言的作用域概念
Sass是基于Ruby语言的，而LESS和Stylus可以基于NodeJS NPM下载相应库后进行编译；