zoukankan      html  css  js  c++  java
  • (前端)html与css css 15、标准文档流

    标准文档流

    常用的Word文档就是一个经典的标准文档流,内容必须是从上往下,从左往右书写的,有一个光标控制,前面的大小或者内容发生变化,后面的内容会跟着发生一些位置变化。

    制作的html网页就是一个标准文档流。

    1、从微观上有特殊的性质

    1)html文本之间有空白折叠现象。

    2)文字、图片、表单元素等这些文本类型元素有一个特点:高低不齐,底边对齐。

    3)文字在盒子内书写完一行,会自动换行。

    2、块级元素和行内元素

    标准文档流将html分为了块级标签和行内标签。

    块级标签:所有的容器标签都是块级标签,文本级标签里的p标签也是块级标签。

    行内标签:除了p以外的所有文本级标签。

    块级标签:body,div, h1,p ,ul,ol,li ,dl,dt,dd,table,tr,td等。

    行内标签:a,span,img,input等文本类。

    ①块级标签特点:

    a) 块级元素会独占一行,同行不会出现其他的同级标签。代码↓

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Document</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 200px;
                height: 40px;
                background-color: pink;
                margin-bottom: 10px;
                font-size: 28px;
                line-height: 40px;
    
            }
        </style>
    </head>
    <body>
        <div>1</div>
        <div>2</div>
    </body>
    </html>
    View Code

    效果图↓

    b) 可以设置宽高。与行内标签对比代码↓

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Document</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 200px;
                height: 40px;
                background-color: pink;
                margin-bottom: 10px;
                font-size: 28px;
                line-height: 40px;
    
            }
            /*与行内标签对比*/
            span{
                width: 200px;
                height: 40px;
                background-color: pink;            
            }
        </style>
    </head>
    <body>
        <div>1</div>
        <div>2</div>
        <span>3</span>
    </body>
    </html>
    View Code

    效果图↓

    可以看出行内标签无法设置宽高。

    c) 嵌套的关系,子盒子不设置宽度,他会自动继承父亲内容宽度的100%代码↓

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Document</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                /*不设置宽度,继承父盒子*/
                /* 200px;*/
                height: 40px;
                background-color: pink;
                margin-bottom: 10px;
                font-size: 28px;
                line-height: 40px;
    
            }
            /*与行内标签对比*/
            span{
                width: 200px;
                height: 40px;
                background-color: pink;            
            }
        </style>
    </head>
    <body>
        <div>1</div>
        <div>2</div>
        <span>3</span>
    </body>
    </html>
    View Code

    效果图↓

    没有给div设置宽度,他自动继承了body

    ②行内标签特点:

    a) 行内标签不独占一行,可以与其他的行内元素并排在一行,代码↓

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Document</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            span{
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <span>3</span><span>3</span><span>3</span>
        <span>3</span>
        <span>3</span>
        <span>3</span>
        <span>3</span>
        <span>3</span>
    </body>
    </html>
    View Code

    效果图↓

    b) 行内元素不能设置宽高,代码↓

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Document</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            span{
                width: 200px;
                height: 200px;
                padding: 10px;
                margin-right: 20px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <span>3</span><span>3</span><span>3</span>
        <span>3</span>
        <span>3</span>
        <span>3</span>
        <span>3</span>
        <span>3</span>
    </body>
    </html>
    View Code

    效果图↓

    注意:行内元素只是不能设置宽高,其他的如border,paddin,margin都可以设置。

    c) 行内元素不设置高度,不会自动继承父亲的宽度,只能通过增加内容将宽度撑开。代码↓

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Document</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            span{
                width: 200px;
                height: 200px;
                padding: 10px;
                border: 1px solid red;
                margin-right: 20px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <!-- 通过添加内容使行内元素宽度增加 -->
        <span>333333333333333333333333333333333333333333333333333333333333</span>
    </body>
    </html>
    View Code

    效果图↓

    ③行内块标签:

    既可以设置高度也可以排在同一行,如td

    有一个属性可以在块级元素和行内元素之间进行转换

    显示模式:display。标签在html网页里是以哪种形式进行渲染。

    属性值: 块级block,行内inline,行内块inline-block

    1、块级转行内 直接添加display: inline(不常用) 代码↓

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Document</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                /*不设置宽度,继承父盒子*/
                /* 200px;*/
                height: 40px;
                background-color: pink;
                margin-bottom: 10px;
                font-size: 28px;
                line-height: 40px;
    
            }
            .box{
                display: inline;
            }
            /*与行内标签对比*/
            span{
                width: 200px;
                height: 40px;
                background-color: pink;            
            }
    
        </style>
    </head>
    <body>
        <div class="box">1</div>
        <div>2</div>
        <span>3</span>
    </body>
    </html>
    View Code

    效果图↓

    2、行内转块级 直接添加display: block(常用) 代码↓

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Document</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            span{
                width: 200px;
                height: 200px;
                padding: 10px;
                border: 1px solid red ;
                margin-right: 20px;
                background-color: pink;
                /*行内转块*/
                display: block;
            }
        </style>
    </head>
    <body>
        <span>3</span><span>3</span><span>3</span>
        <span>3</span>
        <span>3</span>
        <span>3</span>
        <!-- 通过增加内容使宽度撑开 -->
        <span>33333333333333333333333333333333333333333333</span>
        <span>3</span>
    </body>
    </html>
    View Code

    效果图↓

    3、 转行内块 直接添加display: inline-block 代码↓

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Document</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            span{
                width: 200px;
                height: 40px;
                padding: 10px;
                border: 1px solid red ;
                margin-right: 20px;
                margin-bottom: 10px;
                background-color: pink;
                /*行内转块*/
                /*display: block;*/
                /*转行内块*/
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <span>3</span><span>3</span><span>3</span>
        <span>3</span>
        <span>3</span>
        <span>3</span>
        <!-- 通过增加内容使宽度撑开 -->
        <span>33333333333333333333333333333333333333333333</span>
        <span>3</span>
    </body>
    </html>
    View Code

    效果图↓

    注意:标准文档流制作网页有局限,有很多布局效果不能完成。

    解决办法: 让元素脱离标准流,既可以设置宽高,又可以一行排列。

    脱离标准流三种方法: 浮动、绝对定位、固定定位

  • 相关阅读:
    程序员的自我修养
    c++中的const 限定修饰符
    基于.net开发平台项目案例集锦
    中国期货公司排行及相关上市公司
    备份一些好的书籍名字
    商业银行房贷业务节后骤然下降
    散户炒股七大绝招 巨额获利风险小 (网摘)
    上海2月住宅供应剧减七成 房企捂盘保价
    2009年中国各省人均GDP排名(鄂尔多斯人均GDP将很有可能超过两万美元,全国第一)
    (载自MSN )个人炒汇多年来的一些心得
  • 原文地址:https://www.cnblogs.com/StevenSunYiwen/p/11206390.html
Copyright © 2011-2022 走看看