zoukankan      html  css  js  c++  java
  • 一天搞定HTML----标签类型与类型转换05

    标签类型:

    标签只有两类:行内元素和块元素

    行内元素:内容撑开宽高
    块元素:默认独占一行

    注意:

    在使用display时,会遇到一种inline-block类型的标签。这种标签不属于标签的分类。


    1.块元素block特点

    这里写图片描述

    代码演示

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                body{
                    margin: 0;
                    padding: 0;
                }
                div{
                    height: 100px;
                    background: red;
                    margin: 50px;
                    padding: 30px;
                }
            </style>
        </head>
        <body>
            <!--
                块元素的特征
                    1、默认独占一行
                    2、没有给宽度的时候,宽度是auto,撑满一行(宽度就是父级的宽度)
                    3、支持所有的css命令
            -->
            <div>div</div>
        </body>
    </html>
    

    2.行内元素inline特点

    这里写图片描述

    代码演示

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                body{
                    margin: 0;
                    padding: 0;
                }
                span{
                    background: pink;
                    width: 200px;
                    height: 200px;
                    /*margin: 50px;*/
                    padding: 50px;
                }
                div{
                    background: green;
                }
            </style>
        </head>
        <body>
            <!--
                行内元素的特征
                    1、内容撑开宽高
                        宽高的值都是auto,只不过显出来的宽高是由内容撑开的
                    2、不支持设置宽高
                    3、不支持上下的margin与上下padding(左右支持)
                        上下的padding是有问题,虽然把背影撑出来了,这个只是表面现象,它不会对其它的元素有影响
                    4、所有的行内元素都会在一行显示
                    5、代码换行会被解析成一个空格
            -->
            <span>铁道学院</span>
            <strong>kaivon</strong>
            <div>div</div>
        </body>
    </html>
    

    3.行内块元素inline-block特点

    注意:它不属于标签分类中的一类。

    这里写图片描述

    代码演示

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                span{
                    width: 100px;
                    height: 100px;
                    background: red;
                    display: inline-block;
                }
                div{
                    width: 100px;
                    height: 100px;
                    background: green;
                    display: inline-block;
                }
            </style>
        </head>
        <body>
            <!--
                display:inline-block;           行内块元素
                    特征:
                        1、行内元素支持宽高
                        2、块元素可以在行中显示
                        3、不给宽高的话,宽度会由内容撑开
                        4、代码换行会被解析成一个空格
                        5、IE6、7不支持块元素的inline-block
                            IE6、7不认识inline-block,给行内元素加上这个属性后会触发IE的haslayout特点,会让行内元素具有与inline-block一样的特征,所以它不支持块元素的inline-block
            -->
            <span>kaivon</span>
            <div>kaivon</div>
        </body>
    </html>
    

    4.块元素和行内元素有哪些?

    行内元素:

    a,span,strong,em,mark,img,time

    块元素:

    div ,h1~h6,p,列表标签(ul,ol,li,dd,dt),header,nav,footer,section,article,aside

    5.标签类型转换

    通过设置display的取值来改变标签的类型:

    display的值:

    1)none:隐藏标签
    
    2)block:块元素
    
    3)inline:行内元素
    
    4)inline-block:行内块元素
    

    代码演示

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                div{
                    width: 100px;
                    height: 100px;
                    background: green;
                    color: #fff;
                    display: inline;
                }
                span{
                    background: red;
                    width: 100px;
                    height: 100px;
                    display: block;
                }
            </style>
        </head>
        <body>
            <!--
                块元素转行内元素            display:inline
                    转换后块元素就具有了行内元素的特征(只是显示为行内元素,本身还是块元素)
    
                行内元素转块元素            display:block
                    转换后行内元素就具有了块元素的特征(只是显示为块元素,本身还是行内元素)
            -->
            <div>div1</div>
            <div>div2</div>
    
            <span>span1</span>
            <span>span2</span>
        </body>
    </html>
    
  • 相关阅读:
    软件测试人员的年终绩效考核怎么应对
    收藏
    顶踩组件 前后两版
    订阅组件
    hdu 1963 Investment 完全背包
    hdu 4939 Stupid Tower Defense 动态规划
    hdu 4405 Aeroplane chess 动态规划
    cf 414B Mashmokh and ACM 动态规划
    BUPT 202 Chocolate Machine 动态规划
    hdu 3853 LOOPS 动态规划
  • 原文地址:https://www.cnblogs.com/TCB-Java/p/6853974.html
Copyright © 2011-2022 走看看