1.css属性
标准流布局:
在标准流中,块级标签是一个占一行,默认宽度是父标签的宽度,默认高度是内容的高度;并且可以设置高度和宽度
行内标签:一行可以显示多个,默认宽度和高度都是内容的宽度;设置宽高无效
行内块标签:一行可以显示多个,默认高度和宽度是内容的宽高,设置宽高有效
块级标签:h标签;p标签,hr标签,ol,li,ui;dl ;table; tr;div
行内标签:a;img;td;select;input;option;textarea;span
display:设置标签的性质
block:将其他的标签转换成块级标签
inline-block:将标签设置为行内块标签(坑:一般不会通过将标签转换为行内块来;因为两个标签之间会有空隙,h5bug)
inline:将标签设置为行内标签解决问题
浮动会让标签脱离标准流进行布局(脱流)
float属性:
left:左浮动
right:右浮动
浮动原理:浮动会让标签脱离标准流布局
个人理解:标准流会证据位置和显示,而浮动只是显示,多个浮动会分开显示后来的显示在前一个的右边或者左边(看是flaot是left,还是right)或者下一行;一个标签浮动后,后面的标准流会与浮动标签叠加,重叠部分看到的是浮动的标签,后面的的浮动标签会在这个标准流之后显示。
清除浮动:清除因为浮动而产生的高度塌陷问题
高度塌陷:当父标签不浮动,并且不设置高度;但是子标签浮动的时候就会产生高度塌陷问题
解决方法:
1.设置一个空div;<div style="clear:both>
2.推荐方法:给父标签设置overflow:hidden;
3.专业方法:
文字环绕效果:
被环绕的标签(如图片)浮动;文字对应的标签不浮动
定位:
css可以通过left,right,top,bottom来对标签进行定位。前提是设置好参考对象。
注意:定位需要通过position属性来设置参考 对象;当标签的宽度固定时,同时设置left和right只有left有效;可以同时设置left和right,不设置标签宽度或者值为auto时会自动拉伸;值可以使负的,即超出参考对象
position属性:
initial:默认值;
static:不希望自己的子标签相对自己定位的时候才使用static
absolute:相对第一个非static和非initial的父标签进行定位(如果父标签不满足条件,就现对浏览器定位。
relative:相对于自己在标准流中的位置定位。如果一个标签希望自己的子标签能相对自己定位
fixed:相对浏览器定位
sticky:粘性定位,只针对网页底部的标签定位。如果网页的内容超过一屏(需要滚动)的时候,相对浏览器定位,否者相对标准流定位。
盒子模型:HTML中所有可见的标签都是盒子模型。有固定的结构,包括:内容、padding、margin、border
内容:可见的,可设置宽高;添加子标签或者设置文字内容都是添加或显示在内容部分的;可以background-color设置内容背景颜色;默认大小和标签中的内容有关
padding:可见的,分上下左右四个部分。一般没有默认都是0。background-color也会作用于padding。设置上下左右:padding-left,padding-top……
border:可见的,分上下左右四个部分。一般没有默认都是0。
颜色要单独设置。线的样式:solid,double,dashed;每一边都可以单独设置颜色样式,大小。
margin:不可见的,分上下左右四个部分。一般没有默认都是0。
设置圆角
border-radius:10px;
border-top-left-radius: