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>