CSS面试题
面试题：介绍一下CSS的盒子模型
css的盒子模型有哪些：标准盒子模型 、 IE盒子模型
css的盒子模型区别：
标准盒子模型：margin 、border、padding、content
IE盒子模型：margin、content(border + padding + content)
通过css如何转换盒子模型：
box-sizing:content-box //标准盒子模型
box-sizing:border-box //IE盒子模型
面试题：line-height和height的区别？
line-height是每一行文字的高，如果文字换行则整个盒子高度会增大(行数*行高)。
height是一个定值，就是这个盒子的高度。
CSS选择符合有哪些？哪些属性可以继承？
css选择符：
通配()
id选择器()
类选择器(.)
标签选择器(div p h1)
相邻选择器(+)
后代选择器(ul li)
子元素选择器(>)
属性选择器(a[href])
css属性哪些可以继承
文字系列：font-size、color、line-height、text-align..
css属性不可继承属性：
border、padding、margin...
css优先级算法如何计算?
优先级比较：
!important>内联样式>id>class>标签>通配
css权重计算：
第一：内联样式(style) 权重值：1000
第二：id选择器 权重值：100
第二：类选择器 权重值：10
第二：标签&伪元素选择器 权重值：1
第二：通配、>、+ 权重值：0
面试题：用CSS画一个三角形
用边框画(border)
面试题：一个盒子不给宽度和高度如何水平垂直居中？
方式一：
<div class="container">
<div class="main">main</div>
</div>
.container{
display:flex;
justify-content:center;
align-items:center;
width:300px;
height:300px;
border:5px solid #ccc;
}
方式二：
<div class="container">
<div class="main">main</div>
</div>
.container{
position:relative;
width:300px;
height:300px;
border:5px solid #ccc;
}
.main{
position:absolute;
left:50%;
top:50%;
background:red;
transform:translate(-50%,-50%);
}
面试题：display有哪些值？说明他们的作用？
none 隐藏元素
block 把某某元素转换成块元素
inline 把某某元素转换成内联元素
inline-block 把某某元素转换成行内块元素
面试题：对BFC规范(块级格式化上下文：block formatting context)的理解？
BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
1、了解BFC：块级格式化上下文。
2、BFC的原则：如果一个元素具有BFC，那么内部元素再怎么弄，都不会影响到外面的元素。
3、如何触发BFC：
float的值非none
overflow的值非none
display的值为：inline-block 、table-cell
position的值为：absoute、fixed
面试题：清除浮动有哪些方式？
1、触发BFC
2、多创建一个盒子，添加样式：clear:both
3、after方式
ul:after{
content:'',
display:block;
clear:both;
}
面试题：position有哪些值？？分别是根据什么定位的？
static [默认] 没有定位
fixed 固定定位 相对于浏览器窗口进行定位
relative 相对于自身定位 不脱离文档流
absolute 相对于第一个有relative的父元素，脱离文档流。
relative和absolute区别
1、relative不脱离文档流，absolute脱离文档流。
2、relative相对于自身，absolute相对于第一个有relative的父元素。
3、relative如果有left、right、top、bottom ==> left、right
absolute如果有left、right、top、bottom ==>left、right、top、bottom
面试题：写一个左中右布局占满屏幕，其中左、右俩块固定宽200，中间自适应宽，要求先加载中间块、请写出结构以及样式。
<!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>
*{
margin:0;
padding:0;
}
body{
height:100vh;
width:100vw;
}
.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;
}
</style>
</head>
<body>
<div class="container">
<div class="c">
<div style="padding:0 200px">中</div>
</div>
<div class="l">左</div>
<div class="r">右</div>
</div>
</body>
</html>
面试题 什么是CSS reset?
reset.css 是一个css文件 重置css样式的
Normalize.css 为了跨平台一致性，一个css重置库样式 性能会更好
面试题 css sprite（雪碧图）是什么，有什么优缺点？
1、是什么
把多个小图标合并成一张大图片
2、优缺点
优点：减少了http请求的次数 提升了性能
缺点：维护比较差 例如 图片位置进行修改 或者内容宽高进行修改
面试题：display：none 与 visibility:hidden的区别？
1、占用位置的区别
display:none 是不占用位置
visibilit:hidden 虽然隐藏了 但是占用位置
2、重绘和回流的问题
display:none、visibilit:hidden 产生重绘
display:none 还会产生一次回流
回流一定会产生重绘 但是 重绘不一定产生回流
产生回流的情况 ：改变元素的位置（left top）显示隐藏元素。。
产生重绘的情况：样式改变（background、color....）
面试题：opacity和rgba的区别
共同性：实现透明效果
1、opacity 取值范围0到1之间，0表示完全透明 1表示不透明
2、rgba R代表红色 G代表绿色 B 表示蓝色 取值可以在正整数或者百分数之间
表示的透明度 取值0到1 之间
区别：
opacity 会继承父元素的opacity属性，而rgba设置元素的后台元素不会继承不透明属性
