Unit 6.标准文档流和浮动介绍

一. 什么是标准文档流

　　文本流其实就是文档的读取和输出顺序，也就是我们通常看到的由左到右、由上而下的读取和输出形式，在网页中每个元素都是按照这个顺序进行排序和显示的，而float和position两个属性可以将元素从文本流脱离出来显示。

　　标准文档流的围观现象有3种:　　

　　1.空白折叠现象:多个空格或者换行会被折叠成一个.
　　2.高矮不齐,底边对齐.
　　3.自动换行,一行写不完,自动换行.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标准文档流</title>
    <style type="text/css">
        span{
            font-size: 50px;
        }
    </style>

</head>
<body>
    <!-- 文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。 -->
    <!-- 标准文档流的微观现象?
        1.空白折叠现象:多个空格或者换行会被折叠成一个.
        2.高矮不齐,底边对齐.
        3.自动换行,一行写不完,自动换行.


    -->
    <div>
        你好               你好




        你好
    </div>
    <div>
        你好好你好好你好好<span>姚明</span>好你好好你好好你好好你好好
    </div>
</body>
</html>

3种微观现象

二. 元素间转换

使用display:block,inline,inline-block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块级元素和行内元素转换</title>
    <style type="text/css">
        /*块状元素转换成行内元素*/
        .box1{
            display: inline;
            width: 200px;
            height: 30px;
            border: 3px solid red;
        }
        .box2{
            width: 200px;
            height: 30px;
            font-size: 30px;
            border: 3px solid green;
            margin-top: 10px;
        }
        /*行内元素转换成块级元素*/
        span{
            background-color: green;
            width:50px;
            margin-top:10px;
            display: block;
            /*隐藏标签,彻底的隐藏标签,原来标签的位置会被后面的内容覆盖掉,不占用原来的位置*/
            /*display: none;*/
            /*只隐藏标签内容,保留标签的区域大小,占用原来的位置.*/
            visibility: hidden;
        }
        /*块状元素转换成行内块元素*/
        /*.box3{
            display: inline-block;
            margin-top: 10px;
            width: 200px;
            height: 30px;
            border: 3px solid red;
        }*/
    </style>
</head>
<body>
    <div class="box1">内容1</div>
    <div class="box1">内容1</div>
    <div class="box2">内容2</div>
    <div class="box3">内容3</div>
    <div class="box3">内容3</div>
    <div class="box3">内容3</div>
    <span>中国</span>
    <span>中国</span>
    <img src="./1.png" alt="">
    <img src="./1.png" alt="">
</body>
</html>

块级元素和行内元素转换

三. 浮动(float)

　　浮动是css布局中使用最多的属性!

　　定义:使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。

　　浮动的实际用途，可设置文字环绕或使元素宽度由内容填充（类似Inline-block)。使用浮动需要注意的是如果浮动的元素高度比父级容器还高，那么需要设置父级容器的overflow属性为auto,使其自动撑满。

　　浮动的3个特点:　　　　

　　　　1.浮动元素的脱标
　　　　2.浮动元素的互相贴靠
　　　　3.浮动元素的"字围"效果
　　　　4.紧凑效果　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动介绍</title>
    <style type="text/css">
        *{
            border: 0;
            margin: 0;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
            margin-left: 100px;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: green;
            float: right;
            margin-right: 100px;
        }
    </style>
</head>
<body>
    <!--浮动是布局中用的最多的一个属性. 
        浮动效果:两个元素并排了,且可以设置宽高.
        浮动的三个特点:
                    1.浮动元素的脱标
                    2.浮动元素的互相贴靠
                    3.浮动元素的"字围"效果
                    4.紧凑效果
         -->
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

浮动小例子

Unit 6.标准文档流和浮动介绍

一. 什么是标准文档流

二. 元素间转换

三. 浮动(float)

猜你喜欢