css基础了解（面试）

1、CSS盒模型
 

盒模型都是由四个部分组成的，分别是margin、border、padding和content
标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同：

W3C标准盒模型的width和height属性的范围只包含了content，
IE盒模型的width和height属性的范围包含了border、padding和content。

可以通过修改元素的box-sizing属性来改变元素的盒模型：

box-sizing: content-box W3C标准盒模型
box-sizing: border-box IE盒模型

2、css级别顺序

!important -> 行内样式 -> ID选择器 -> 类选择器 -> 标签- > 通配符 -> 继承 -> 浏览器默认属性

 3、css有哪些属性不会被继承

1、display：指定元素如何显示生成的框的类型，如 block、inline、none 等
2、background: 指定元素的背景属性，如 background、background-color、background-image
3、float：指定元素的浮动方式，如 left、right、clear
4、clear：指定元素旁边不允许浮动的元素，如 left、right、both、none
5、position：指定元素的定位方式，如 relative、absolute、fixed 等
6、z-index：指定元素的堆叠顺序
7、overflow：指定元素内容溢出时的处理方式，如 visible、hidden、scroll、auto 等
8、vertical-align：指定元素文本属性，如 baseline、inherit等
9、text-decoration：指定元素文本属性，如 line-through、overline等
10、columns：指定多列布局的列数、宽度等属性
......

 3、css单位中px、em 和 rem 的区别？

1、px 像素（Pixel）。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一
个虚拟长度单位，是计算机系统的数字化图像长度单位，在同一设备上像素所代表的的物理长度是固定不变的(绝对性)
2、em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字 体尺
寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小因此并不是一
个固定的值
例如：父元素的字体大小为40px，那么子元素1em就代表字体大小和父元素一样为40px
3、rem 是 CSS3 新增的一个相对单位（root em，根 em），使用 rem 为元素设定字体大小
时，仍然是相对大小，但相对的只是 HTML 根元素
4、% 是相对于父元素的尺寸
5、vw 相对单位，根据窗口的宽度分成100份，1vw就是一份，100vw就是整个窗口的宽度
6、vh 相对单位，同vw，根据窗口的高度分成100份，1vh就是一份，也就是高度的1%

4、display：none 与 visibility：hidden 的区别？

元素隐藏和显示最常用的为 display:none 和 visibility:hidden
dispaly:none 设置该属性后，该元素下的元素都会隐藏，占据的空间消失
visibility:hidden 设置该元素后，元素虽然不可见了，但是依然占据空间的位置
区别 
1、visibility 具有继承性，其子元素也会继承此属性，若设置 visibility:visible，则子元
素会显示
2、visibility 不会影响计数器的计算，虽然隐藏掉了，但是计数器依然继续运行着
3、在 CSS3 的 transition 中支持 visibility 属性，但是不支持 display，因为 transition 可以延迟执行，因此配合 visibility 使用纯 CSS 实现 hover 延时显示效果可以提高用户体验
4、display:none 会引起回流(重排)和重绘 visibility:hidden 会引起重绘

5、position的值有哪些，分别有什么作用？

static：静态定位，不脱离文档流，top，right，bottom，left 等属性不生效
fixed：固定定位，脱离文档流
absolute：绝对定位，脱离文档流，不在占据空间，左右 margin为 auto 将会失效；我们通过 left、top、bottom、right 来决定元素位置
relative：相对定位，不脱离文档流，左右 margin 为 auto 仍然有效

6、如何实现一个盒子水平垂直居中?

1、利用定位

<style>
.parent { 
    width: 500px; 
    height: 500px; 
    border: 1px solid #000; 
    position: relative; 
}
.child { 
    width: 100px; 
    height: 100px; border: 1px solid #999; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; 
    margin-left: -50px; 
} 
</style>

2、利用 margin:auto

<style>
.parent { 
	width: 500px; 
	height: 500px; 
	border: 1px solid #000; 
	position: relative; 
}
.child { 
	width: 100px; 
	height: 100px; 
	border: 1px solid #999; 
	position: absolute; 
	margin: auto; 
	top: 0; 
	left: 0; 
	right: 0; 
	bottom: 0; 
} 
</style>

4、利用 display：flex;

<style>
.parent { 
	width: 500px;
	height: 500px; 
	border: 1px solid #000; 
	display: flex; 
	justify-content: center; 
	align-items: center;
 }
.child { 
	width: 100px; 
	height: 100px; 
	border: 1px solid #999; 
} 
</style>

5、利用 transform

<style>
.parent { 
	width: 500px; 
	height: 500px; 
	border: 1px solid #000; 
	position: relative; }
.child { 
	width: 100px; 
	height: 100px; 
	border: 1px solid #999; 
	position: absolute; 
	top: 50%; 
	left: 50%; 
	transform: translate(-50%, -50%);
 } 
 </style>

6、计算父盒子与子盒子的空间距离

<style>
.parent { 
	width: 500px; 
	height: 500px; 
	border: 1px solid #000; 
}
.child { 
	width: 100px; 
	height: 100px; 
	border: 1px solid #999; 
	margin-top: 200px; 
	margin-left: 200px; 
} 
</style>