一、标准流

标准流：浏览器对标签默认的布局方式就是标准流
标准流布局原则：
块级：

• 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;
            }