H5笔记——CSS常见的标签类型

2017-01-23 本文已影响69人行走的苹果哥

CSS中，有以下几种标签类型：块级标签、行内标签、行内-块级标签。

块级标签

特点：
1.独占一行的标签；
2.能随时设置宽度和高度。
eg：div、p、h1、h2、ul、li

<div> div标签 </div>
<p> 段落标签 </p>
<!--列表标签-->
<ul>
     <li> 我是无序列表 </li>
     <li> 我是无序列表 </li>
     <li> 我是无序列表 </li>
     <li> 我是无序列表 </li>
     <li> 我是无序列表 </li>
</ul>
<!--标题标签:h标签-->
<h1>我是h1标签</h1>
<h2>我是h2标签</h2>

行内标签

特点：
1.多个行内标签能同时显示在一行；
2.宽度和高度取决于内容的尺寸。
eg：span、a、label

<span>我是行内标签</span>
<a href="#">我是超链接</a>

行内-块级标签

特点：
1、多个行内-块级标签可以显示在同一行；
2、能够随时设置宽度和高度。
eg：input、button

<input placeholder="我是输入框">
<button>我是按钮</button>

我把以上三种标签类型完整展示出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见的标签类型</title>
    <style>
        div{
            background-color: red;
        }
        p{
            background-color: yellow;
        }
        span{
            background-color: aqua;
            width: 300px;
            height: 90px;
        }
        a{
            background-color: blueviolet;
        }
        input{
            /*background-color: burlywood;*/
            width: 200px;
            height: 100px;
        }
        button{
            /*background-color: pink;*/
            width: 100px;
            height: 80px;
        }

    </style>
</head>
<body>
<!--块级标签-->
    <div> div标签 </div>
    <div> div标签 </div>
    <div> div标签 </div>
    <p> 段落标签 </p>

<!--行内标签-->
    <span>我是行内标签</span>
    <span>我是行内标签</span>
    <span>我是行内标签</span>
    <a href="#">我是超链接</a>

<!--行内—块级标签-->
    <input placeholder="我是输入框">
    <button>我是按钮</button>
</body>
</html>

显示效果如下：

Paste_Image.png

如果我们想要让这几种标签类型相互转换，那就要用到display属性。

display：规定元素应该生成的框的类型。
实现相互转换需要用到的值：
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
通过显示效果来进行对比，在<style>中添加display代码：

<style>
        div{
            background-color: red;
            /* 隐藏标签 */
            /*display: none;*/
            /*改变标签的类型：块级——>行内标签*/
            /*display: inline;*/
            /*改变标签的类型：块级——>行内-块级标签*/
            display: inline-block;
        }
        p{
            background-color: yellow;
        }
        span{
            background-color: aqua;
            width: 300px;
            height: 90px;
            /*改变标签的类型：行内——>块级标签*/
            /*display: block;*/
            /*改变标签的类型：行内——>行内-块级标签*/
            display: inline-block;
        }
        a{
            background-color: blueviolet;
        }
        input{
            /*background-color: burlywood;*/
            width: 200px;
            height: 100px;
        }
        button{
            /*background-color: pink;*/
            width: 100px;
            height: 80px;
        }

    </style>