【CSS】面试题

css中box-sizing的属性

box-sizing 含有三个属性，分别是 content-box，border-box，inherit

• content-box：

padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )此属性表现为标准模式下的盒模型。

• border-box：

padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )此属性表现为怪异模式下的盒模型。

• inherit

规定应从父元素继承 box-sizing 属性的值

实例：

在不确定自身高度的情况下，用 CSS 实现元素垂直居中的3种方法

1.不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行（推荐）

parentElement{
   
	position:relative;
}

childElement{
   
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

2.若父容器下只有一个元素，且父元素设置了高度，则只需要使用相对定位即可

parentElement{
   
	height:xxx;
}

.childElement {
   
	position: relative;
	top: 50%;
	transform: translateY(-50%