css常见面试题
1、css盒子模型有哪些
1、标准盒子模型：margin、border、padding、content四个模块
2、IE盒子模型：margin、content两个模块，其中content包括（border + padding + content）
通过CSS如何转换盒子模型：使用box-sizing属性
box-sizing:content-box; //标准盒子模型
box-sizing:border-box； //IE盒子模型
2、line-height 和 height 区别
line-height ：指每一行文字的高度，如果文字换行则整个盒子高度会增大（行数*行高）
height ：是一个固定值，指盒子的高度
3、css选择符有哪些？那些属性可以继承？
css选择符：
可以继承的属性：
font-size、color、line-height、text-align…
不可以继承的属性：
border、 padding、 margin
4、css优先级算法如何计算
CSS权重计算：
| 选择器样式 | 权重值 |
|---|---|
| 内联样式 （style） | 1000 |
| id选择器 | 100 |
| 类选择器 | 10 |
| 标签&伪元素选择器 | 1 |
| 通配 （> +） | 0 |
// An highlighted block
var foo = 'bar';
5、css如何画出一个三角形
div{
height: 0;
width: 0;
border-top:100px solid transparent ;
border-bottom:100px solid transparent ;
border-left:100px solid #ccc ;
border-right:100px solid transparent ;
}
6、一个盒子不给宽高如何设置水平垂直居中
<div class="parent">
<div class="child">child</div>
</div>
//方式一
.parent{
height:300px;
width:300px;
border:5px solid #ccc
display:flex;
justify-content:center;
align-items:center
}
.child{
background-color:chocolate;
}
//方式二
.parent{
height:300px;
width:300px;
border:5px solid #ccc
position:relative;
}
.child{
position:absolute;
left:50%;
top:50%;
background-color:chocolate;
transform:translate(-50%,-50%)
}
7、display有那些值？他们有什么作用？
- none : 隐藏元素
- block : 把某某元素转换为块元素
- inline : 把某某元素转换为内联元素
- inline-block : 把某某元素转换为行内块元素
8、对BFC规范的理解？
BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
- 了解BFC: 块级格式化上下文。
- BFC的原则：如果一个元素具有BFC，那么内部元素无论如何变化都不会影响外面的元素。
- 如何触发BFC:
float 的值非 none
overflow 的值非 visible
display 的值为： inline-block、table-cell…
position 的值为：absoute、fixed
9、清除浮动有那些方式？
- 触发BFC
overflow: hidden;
- 添加虚拟标签 after 方式（常用）
ul:after{
content:'',
display:block;
clear:both;
}
清除前：
清除后：
10、position有那些值？分别是根据什么定位的？
| 元素值 | 如何定位 |
|---|---|
| static | [默认] 没有定位 |
| fixed | 固定定位，相对于浏览器窗口进行定位 |
| relative | 相对于自身定位，不脱离文档流 |
| absolute | 相对于第一个有relative 的父元素，脱离文档流 |
relative和absolute的区别
| relative | absolute |
|---|---|
| 不脱离文档流 | 脱离文档流 |
| relative相对于自身 | absolute相对于第一个relative的父元素 |
| relative 如果有left、right、top、bottom,最终页面呈现只会出现left和top的效果 | absolute 如果有left、right、top、bottom,最终页面呈现只会出现所有效果 |
11、写一个左右中布局占满屏幕2，其中左右两块固定宽200，中间自适应宽，要求先加载中间块
<style>
*{
padding: 0;
margin: 0;
}
body{
width: 100vw;
height: 100vh;
}
.container > div{
float: left;
}
.l{
margin-left: -100%;
width: 200px;
height: 100vh;
background: red;
}
.c{
width: 100%;
height: 100vh;
background: pink;
}
.r{
margin-left: -200px; /* 右边有多宽就需要负多少 */
width: 200px;
height: 100vh;
background: blue;
}
.main{
padding: 0 200px;
}
</style>
<div class="container">
<div class="c">
<div class="main">
中
</div>
</div>
<div class="l">左</div>
<div class="r">右</div>
</div>
12、display:none 与 visibility:hidden 的区别
1.占用位置的区别
display:none 不占用位置
visibility:hidden 虽然隐藏了，但是占用位置
<style>
*{
padding: 0;
margin: 0;
}
.sa{
display:none
}
.ba{
visibility:hidden
}
</style>
<h1>111</h1>
<div class="sa" style="height: 100px; width: 100px;" ></div>
<h1>222</h1>
<h1>aaa</h1>
<div class="ba" style="height: 100px; width: 100px;" ></div>
<h1>bbb</h1>
13、opacity 和 rgba 区别
共同性：实现透明效果
- opacity 取值范围0到1之间，0表示完全透明，1表示不透明
- rgba R表示红色，G表示绿色，B表示蓝色，取值可以为正整数或者百分数
区别：继承的区别
opacity 后代元素会继承父元素的opacity 透明属性，而RGBA设置的后代元素不会继承透明属性
<style>
*{
padding: 0;
margin: 0;
}
.o1{
/* background: red;
opacity: .5; */
background: rgba(255,0,0,.5);
}
</style>
<div class="o1">
111
<div class="o2">
222
</div>
</div>
