一.标准流和浮动
1.标准流
标准流布局:在标准流中，块级标签是一个占一行，默认宽度是父标签的宽度，默认高度是内容的高度；并且可以设置宽度和高度，一行可以显示多个,默认宽度和高度都是内容的宽高；设置宽高有效
块级标签:h1-h6,p,hr,ol\ul\dl\li,table,tr,div
行内标签:a,img,td,input,select,option,textarea,span
image.png
二display属性
1.display(设置标签的性质)
block - 将标签设置为块级标签
inline-block - 将标签设置为内块标签
注意：一般不会通过标签转换成行内块来解决问题，因为行内块标签在现实左右中间会有不能消除的空隙
inline - 将标签设置为行内标签
image.png
float属性
1.浮动原理:
a.浮动会让标签脱离标准流进行布局(布局)
b.没有浮动的标签即占池底的位置，也占水面位置，浮动后只占水面位置
2.浮动属性
left - 左浮动
right - 右浮动
3.脱流后的布局规则：不管什么标签，脱流后都是一行可以显示多个，可以设置宽度和高度
image.png
4.清零浮动
1.清除浮动
清除浮动值得是清除因为浮动而产生的高度塌陷问题
2.高度塌陷
当父标签不浮动，并且不设置高度；但是子标签浮动的时候就会产生高度塌陷问题
3.a.添加空的div： 在父标签的最后添加一个空的div,并且设置样式clear属性的值为both
b.在会塌陷的标签中添加样式，将overflow属性的值设置为hidden
image.png
五.文字环绕
文字环绕：被环绕的标签(例如图片对应的标签)浮动；文字对应的标签不浮动
image.png
六.定位
CSS可以通过letf,right,top,bottom来对标签进行定位。前提是设置好参考对象
####1.定位属性：
left - 标签左边距
right - 标签右边距
top - 标签上边距
bottom - 标签下边距
注意：a.定位需要通过position属性来设置参考对象
b.当标签的宽度固定的时候，同时设置left和right只有left有效；top和bottom同理
c.可以同时设置left和right,不设置宽度，或者宽度值为auto的时候，标签会自动拉伸;top和bottom同理
####2.position属性
(了解)initial - (默认值)
(了解)static - 不希望自己的子标签相对自己定位的时候才使用static
absolute - 相对第一个非static和非initial的父标签进行定位
relative - 相对于自己在标准流中的位置定位;
如果一个标签希望自己的子标签能够相对自己定位，就设置这个标签的position为relative(自己不定位)
fixed - 相对于浏览器定位
sticky - 粘性定位，只针对网页底部的标签定位。如果网页内容超过一屏(需要滚动)的时候相对浏览器定位；
否则相对标准流定位
image.png
image.png
image.png
七.盒子模型
html中所有可见的标签都是盒子模型。有固定的结构，包括：内容、padding、border、margin四个部分
内容 - 可见的，设置width和height实质就是设置内容的大小;默认大小跟标签中的内容有关
添加子标签或者设置文字内容都是添加或者显示在内容部分的;
可以background-color会作用于内容部分
padding - 可见的，分上下左右四个部分;一般默认都是0;
可以background-color会作用于padding
border - 可见的，分上下左右四个部分；一般默认都是0；
border的背景颜色需要单独设置
margin - 不可见，但是占位置；分上下左右四个部分；一般默认是0
image.png
