一.标准流和浮动

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](https://img.haomeiwen.com/i14187468/1a3df5eb3fb9f3d3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

image.png