一天搞定HTML----标签类型与类型转换05

来源：互联网发布：淘宝新规则2016年9月编辑：程序博客网时间：2024/06/05 11:06

标签类型：

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

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

注意：

在使用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>

0 0