HTML5中CSS的布局

本章摘要 : 自从2014年完成制定对HTML的标准后,在默认情况下,所有的网页标签都是在"标准流"布局中.

1, 标准流中的默认样式
从左到右
从上到下
2, 在各个网站上可以看到有种标签,不管你怎么拖动滑动条,它都是在原来的位置不变,这种标签就是脱离了"标准流"的标签,有两种方式设置"脱离标准流"的方法 :
float属性
position属性需要和top left right bottom等属性联用

一, CSS布局 - float属性

float属性常用的两个取值是
left : 脱离标准流,浮动在父标签的最左边
right : 脱离标准流,浮动在父标签的最右边
注意点: 当继续添加数据时,会紧贴着脱离的标签,具体如下例子
float相关知识点


<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS布局</title>
        <style>
            /*float脱离标准流*/
            .one{
                color: darkkhaki;
                background-color: mediumpurple;
                font-weight: bolder;
                font-size: 15px;
                width: 120px;
                /*设置它脱离标准流,紧贴最左边*/
                float: left;
                /*设置它脱离标准流,紧贴最右边*/
                /*float: right;*/
            }
            .two{
                background-color: green;
                color: red;
                /*根据这行,当将two选择的标签的宽度设置为200时,并不是指two这个类标签的宽度
                为200,而是加上one类选择器中的标签的120的宽度,刷新浏览器就会知道,两个标签
                是紧贴着的,当第一行的宽度等于200之后,会自动跳到下一行, 如果我们将宽度设置
                大一点,两个标签就会显示在一行*/
                width: 200px;
            }

            /*要求实现将它们显示在同一行,删除圆点,之间有一定的间距*/
            ul li{
                background-color: red;
                color: green;
                /*可以使用display转化类型*/
                /*display: inline-block;*/
                /*设置floatleft或者right就可以实现它们同行显示*/
                float: left;
                margin: 7px;
                /*去除圆点*/
                /*list-style: none;*/
            }
        </style>
    </head>
    <body>
        <div class="one">my name is Alex</div>
        <div class="two">I am 20 years old</div>
        <ul>
            <!--此时,它们是独占一行的-->
            <li>Alex</li>
            <li>Alex</li>
            <li>Alex</li>
            <li>Alex</li>
            <li>Alex</li>
        </ul>
    </body>
</html>

CSS布局 - position属性

1, position属性和float属性功能是一样的,都是将指定标签脱离"标准流"但是它们的用法完全不相同,下面我们来了解一下position的用法,在使用position之前,我们来了解几个position属性的几个常用值 :
1,absolute :它生成的是绝对定位元素,相对于static定位以外的第一个父标签进行定位.元素的位置是通过 : left, right, top, 以及bottom等属性值进行规定的.
2,fixed :生成绝对定位元素,该值是相对于浏览器的窗口进行定位,元素的位置是通过 : left, right, top, 以及bottom等属性值进行规定的.
3,relative :生成的是相对定位元素,相对于其正常位置进行定位,比如:"left :50px" 表示的意思是:会像left位置增加50个像素.
4,static 默认值,没有定位,元素会出现在正常的"标准流"中(会忽略掉top, bottom, left, right 或者 z-index声明)
** inherit** 规定元素应该从父元素那里继承position属性的值
position的简单使用


<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS布局 - position属性</title>
        <style>
            .William{
                background-color: mediumslateblue;
                color: red;
                font-size: 15px;
                width: 200px;
                height: 200px;
                position: relative;
                margin: 50px;
            }
            .Alex{
                background-color: green;
                width: 100px;
                height: 100px;
                position: absolute;
                bottom: 0px;
                right: 0px;
            }
        </style>
    </head>
    <body>
    <!--注意:两个标签设置成了是父子关系-->
        <div class="William">
            <div class="Alex">不要担心,万事开头难,努力学习新知识</div>
        </div>

    </body>
</html>