网页开发学习笔记九: css 页面布局

文档流
- 块元素独占一行
- 行内元素在一行上显示
- 自上而下

浮动 float
- 用法
  - float: left | right;
- 特点
  - 浮动起来
  - 不占位置(脱标)
  - 如果多个盒子都使用了浮动, 会在一行上显示
  - 尽量用 display: inline-block; 来转行内块
- 作用
  - 文本绕图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box{
            width: 400px;
            height: 300px;
            background: #eee;
        }
        .box img{
            width: 50px;
            height: 50px;
            float: left;
        }
    </style>
</head>
<body>

    <div class="box">
        <img src="1.jpg">
        <p>AAAAABBBBBCCCCCDDDDDFFFFF</p>
        <p>AAAAABBBBBCCCCCDDDDDFFFFF</p>
        <p>AAAAABBBBBCCCCCDDDDDFFFFF</p>
        <p>AAAAABBBBBCCCCCDDDDDFFFFF</p>
        <p>AAAAABBBBBCCCCCDDDDDFFFFF</p>
        <p>AAAAABBBBBCCCCCDDDDDFFFFF</p>
        <p>AAAAABBBBBCCCCCDDDDDFFFFF</p>
        <p>AAAAABBBBBCCCCCDDDDDFFFFF</p>
        <p>AAAAABBBBBCCCCCDDDDDFFFFF</p>
        <p>AAAAABBBBBCCCCCDDDDDFFFFF</p>
        <p>AAAAABBBBBCCCCCDDDDDFFFFF</p>
        <p>AAAAABBBBBCCCCCDDDDDFFFFF</p>
        <p>AAAAABBBBBCCCCCDDDDDFFFFF</p>
        <p>AAAAABBBBBCCCCCDDDDDFFFFF</p>
    </div>

</body>
</html>

- - 制作导航栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        
        body,ul,li{
            margin: 0;
            padding: 0;
        }

        ul,li{
            list-style: none;
        }

        .nav{
            width: 400px;
            height: 40px;
            background: pink;
            margin: 20px auto;
        }

        .nav ul li{
            float: left;
        }

        .nav ul li a{
            display: inline-block;
            height: 40px;
            font: 14px/40px 微软雅黑;
            text-decoration: none;
            padding: 0 20px;
        }

        .nav ul li a:hover{
            background: #aaa;
        }

    </style>
</head>
<body>

    <div class="nav">
        <ul>
            <li>
                <a href="#">百度</a>
            </li>

            <li>
                <a href="#">百度一下</a>
            </li>

            <li>
                <a href="#">Google</a>
            </li>
        </ul>
    </div>

</body>
</html>

- - 网页布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .header,.main,.footer{
            width: 500px;
        }

        .header,.footer{
            height: 100px;
            background: pink;
        }

        .main{
            height: 300px;
            background: blue;
        }

        .left,.right{
            width: 100px;
            height: 300px;
        }

        .left{
            background: orange;
            float: left;
        }

        .content{
            width: 300px;
            height: 300px;
            background: yellow;
            float: left;
        }

        .right{
            background: green;
            float: right;
        }

        .content-top,.content-bottom{
            height: 150px;
        }

        .content-top{
            background: lightgreen;

        }

        .content-bottom{
            background: purple;
        }
    </style>
</head>
<body>

    <div class="header"></div>

    <div class="main">
            <div class="left"></div>

            <div class="content">
                <div class="content-top"></div>
                <div class="content-bottom"></div>
            </div>

            <div class="right"></div>
    </div>

    <div class="footer"></div>

</body>
</html>

清除浮动
- 清除不是删除浮动
- 清除浮动是清除浮动产生的不良影响
- 额外标签法: 在浮动元素后边加一个标签, 清除浮动

    <div class="left-bar"></div>
    <div class="right-bar"></div>
    <div style="clear:both;"></div>

- 在外边的父盒子上使用: overflow: hidden;
  - 如果盒子在内容外, 会被裁掉

        .conent{
            overflow: hidden;
             500px;
        }

- 伪元素清除浮动

    <style type="text/css">

        .clearfix:after{
            content: ".";
            display: block;
            height: 0;
            line-height: 0;
            visibility: hidden;
            clear: both;
        }

        .clearfix{
            zoom: 1;
        }

    </style>

overflow
- overflow: hidden;　　会将出了盒子的内容裁掉
- overflow: auto;　　　当内容出了盒子之外, 会自动生成滚动条, 如果内容没有超过盒子, 则不生成滚动条
- overflow: scroll;　　不管内容有没有出盒子, 都会生成滚动条
- overflow: visible;　　内容出了盒子也会显示, 不生成滚动条

定位 position

定位方向: left | right | top | bottom
静态定位: 静态定位. 默认值, 就是文档流

position: static;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">

        body{
            margin: 0;
        }

        .father{
            width: 300px;
            height: 300px;
            background: green;
            position: absolute;
        }

        .box{
            width: 100px;
            height: 100px;
            background: red;
            /*静态定位*/
            /*position: static;*/

            /*绝对定位*/
            position: absolute;
            right: 100px;
        }

        .box1{
            width: 200px;
            height: 200px;
            background: green;
        }

        .baby{
            position: absolute;
            width: 100px;
            height: 100px;
            background: orange;

            /*调整元素的层叠顺序 默认值是 0~99, 值越大, 元素越在上面*/
            z-index: 2;
        }

        .baby1{
            position: absolute;
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="box"></div>
    </div>

    <span class="baby"></span>

    <span class="baby1"></span>

    <!-- <div class="box1"></div> -->

</body>
</html>

绝对定位: position: absolute;
- 特点
  - 元素使用绝对定位之后不占据原来的位置(脱标)
  - 元素用使用绝对定位, 位置是从浏览器出发.
  - 嵌套的盒子, 父盒子没有使用定位, 子盒子绝对定位, 子盒子是从浏览器出发的.
  - 嵌套的盒子, 父盒子使用定位, 子盒子绝对定位, 子盒子是从父元素的位置出发的.
  - 给行内元素使用绝对定位之后, 转换为行内块(不推荐使用)

相对定位: position: relative;

特点

位置从自身出发
还占据原来的位置(不脱标)
子绝父相(父元素相对定位, 子元素绝对定位)
行内元素使用相对定位不能转行内块

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">

        .father{
            width: 500px;
            height: 500px;
            background: #eee;
        }

        .red,.green{
            width: 100px;
            height: 100px;
        }

        .red{
            background: red;
            position: relative;
            left: 200px;
        }

        .green{
            background: green;
        }
    </style>
</head>
<body>

    <div class="father">
        <div class="red"></div>
    </div>
    <!-- <div class="green"></div> -->

</body>
</html>

固定定位: position: fixed;

特点

元素使用固定定位之后不占据原来的位置(脱标)
元素用使用固定定位, 位置是从浏览器出发.
给行内元素使用固定定位之后, 转换为行内块(不推荐使用)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box,.box1{
            width: 100px;
            height: 100px;
        }

        .box{
            background: red;
            position: fixed;
            bottom: 5px;
            right: 5px;
        }

        .box1{
            background: green;
        }

        span{
            background: red;
            position: fixed;
            bottom: 5px;
            right: 5px;
        }


    </style>
</head>
<body>

    <div class="box"></div>
    <div class="box1"></div>


    <span></span>

</body>
</html>