一、标准流
标准流：浏览器对标签默认的布局方式就是标准流
标准流布局原则：
块级：
- a，块级标签一个占一行（不管标签的宽度是否是浏览器宽度）
- b，默认的宽度是浏览器宽度；默认高度是内容的高度
- c，直接设置宽高有效
行内块标签：
- a，多个行内块可以在一行显示
- b,默认的宽高就是内容的宽高
- c,直接设置宽高有效
行内标签：
- a，多个行内块可以在一行显示
- b,默认的宽高就是内容的宽高
- c,直接设置宽高无效
display属性：转换标签性质
block：块级
inline：行内
inline-block：行内块
注意：行内块标签和其他标签之间默认有间隙，而且无法消除
二、浮动
1.怎么浮动
通过给float属性赋值为left或者right来让标签浮动。浮动会让标签脱流
浮动的目的就是让竖着显示的可以横着来（针对块）
2.浮动的效果：
a，所有标签浮动后，一行可以显示多个；默认宽和高是内容的大小；可以设置宽和高
b，一行显示不了的时候才会自动换行
3.注意事项
a，如果同一级的标签后边的需要浮动，前面的也要浮动，否则可能会出现显示问题
b，浮动的标签不占底层位置，只占表层的位置；不浮动的底层和表层都会占据
4文字环绕效果：
被环绕的标签浮动，文字对应的标签不浮动。就会自动产生文字环绕效果
5清除浮动
清除浮动：清除浮动不是将标签的给去掉，而是清除因为浮动而导致的高度塌陷问题
高度塌陷：父标签不浮动，子标签浮动，并且不设置父标签高度，父标签就会产生高度塌陷的问题
方案一：在父标签内部最后添加一个空的div设置
style=‘clear：both；’
方案二：给父标签添加样式overflow的值为hidden
方案三：完全清除
#div1:after{
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0px;
}
三、定位
CSS中可以通过left,right,bottom,top属性来设置标签到上下左右的距离（但是默认情况下这些值不是都有效的）
想要让定位属性有效，必须通过position属性来设置参考对象
1，position：
- absolution：相对第一个非static/init父标签进行定位
- relative:相对于自己在标准流中位置来定位（当标签本身不希望去定位，只是想让自己的子标签可以相对本身来定位的时候使用）
- fixed：相对浏览器定位
- sticky:当网页内容不超过一屏（不滚动）的时候，按照标准流定位；超过了就相当于浏览器定位
2，注意：如果想要设置right值要保证相对标签的宽度是确定的。如果想要设置bottom值，要保证相对标签的高度是确定的
3，技巧：当遇到某个方向的定位无效的时候，可以尝试让这个标签浮动，然后在定位
四、盒子属性
html中所有可见的标签都是一个盒子模型：包括长和宽决定的内容的大小、padding、border、margin四个部分组成。
其中内容、padding、border是可见，margin不可见
1.内容：设置width和height影响的就是内容部分的大小。添加子标签、添加内容都是放在内容部分的
/*1.内容*/
width: 100px;
height: 100px;
2.padding：在内容的外围，可见部分，如果标签有背景颜色，那么这个部分的颜色和内容的一致
/*2.padding
* padding-方向:宽度
/*padding-left: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;*/
/*同时设置上右下左的padding值*/
/*padding: 10px 20px 100px 50px;*/
/*同时设置上下和左右*/
/*padding: 20px 100px;*/
/*同时设置所有方向的padding都是20px*/
padding: 100px;
3.border：边框，border是在padding的外围，如果没有padding就在内容的外围，可见部分。可以设置颜色和大小
/*3.border:宽度 样式 颜色
* 样式:solid(实线)/dashed(虚线)dotted(点划线)double(双线)
/*单独设置某一边的边框*/
/*border-left: 20px solid red;*/
/*同时设置四个边的边框*/
border: 10px solid red;
4.margin:
/*4.margin：宽度
margin-left: 200px;
五、常用属性
/*1.字体相关的属性
* 字体颜色:color
* 字体大小:font-size
* 字体名:font-family
* 字体加粗:font-weight(bolder(更粗的)/bold（加粗）/normal（常规）/100—900)
* 字体倾斜：font-style(italic/oblique/normal)
*/
p{
font-family:"微软雅黑";
font-weight: 100;
font-style: italic;
}
/*2.对齐方式:text-align
* left:左对齐
* right:右对齐
* center: 水平方向居中
*/
p{
text-align: left;
}
/*3.行高：line-height
* 设置一行的高度
*/
p{
/*一行内容在垂直方向上居中，可以通过将line-height的值设置为和height的值一样*/
line-height: 100px;
}
/*4.文本修饰：text-decoration
* none: 取消修饰
* underline:下划线
* overline:上划线
* line-through:删除线
*/
a,p{
text-decoration: none;
}
a:hover{
text-decoration: underline;
color: red;
}
/*5.首行缩进：text-indent
* 注意单位是：em（表示空格）
*/
p{
text-indent: 2em;
}
/*6.字间距：letter-spacing
* 单位可以是：px,em
*/
p{
letter-spacing: 2px;
}
/*7.列表相关的*/
ul{
/*margin-left: 100px;*/
/*list-style-type: none;*/
list-style-image:url(img/luffy2.png);
list-style-position:inside;
}
/*8.背景图片
* background:图片地址 是否平铺 x方向的坐标 y方向的坐标 背景色
*/
#div{
width: 300px;
height: 200px;
/*background-image: url(img/luffy4.jpg);*/
background: url(img/luffy2.png) no-repeat center 0px yellow;
}
/*9.设置圆角*/
#div{
/*border-bottom-left-radius: 10px;
border-radius: 30px;*/
border-radius: 10px 100px;
border:3px solid red;
}
