CSS之标签元素显示模式

块元素

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构搭建。

常见的块级元素有：<h1>~<h6>、<P>、<div>、<ul>、<ol>等等

块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。

行内元素

行内元素不占有独立区域，仅仅靠自身的字体大小和图片尺寸来支持结构，一般不可设置宽度高度对齐等属性，常用于控制页面的文本样式。

行内元素一般只能放文本和其他行内元素 

常见的行内元素有<a><b><em><strong><i><del><span>等等

设置高宽无效，但水平方向padding和margin可以设置，但垂直方向无效。


行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。

行内块元素

既有块元素的功能又有行元素的功能

在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。

<img src="media/lyc.jpg" width="400" />

display可以在三个元素模式中进行转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display模式转换</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: coral;
            display: inline;/*将块元素转换为行元素*/
        }
        span{
            width: 100px;
            height: 100px;
            background-color:red;
            display: block;/*将行内元素元素转换为块元素*/
        }
        a{
            width: 100px;
            height: 100px;
            background-color:yellow;
            display: inline-block;/*将行内元素元素转换为行内块元素*/
        }

    </style>
</head>
<body>
<div>块元素</div>
<div>块元素</div>
<div>块元素</div>
<span>行内元素</span>
<span>行内元素</span>
<span>行内元素</span>
<a href="#">行内块元素</a>
<a href="#">行内块元素</a>
<a href="#">行内块元素</a>
</body>
</html>

 

posted @ 2019-04-03 15:41  showTimehzy  阅读(244)  评论(0)  编辑  收藏  举报