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