CSS属性

一、标准流

标准流布局：在标准流中，块级标签是一个占一行，默认宽度是父标签的宽度，默认高度是内容的高度；并且可以设置宽度和高度
行内标签，一行可以显示多个，默认宽度和高度都是内容的宽度；设置宽高无效
行内块标签，一行可以显示多个，默认宽度和高度都是内容的宽高；设置宽高有效
块级标签：h1-h6, p, hr, ol\ul\dl\li, table, tr, div
行内标签：a, img, td, input，select，option, textarea, span

二、.display(设置标签的性质)

block - 将标签设置为块级标签
inline-block - 将标签设置为行内块标签
(注意：一般不会通过将标签转换成行内块来解决问题, 因为行内块标签在现实的时候左右中间会有不能消除的空隙)
inline - 将标签设置为行内标签

三.float脱流

1.浮动原理:
a.浮动会让标签脱离标准流进行布局(脱流)
b.没有浮动的标签即占池底的位置，也占水面位置。浮动后只占水面位置

2.float属性
left - 左浮动
right - 右浮动

3.脱流后的布局规则：不管什么标签，脱流后都是一行可以显示多个，可以设置宽度和高度

四.清除浮动

1.清除浮动
清除浮动指的是清除因为浮动而产生的高度塌陷问题

2.高度塌陷
当父标签不浮动，并且不设置高度；但是子标签浮动的时候就会产生高度塌陷问题

3.清除浮动的方法：
a.添加空的div： 在父标签的最后添加一个空的div,并且设置样式clear属性的值为both
b.在会塌陷的标签中添加样式，将overflow属性的值设置为hidden

五、定位

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 - 粘性定位，只针对网页底部的标签定位。如果网页内容超过一屏(需要滚动)的时候相对浏览器定位；
否则相对标准流定位

六、盒子模型

html中所有可见的标签都是盒子模型。有固定的结构，包括：内容、padding、border、margin四个部分
内容 - 可见的，设置width和height实质就是设置内容的大小;默认大小跟标签中的内容有关
添加子标签或者设置文字内容都是添加或者显示在内容部分的;
可以background-color会作用于内容部分

padding - 可见的，分上下左右四个部分;一般默认都是0;
可以background-color会作用于padding

border - 可见的，分上下左右四个部分；一般默认都是0；
border的背景颜色需要单独设置

margin - 不可见，但是占位置；分上下左右四个部分；一般默认是0