CSS

浮动

标准流 ： 块标签一个占一行， 从上往下布局；行内标签，一行可以显示多个，从左往右，遇到边界自动换行

脱流：浮动，定位

浮动：让竖着显示的标签横着来 float:left/right

注意：如果要使用浮动，那么同一级的所有的标签都要浮动

​ 如果父标签浮动，那么子标签的位置会跟着一起动

​ 布局基本顺序，从上往下，从左往右

清除浮动

清除浮动是指因为浮动而产生的问题(高度崩塌) 但是这个问题不是什么时候都会产生的。

怎么清除浮动：

方法一：添加空的div，在父标签的最后添加一个空的div，然后设置style内容为clear:both

方法二：在父类标签中设置一个样式 overflow:hidden

display

HTML中标签分为块和行内

CSS中标签分为块，行内块，行内 这些通过display来区别

display的值有 block(块)，inline-block(行内块，inline(行内)

盒子模型

在HTML中每个标签都是由4个部分组成的

1.内容:显示标签内部的内容，可见的(设置宽和高的值，就是设置内容部分的大小)

2.内边距(padding):默认为0，可见，不能显示内容

3.边框(border):可见的，如果有内边距就显示在内边距上，如果没有就显示在内容上

4.外边距(margin):不可见的，但是会占据浏览器空间

padding

padding的值有四个

可以单独设，也可以一起设

padding:10px 上下左右都为10px

padding:10px,20px 上下是10px, 左右为20px

​

border

边框

可以单独设，也可以一起设

格式：宽度 样式 颜色

样式： solid实线 double 双线 dotted点状 dashed 虚线

定位(position)

想要设置标签的top,buttom,left,right的值必须设置标签的参考方式

Initial:默认值，没有参考对象

Absolute:相对第一个position的值是非static，非initial的父标签进行定位

relative：在标准流中正常的定位

fixed：相对于浏览器定位

sticky：不滚动的时候按标准流布局，滚动的时候相对于浏览器定位