一、标准流
标准流：浏览器对标签默认的布局方式就是标准流。
标准流布局原则：
块级标签：
a、块级标签一个占一行（不管标签的宽度是否是浏览器宽度）
b、默认宽度是父标签的宽度，默认高度是内容的高度。
c、直接设置宽高有效行内标签：
a、多个行内标签可以一行显示。
b、默认宽高是内容的宽高。
c、直接设置宽高无效。行内块标签：
a、多个行内块标签可以在一行显示。
b、默认宽高是内容的宽高。
c、直接设置宽高有效。
display属性：转换标签的性质
block：块级
inline：行内
inline-block：行内块
注意：行内块和其他标签之间默认会有个间隙，而且无法消除，所以一般不建议使用。
二、浮动 -- float
通过给float属性赋值为 left 或者 right 来让标签浮动。浮动会让标签脱流，脱流后原来的标准流布局方式不适用了。
float:left; 按照浏览器的左上角为起点。
float:right按照浏览器的右上角为起点。
浮动的目的：让竖着显示的可以横着来（针对块）
浮动的效果：
一行可以显示多个；默认的宽高是内容的大小；可以设置宽度和高度
注意事项：
a、如果同一级的标签，后面的需要浮动，前面的也需要浮动，否则可能会出现一些显示问题。
b、浮动的标签不占位置，不浮动的占位置。
利用浮动产生文字环绕效果
结论：被环绕的标签浮动，文字对应的标签不浮动。
清除浮动：不是将标签的浮动给去掉，而是清除因为浮动而产生的高度塌陷的问题。
高度塌陷：在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。
高度塌陷产生原因：父标签不浮动，子标签浮动，并且不设置父标签的高度，就会产生高度塌陷问题。
解决方案：
1、在后面添加一个div空盒子，设置样式为clear：both
<div id="" style="clear: both;">
</div>
2、给父标签添加样式，设置overflow的值为hidden。
3、万能清除法
#father:after{
display: block;
clear: both;
content: '';
visibility: hidden;
height: 0;
}
#father{
zoom: 1;
}
三、定位
CSS中可以通过left，right，bottom，top属性来设置标签上下左右的距离。但是要通过position属性设置参考对象。
absolute：相对第一个非static/initial(默认值)父标签进行定位。
relative：相对于自己在标准流中的位置来定位。（当标签本身不希望去定位，只是想让自己的子标签可以相对自己定位时使用。）
fixed：相对于浏览器定位。（滚动时位置相对于浏览器不变）
sticky：当网页的内容不超过一屏（不滚动），按照标准流定位；超过一屏就相对浏览器定位。
initial：默认值，没有相对定位。
技巧：当遇到某个方向的定位无效时，可以尝试让标签浮动然后定位。
四、盒子模型
html中所有可见的标签都是一个盒子模型：包括长和宽决定的content、padding、border、margin。
其中content、padding、border是可见的，margin是不可见的。
1、content（内容）：设置width 和height影响的就是内容部分的大小。添加子标签、内容都是放在内容部分的。
2、padding（内边距）：内容外围，可见部分，如果标签有背景颜色，那么这个部分的颜色和内容一致。
padding-left: 20px;
padding:10px; /*所有*/
padding:10px 20px; /*上下和作业*/
padding:10px 20px 30px 40px; /*顺时针*/
3、border（边框）：border在padding的外围，如果没有padding，就在内容的外围，可以设置颜色。
border:宽度 风格 颜色
样式：solid（实线）、dashde（虚线）、dotted（点划线）double（双线）
4、margin（外边距）：不可见。主要用来占位。
五、其他常用属性
1、字体相关属性
- 字体颜色：color
- 字体大小：font-size
- 字体名：font-family
- 字体加粗：font-weight：bolder（更粗的）、bold（加粗）、normal（常规）、100-900
- 字体倾斜：font-style：italic、oblique、normal
2、文本修饰 -- text-decoration
none：取消修饰
underline：下划线
overline：上划线
line-through：删除线
3、对齐方式
text-align：left、right、center（文字水平方向居中）
margin：0px auto;（水平居中）
一行内容在垂直方向居中，可以通过将line-height的值设置为父标签的height值。（垂直居中）
height:40px;
line-height:40px;
4、首行缩进 -- text-indent
text-indent:2em
em代表一个空格的长度
5、字间距 -- letter-spacing
letter-spacing:2em
6、背景图片
格式：babackground-image:图片地址、是否平铺 x方向坐标 y方向的坐标 颜色
no-repeat/repeat/repeat-x/repeat-y(不平铺、平铺、x方向平铺、y方向平铺)
background-image: url(img/beauty.png) no-repeat center center yellow; center表示在水平或者垂直方向居中。
默认图片不够时，背景图片会平铺。
7、设置圆角
border-radius: 20px;
border-bottom-left-radius: 20px;
六、补充
制作网页首页title图标
一般写网页前一定要先将标签默认的margin值和padding值关闭。
*{
margin:0;
padding:0;
position:relative;
}
实现元素居中
CSS中垂直居中的11种方式
CSS中元素6种水平居中
