网页开发学习笔记五: HTML行内块级元素

时间：2017-02-26 18:57:30 阅读：182 评论：0 收藏：0 [点我收藏+]

标签分类

块级元素　　div h1~h6 p ul li
- 特点
  - 独占一行
  - 可以设置宽度
  - 嵌套(包含)下, 子块元素的宽度(没有定义的情况下)与父块元素宽度默认一致

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        div{
            height: 200px;
            background-color: orange;
        }

        p{
            height: 300px;
            background-color: green;

        }

        .box{
            width: 100px;
        }

        .box p{
            width: 300px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>

    <div>AAAAA</div>
    <p>BBBBB</p>

    <div class="box">
        <p>CCCCC</p>
    </div>

</body>
</html>

行内元素　　span a strong em ins del
- 特点
  - 在一行上显示
  - 不能直接定义宽高

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
/*        span{
            width: 600px;
            height: 600px;
            background-color: orange;
        }*/

        .box{
            width: 500px;
            height: 500px;
            background-color: #888;
        }

        .box span{
            background-color: red;
        }
    </style>
</head>
<body>

    <span>AAAAA</span>

    <a href="#">BBBBB</a>

    <strong>CCCCC</strong>

    <div class="box">
        <span>DDDDD</span>
    </div>

</body>
</html>

行内块级元素(内联元素)　　input img
- 特点
  - 在一行上显示
  - 可以设置宽高

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        img{
            width: 300px;
            vertical-align: top;
        }

        input{
            width: 300px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>

    <img src="1.jpg"> 
    <input type="text">

</body>
</html>

标签之前的相互转换　

块级元素转行内元素　　display: inline;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">

        div,p{
            /*块元素转换为行内元素*/
            display: inline;
            width: 500px;
            height: 500px;
            background-color: red;
            text-align: center;
        }

    </style>
</head>
<body>


    <div>AAAAA</div>

    <p>BBBBB</p>


</body>
</html>

行内元素转块级元素　　display: block;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">

        span{
            /*行内元素转换为块级元素*/
            display: block;
            width: 400px;
            height: 400px;
            background-color: orange;
            text-align: center;
        }
    </style>
</head>
<body>

    <span>CCCCC</span>
    <span>DDDDD</span>

</body>
</html>

块级元素和行内元素转行内块级元素　　display: inline-block;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        div,a,span,strong{
            /*块级元素 和 行内元素 转化为 行内块级元素*/
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: orange;
            text-align: center;
        }
    </style>
</head>
<body>

    <div>AAAAA</div>

    <a href="#">BBBBB</a>

    <span>CCCCC</span>

    <strong>DDDDD</strong>

</body>
</html>

网页开发学习笔记五: HTML行内块级元素

原文：http://www.cnblogs.com/fanxiaocong/p/6445133.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)