css随笔7

css也进入了终章了，今天学习了css布局，首先就是一个新标签---div标签，我们可以把它理解成一个容器；文档流，档流其实就是指浏览器生成页面的顺序，body 元素下的任意元素， 根据其前后顺序，组成了一个个上下关系，这便是文档流，文档流是浏览器的默认显示规则...还是实操下吧：

display 元素显示模式

div{
     display:block/*display  属性用来设置元素的显示方式。
block    块对象指的是元素显示为一个方块，默认显示状态下将占据整行，其它的元素只能另起一行显示。
inline    行间对象与block刚好相反，它允许其它元素在同一行显示。
none    隐藏对象 
*/
}

 

float（元素的浮动）---浮动的时候元素的显示属性也变化了 变为 “行内元素”

清除浮动 clear

html:
<div class="header nr">header</div>
    <div class="content nr">
        <div class="left">left</div>
        <div class="right">right
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
                
            <div class="clear"></div><!-- 设置一个没有宽高的div来清除浮动，以达到想要的一行三个效果     -->

            <div class="box">4</div>
            <div class="box">5</div>
            <div class="box">6</div>

            <div class="clear"></div>

            <div class="box">7</div>
            <div class="box">8</div>
            <div class="box">9</div>
                
            <div class="clear"></div>    

            <div class="box">10</div>
            <div class="box">11</div>
            <div class="box">12</div>

        </div>
    </div>
    <div class="footer nr">footer</div>
css:
.nr{
    width:1000px;
    height:100px;
    background:#ccc;
    border:1px solid red;
}
.content{
    height:500px;
}
.left{
    float:left;/*向左浮动，可选值有：left左浮；right右浮*/
    width:500px;
    height:500px;
    background:green;
}
.right{

    float:right;
    width:400px;
    height:500px;
    background:cyan;
}
.box{
    float:right;/*浮动的也是有顺序的，注意看*/
    width:50px;
    height:50px;
    background:red;
    margin:10px;
}
.clear{
    clear:both;/*清除浮动，可选值有：none默认值，允许两边都有浮动；left不允许左边有浮动；right不允许右边有浮动；both不允许有浮动*/
}

 

 

position(元素的定位)

html:
<div class="relative">
        <div class="absolute"></div>
    </div>
    <div class="fixed"></div>
css:
.relative{
    width:300px;
    height:300px;
    background:orange;
    position:relative;/*相对定位，position的值可选：static无定位，默认值；absolute绝对定位；relative相对定位；fixed固定定位*/
    top:100px;
    left:100px;

}
.relative .absolute{
    width:200px;
    height:200px;
    background:pink;
    position:absolute;/*绝对定位，如果父元素 position 为 static时，将以body坐标原点进行定位。如果父元素 position 为 relative 时，将以父元素进行定位。*/

    top:50px;
    left:50px;
}
.fixed{
    width:100px;
    height:100px;
    background:red;
    position:fixed;/*固定定位*/
    right:0;
    bottom:100px;

}

 

 

 

z-index(元素的层叠关系）

html:
<div class="id999"></div>
    <div class="id666"></div>
    <div class="id888"></div>
css:
.id999{
    width:500px;
    height:500px;
    background:red;
    position:absolute;/*绝对定位，因为在这里他的父元素是position为static,所以以body坐标原点进行定位*/
    top:1200px;
    left:100px;
    z-index:999;/*元素的层叠关系，数值大的会覆盖在数值小的上面*/
}
.id666{
    width:500px;
    height:500px;
    background:#b28118;
    position:absolute;
    top:1300px;
    left:200px;
    z-index:666;
}
.id888{
    width:500px;
    height:500px;
    background:blue;
    position:absolute;
    top:1400px;
    left:300px;
    z-index:888;
}