2021前端复习(一)

2021-06

1.清除浮动的方式

原因：当所有的子元素浮动且父元素未设置高度时，父元素会产生高度塌陷。
解决：

1. 给父元素设置高度。（简单，代码少但无法进行响应式布局）
2. 父级定义overflow:hidden; (简单，代码少，兼容性强但超出部分会被隐藏)
3. 给浮动的元素后加一个空标签并设置样式：clear:both;height:0;overflow:hidden;(简单，兼容性好但增加空标签不利于优化)
4. 父级定义overflow:auto;(有点同2，缺点超出部分会出现滚动条)
5. 伪元素清除：给塌陷的元素(父元素)添加伪类并设置样式：
   .father::after{ content: ''; clear:both; display: block; height: 0; overflow: hidden; visibility: hidden; }
   写法固定，兼容性好，但是代码量较多

2.定位相关position属性

1.relative：相对定位，不脱离文档流，相对于自身定位
2.absolute：绝对定位，脱离文档流，相对于父级定位
3.fixed：固定定位，脱离文档流，相对于浏览器窗口定位
4.static：默认，正常流

3.子元素居中问题

水平居中：
1.父子元素宽度固定，子元素设置：margin:auto 子元素不能浮动，否则失效
2.父子元素宽度固定，父元素设置:text-align:center 同上不能浮动

3.1水平垂直居中：

1.flex布局：display:flex;align-items:center;justify-content:center;
2.子绝父相：
（1）子元素固定宽高，设置margin-left/margin-top各为宽高的一半负值

.father{position:relative;}
.child{
	width:100px;
	height:100px;
 	position:absolute;
	 top:50%;
 	left:50%;
 	maring-left:-50px;
 	margin-top:-50px;
}

(2)子元素margin:auto:

.father{
	position:relative;
}
.child{
	position:absolute;
 	margin:auto;
}

(3)transform

.father{
	position:relative;
}
.child{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

3.子元素相对定位

.child{
	position:relative;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

4.父元素设置display:table-cell;子元素：margin:auto;

.father{
	display:table-cell;
	vertical-align:middle;
}
.child{
	margin:auto;
}

4.盒子模型

所有的html都可以看成是一个盒子，从外到内分别是外边距margin，边框border，内边距padding，content内容，设置宽高时只是设置盒子content的width和height。

标准盒模型（content-box）width/height不包含padding和border。
盒子真正宽：width + padding左右 + border左右 + margin左右
盒子真正高： height+ padding上下+ border上下 + margin上下

怪异盒模型（border-box）width/height包含padding和border 即设置的宽度包含padding和border
盒子真正宽：width + margin左右
盒子真正高： height + margin上下
设置盒模型：box-sizing： border-box/content-box

5.css选择器

元素选择器，id选择器，类选择器，伪类选择器（hover/link/visited/active）
css3选择器： 空格，">", + 相邻兄弟选择器
伪类选择器：nth-child，nth-of-type
empty空标签选择器
not()否定伪类选择器

5.1选择器权重

继承元素的权重为0
元素，伪元素（before/after/selection）权重为1
类选择器，伪类选择器，属性选择器 权重为10
id选择器权重为100

6.css继承属性

所有元素可继承：visibility 和 cursor
块级元素继承：text-align，text-indent
内联元素继承： font相关的属性，letter-spacing,color,lin-height,word-spacing等