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: