一、标准流

1.什么是标准流
标签在没有添加布局相关的样式时，在浏览器中默认的布局方式
块级标签：
一个占一行（不管宽度大小）
默认宽度是父标签的宽度，默认高度是内容的高度；设置宽高有效(div)
行内标签：
一行可以显示多个
默认大小是内容的大小；设置宽高无效(span,a)
行内块标签:
一行可以显示多个
默认大小是内容的大小；设置宽高有效(img,input)

2.实际布局的选择
a.左右结构使用行内块
didplay属性
定义：可以让任何标签变成块级、行内、行内块；隐藏标签

block(块)
inline(行内)
inline-block(行内块) - 默认左右间隙(因为换行产生)，这个间隙可以通过将父标签的字体大小设置为0来去掉
none(隐藏)

b.脱流/脱标（脱离标准流）
方式一：float(浮动)
方式二：定位（left,right,top,bottom position)

二、浮动

特点：浮动会让标签脱流
脱流：
定义：让标签脱离标准流布局
特点：
一行以显示多个
默认大小是内容大小，并且设置宽高有效’的方式布局

float属性
left
right

文字环绕

应用场景：在某一块内环绕文字
做法：被环绕的标签浮动，环绕的标签不浮动

三、清除浮动

1.什么是高度塌陷
当父标签不浮动，子标签浮动时，父标签就会产生高度塌陷的问题
2.什么是清除浮动
清除浮动指的是因为浮动而产生的高度塌陷
a.方法一：添加空盒子
在高度会塌陷的父标签的最后添加一个空的子标签div；然后给空的div添加样式，设置clear属性的值为both
缺点：当高度塌陷的位置很多时，重复写的代码量过大
(记)b.方法二：overflow
给高度会塌陷的父标签，添加样式设置overflow属性值为hidden
c.方法三：万能清除法
选择高度会塌陷的父标签，给after状态添加样式，再给这个父标签添加样式：zoom:1

.clear:after{               
    display: block;
    clear: both;
    content: '';
    visibility: hidden;
    height: 0;
}
clear{
    zoom: 1;
}

四、定位

1.定位
特点：定位会让标签脱流

2.定位属性：
top:顶部的距离
bottom:底部的距离
left:左边的距离
right:右边的距离
以上四个属性想要有效，必须通过position属性来说明参考对象
position属性:
initial和static - 默认值，不能定位（定位无效）
absolute - 绝对定位:以第一个position的值不是默认值的父标签进行定位
注意：body标签的position不是initial和static
relative - 相对定位:相对于标准流定位（相对于自己在标准流中的位置进行定位）
一般使用relative是在标签本身不需要定位，但是希望自己的子标签相对于自己定位的时候使用

fixed - 相对于浏览器定位
sticky - 当浏览器内容没有超过一屏时，显示在内容最下面，当浏览器内容超过一屏时top和bottom有效，并且显示在浏览器底部（left和right无效）

五、盒子模型

1.网页上所有的可视标签都是一个盒子模型：
一个标签是由4个部分组成，分别是：

• content
• padding
• border
• margin
  可见：content、padding、border
  不可见：margin(占位)

2.盒子模型的每个部分
content：标签内容
特点：
1.标签宽高作用于content
2.标签中的文字和子标签都是添加在content上
padding：在内容的外部，默认是0，可见
特点：
1.：背景颜色也作用于padding
2.：四个方向(top,bottom,left,right),可单独设置
border：边框；默认是0，可见
特点：
1.四个方向，颜色和大小都可以单独设置
border-radius：设置边框四个角的圆角弧度
注意：没有border边框也可以设置，这时作用在padding上
margin：外边距
特点：
四个方向（top,bottom,left,right）可单独设置

六、常用属性

font-family:设置字体
font-weight:设置文字加粗（取值100-900），100-700不断加粗
font-style:设置字体倾斜(italic/oblique/normal)
italic/oblique - 倾斜
normal - 不倾斜
text-align:设置内容水平方向对齐方式
left - 左对齐
right - 右对齐
center - 居中
line-height:设置文字行高
特点：可以通过设置行高和标签的高度一样来让标签中的内容在垂直方向上居中显示
text-decoration:文字修饰
underline - 下划线
overline - 上划线
line-through - 删除线
none - 去掉文字修饰，即去除下划线
text-indent:首行缩进
说明：p标签的文字有效；一般用em(空格)为单位
letter-spacing:设置每个文字之间的间隙（单位：px）
background:设置背景
图片地址 是否平铺 x y 背景颜色