Day22CSS属性

标准流和浮动
1.标准流
标准流布局：在标准流中，块级标签是一个占一行，默认宽度是父标签的宽度，默认高度是内容的高度，
并且可以设置宽度和高度
行内标签，一行可以显示多个，默认的高度和宽度都是内容的宽度；设置宽高无效
行内块标签，一行可以显示多个，默认的宽度和高度都是内容的高度；设置宽高有效
块级标签：h1-h6, p, hr, ul/dl/ol/li, table/tr,
行内标签：a, img, td, input, textarea, select
<style type="text/css">
{
margin: 0;
padding: 0;
}
.a{
height: 100px;
background-color: palegreen;
}
.b{
width: 100%;
height: 400px;
background-color: pink;
/float: left;/
/display: inline-block;*/

}
.c{
    width: 100%;
    height: 100px;
    background-color: aquamarine;
}
.aa{
    width: 20%;
    height: 400px;
    background-color: orange;
    float: left;
    overflow: hidden;

}
.bb{
    width: 70%;
    height: 400px;
    background-color: cyan;
    float: left;
    overflow: hidden;

}
.cc{
    width: 10%;
    height: 400px;
    background-color: papayawhip;
    float: left;
    overflow: hidden;

}

</style>

2.display(设置标签的性质)
block：将标签设置为块级标签
inline-block:将标签设置为行内块标签(注意：一般不会通过将标签转换成行内块元素)
inline:将标签设置为行内标签
float属性
1.浮动原理：
a.浮动会让标签脱离标准流进行布局(脱流)
b.没有浮动的标签，即占池底的位置，也占水面的位置。浮动后只占水面的位置
2.float属性
left：左浮动
right：右浮动
清除浮动
1.清除浮动
清除浮动指的是因为浮动而产生的高度塌陷问题
2.高度塌陷
当父标签不浮动，并且不设置高度；但是子标签浮动的时候会产生高度塌陷问题
3.清除方法
a.添加空的div: 在父标签的最后添加一个空的div，并且设置样式clear的属性值为both
b.在会塌陷的标签中添加样式，将overflow属性的值设置为hidden
overflow：hidden
文字环绕效果
文字环绕：被环绕的标签（例如图片对应的标签）浮动；文字对应的标签不浮动
定位
css可以通过left，right，top，bottom来对标签进行定位。前提是设置参考对象
1.定位属性
left:
right:
top:
bottom:
注意：定位需要通过position属性来设置参考对象
当标签的宽度固定时，同时设置left和right只有left有效；top和bottom同理
可以同时设置left和right，不设置宽度，或者宽度值为auto的时候，标签会自动拉伸；top和bottom同理
2.position属性
initial:默认值
static:
absolute:绝对定位，相对于static定位以外的第一个父元素进行定位
设置了绝对定位的元素,会去其祖先元素寻找最近的一个拥有定位属性的元素,
并且根据它来定位；如果没有的话,就根据body来定位
relative:相对定位，让内部的元素根据它来定位,同时不影响自身的布局
fixed:固定定位
sticky:粘性定位，只针对网页底部的标签定位。如果网页内容超过一屏(需要滚动)的时候相对浏览器定位
overfolw:hidden -- 裁掉自己的子标签超出自己的范围的部分

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    body{
        height: 1500px;
    }
    .a{
        height: 100px;
        width: 100px;
        background-color: palegreen;
        /*margin: 150px auto;*/
        position: relative;
    }
    .b{
        height: 50px;
        width: 50px;
        background-color: palevioletred;
        position: absolute;
        left: -30px;
        top:-30px
    }
    .c{
        height: 50px;
        width: 50px;
        background-color: pink;
        position: fixed;
        right: 50px;
        bottom: 50px;
    }
    .d{
        height: 100px;
        background-color: palegreen;
        position: sticky;
    }
</style>