前端基础知识总结

1、块元素特性：

独占一行，默认竖着排列

2、内嵌元素特性：

宽度为内容的宽度，横着排列，不独占一行

3、浮动

子元素浮动，父元素塌陷，就必须解决父元素的塌陷。解决方法：

1. 给塌陷的父容器的最后添加一个没有意义的子容器，然后给该容器清除塌陷，一般清除所有。

.clearDiv {
  clear: both;//清除所有（也可以只清除）
}
<div class=".clearDiv"></div>
1
2
3
4

2. 给塌陷的父元素设置overflow:hidden;(溢出隐藏)，因为会触发BFC。

3. 给塌陷的父元素清除浮动（常用的方法）

.clear::after {
  content: "";//content内容为空
  display: block;//将这个内容content转化成块元素
  clear: both;//清除浮动
}
<div class="clear">
	<div class="left"></div>
	<div class="right"></div>
</div>
1
2
3
4
5
6
7
8
9

什么时候需要浮动呢？当想把块元素横着排列的时候，就应该给块元素设置浮动

4、margin计算规则

1. 上下兄弟元素之间margin去最大值

2. 左右兄弟元素之间margin相加

5、在父元素位浮动的情况下，子元素设置margin-top/margin-bottom会将父元素拉下来（margin-top/margin-bottom会作用于父元素）

解决办法：

1. 给父元素加边框border
2. 给父元素设置overflow
3. 不设置子元素的上下外边距，设父元素的上下内边距

6、百分比问题

width和padding/margin/position/border的百分比单位都相对于父元素的宽度的百分数。如果有定位的话，需要关注相对于谁定位，百分比就相对于谁。

7、box-sizing

box-sizing将改变width属性的计算方式，传统的width的属性是内容宽度，当设置了box-sizing后，width将是border+padding+内容。

8、position

1. 绝对定位：相对于有定位属性的祖先元素；如果没有则相对于body,会脱离文档流和文本流
2. 相对定位：相对于自己本身，不脱离文档流
3. 固定定位：相对于浏览器进行定位，会脱离文档流和文本流
4. 绝对定位和相对定位设置上下左右，会改变width,height的基准点