2018-10-31day03css属性

1.标准流和浮动

1.标准流布局:在标准流中，块级标签是一个占一行，默认宽度是父标签的宽度，默认高度是内容的高度并且可以设置宽度和高度
行内标签，一行可以显示多个，默认的宽度和高度都是内容的宽度和高度；设置宽和高无效
行内块标签，一行可以显示多个，默认的宽度和高度也都是内容的宽和高，可以设置宽度和高度。
块级标签:h1-h6，p 列表标签 table tr
行内标签:a，img td input select option textarea span

2.display

1.display(设置标签的性质)
block --将其他的标签转换成块级标签
inline-block --将标签设置为行内块标签(注意坑:一般不会将标签转换成行内块解决问题)
因为inline-block在显示的时候每个标签内容之间会有空隙，衔接不完美。
inline --将标签设置为行内标签

3.float浮动

1.浮动会让标签脱离标准流进行布局(脱流)
2.float属性
left--左浮动
rigjt--右浮动
3.脱流后的布局规则，不管什么标签，脱流后都可以一行显示多个
而且可以设置高度和宽度

    <!--设置float属性后的标签会脱流-->
        <!--<p style="background-color: cadetblue;">我是段落</p>
        <p>段落2</p>
        <!--<a href="" style="background-color: aquamarine;">123</a>-->
        <!--<a href="">abc</a>-->-->
        <div style="background-color: #0000FF;width: 200px;height: 300px;float: left;">1</div>
        <div style="background-color: aqua;width: 200px;height: 500px;float: left;">2</div>
        <div style="background-color: #A52A2A;width: 200px;height: 300px;float: left;">3</div>
        <div style="background-color: bisque;width: 200px;height: 600px;">4</div>

4.清除浮动

1.清除浮动
清除浮动指的是因为浮动而产生的高度塌陷问题
2.高度塌陷
当父标签不浮动，并且不设置高度，但是子标签浮动的时候就会产生高度塌陷问题
3.清除方法
a.添加空的div。在父标签的最后添加一个空的div设置样式clear属性为both
b.将会塌陷的标签中添加样式style，将overflow属性的值设置为hidden

5.文字环绕效果

文字环绕效果:被环绕的标签，例如图片对应的标签浮动，文字对应的标签不浮动，就可以产生
文字环绕图片的效果。文字不会被覆盖

6.定位

CSS可以通过left、right、top、bottom来对标签进行定位。前提是设置好参考对象

1.定位属性:
left - 标签左边距
right -标签右边距
bottom - 标签下边距
top -标签上边距

注意:a.定位需要通过position设置参考对象
b.当标签的宽度固定的时候，同时设置left和right只有left有效
c.可以同时设置left和right不设置width的时候，width会自动拉伸，top和bottom同理

2.position属性
initial--(所有标签的默认值)
（没什么用处）static-- 不希望被相对定位的时候就设置属性为static，也可以不设置，因为一般标签的默认值都为initial

absolute --相对第一个非static和非initial的父标签进行定位（如果没有就相对body定位，即浏览器边界）
relative--相对于自己在标准流位置进行定位，
如果一个标签希望子标签相对自己定位就设置position为relative
fixed --相对于浏览器定位。会一直存在浏览器屏幕不会被划走。会一直存在于浏览器的底部
sticky --粘性定位，只针对网页底部标签定位，会跟着当前页面内容的最底部，相当于内容的一部分一样
将left、right等四个的属性值设为负值可以反方向移动
在相对移动的父类里面设置overflow: hidden 可以裁剪掉子类反向移动超出的部分

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
            #div1{
                background-color: #0000FF;
                width: 600px;
                height: 600px;
                position: relative;
                overflow: hidden;
                
            }
            #div2{
                background-color: aqua;
                width: 400px;
                height: 400px;
        }
            #div3{
                background-color: brown;
                width: 200px;
                height: 200px;
                position: absolute;
                right: -50px;
            }
            #div4{
                background-color: aquamarine;
                width: 100px;
                height: 100px;
                position: absolute;
                left: -50px;
                top: -50px; 
                
            }
            
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                <div id="div4">
                    
                </div>
                <div id="div3">
                    
                </div>
            </div>
        
        </div>
    
    </body>

7.盒子模型

html中多有课件的标签都是盒子模型。有固定的结构，结构中包括内容部分、padding、border、margin四个部分。
内容--可见的，设置width和height实质就是设置内容的大小;添加子标签或者设置文字内容都是添加或者显示在内容部分的
设置的background-color会作用于内容部分

padding--可见的，分上下左右四个部分。一般默认值都是零。设置背景颜色也会作用于padding

可以给style添加padding-left/right\top/bottom来设置padding的宽度增加标签的大小。相当于给四周加了一圈

border --可见的，分上下左右四个部分;一般默认都是0;
border的背景颜色需要单独设置
格式 border:线的样式颜色宽度
线的样式 solid实线、double双实线、dashed点划线、dotted虚线
border-radius 可以设置切圆角，可以同时切也可以通过left等切单独的角

margin --不可见，但是占位置；分上下左右四个部分，一般默认值是0

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
            #div1{
                /*设置内容部分*/
                background-color: #0000FF;
                width:300px;
                height: 400px;
                padding:40px ;          
            }
            #div6 div{
                background-color: #0000FF;
                width: 200px;
                height: 200px;
                margin: 10px;
                float: left;
            }
            #div5 div{
                background-color: #0000FF;
                width: 200px;
                height: 200px;
                margin: 10px;
                float: left;
        </style>
    </head>     
    <body>
        
        <!--<div id="div1"><div style="background-color: #A52A2A;width: 50px;height: 50px;"></div></div>-->
        <div id="div6" style="height: 220px;">
            <div ></div>
            <div></div>
            <div></div>
            
        </div>
        <div id="div5">
            <div></div>
            <div></div>
            <div></div>
        </div>

    </body>