css面试高频题目1

1、盒子模型

https://www.imooc.com/article/68238
w3c盒子模型（标准）
width = content、
盒子总宽 = content（width） + padding + border + margin
box-sizing：content-box （代表使用w3c盒子模型）
ie盒子模型（怪异）
width= content + padding + border
盒子总宽 =width + margin
box-sizing：border-box（代表使用ie盒子模型）

2、画一条0.5px的边框线

meta viewport

设置为1时，border=0.5px 就可以了，设置为0.5时，border=1px，就好缩小0.5 width - viewport的宽度height - viewport的高度 initial-scale -初始的缩放比例 minimum-scale -允许用户缩放到的最小比例 maximum-scale -允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放

使用transform:scaleY 令其在垂直方向缩小0.5倍

.div:after{
	height:1px;
	transform:scaleY(0.5);
	transform-origin: 50% 100% ;
	content:"";
	position:absolute;
	width:100%;
	left:0;
	bottom:0;
	background:red;
}

使用border-image

3、垂直居中

magin：auto、上下左右为0 （父相子绝）

div{
	width: 400px;
	height: 400px;
	position: relative;
	border: 1px solid #465468;
}
img{
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

定位为上下左右为0，margin: 0可以实现脱离文档流的居中.

margin设置为本身负一半px，top、left为50%（父元素50%）

父相子绝。以上为知道本身宽高的情况下、不知道宽高使用使用transform

flex布局

将父元素设置为display:flex，并且设置（纵/侧轴）align-items:center;（横/主轴）justify-content:center;

.container{
width: 300px;
height: 200px;
border: 3px solid #546461;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;}
.inner{
border: 3px solid #458761;
padding: 20px;}

4、行内元素和块级元素

块元素：独占一行，并且有自动填满父元素，可以设置margin和pading以及高度和宽度
行元素：不会独占一行，width和height会失效，并且在垂直方向的padding和margin会失
效。

5、行、块元素的相互转化

https://www.cnblogs.com/Ry-yuan/p/6848197.html 分析display常用属性 inline、block、inline-block
https://www.cnblogs.com/stfei/p/9084915.html 行、块元素转换
如果想块级元素与其他行元素并排、块元素设置display：inline。
如果想行元素独占一行 display：block