web面试——CSS

CSS盒模型

在HTML页面中的所有元素都可以看成一个盒子
盒子的组成：内容content、内边距padding、边框border、外边距margin
	盒模型类型
		标准盒模型
			margin+border+padding+content
		IE盒模型
			margin+content(paddding+border)
	控制盒模型的模式：box-sizing:content-box(默认值，标准盒模型）、border-box(IE盒模型）	

---

CSS选择器的优先级

CSS的特性：继承性、层叠性、优先级

!important > 行内样式 > id > 类\伪类\属性 > 全局选择器

---

隐藏元素的方法

	display:none; //元素在页面上消失，不占据空间
	opacity:0;//设置了元素的透明度为0，元素不可见，占据空间位置
	visibility:hidden;//让元素消失，占据空间位置，一种不可见状态
	position:absolute;//从当前位置踢出去
	clip-path;//剪切
	

---

px和rem的区别

px是像素，显示器上给我们呈现画面的像素 ，每个像素的大小是一样，是绝对单位长度。
rem,相对单位，相对于html根节点的font-size的值，（直接给html节点的font-size:62.5%;1rem = 10px;)
16px * 62.5% = 10px

重排和重绘的区别

重排（回流 ）：布局引擎会根据所有的样式计算出盒模型在页面上的位置和大小
重绘：计算好盒模型的位置、大小和其他一些属性之后，浏览器就会根据每个盒模型的特性进行绘制.
对DOM的大小、位置进行修改后，浏览器需要重新计算元素的这些几何属性，就叫重排。
对DOM的样式进行修改，比如color和background-color,浏览器不需要重新计算几何属性时，直接绘制了该元素的新样式，就只触发了重绘。

元素水平垂直居中的方式

	定位+margin
	定位+transform
	flex布局
	grid布局
	table布局
	
	
	<div class = "father">
		<div class = "son"></div>
	</div>
	
	 .father{
	width:400px;
	height:400px;
	border:1px solid;
	position:relative;
	}
	.son{
	position:absolute;
	width:200px;
	height:200px;
	background-color: red;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margn:auto;
	}
	
	
	
	 .father{
	width:400px;
	height:400px;
	border:1px solid;
	position:relative;
	}
	.son{
	position:absolute;
	width:200px;
	height:200px;
	background-color:blue;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	
	}
	
	
	
	 .father{
	 display:flex;
	 justify-content:center;
	 align-items:center;
	width:400px;
	height:400px;
	border:1px solid;
	}
	.son{
	width:200px;
	height:200px;
	background-color:black;
	}


   .father{
        width: 400px;
        height: 400px;
        border:1px solid;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    .son{
        display: inline-block; // 如果是内联元素则不需要设置
        width: 200px;
        height: 200px;
        background: red;
    }

    .father{
        width: 400px;
        height: 400px;
        border:1px solid;
        display: grid;  // 设置grid容器
        justify-items:center;
        align-items: center ;

    }
    .son{
        display: inline-block;
        width: 200px;
        height: 200px;
        background: red;

    }

CSS元素哪些可以继承，哪些不可以继承？

CSS三大特性：继承、层叠、优先级
子类可以继承父类元素的样式

 1. 字体属性：font
 2. 文本属性：line-height
 3. 元素可见性：visibility:hidden
 4. 表格布局的属性：border-spacing
 5. 列表的属性：list-style
 6. 页面属性：page
 7. 声音的样式属性

预处理器

预处理器语言增加了变量、函数、混入等强大功能
SASS  LESS
利于维护和扩展。