css之块级元素/行内元素的区别(display属性)

最新推荐文章于 2022-08-22 09:00:41 发布

一个虽然帅,但是菜的cxy

最新推荐文章于 2022-08-22 09:00:41 发布

阅读量121

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_38777614/article/details/105045759

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一：行内元素/块级元素/行内块级元素的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
            display属性：常用的属性值
            display: block; 代表: div,p,<h1>..<h6>,<ol>,<ul>,<table>,<form>
            display: inline; 代表: <span>,<a>,<i>
            display: inline-block; 代表:<img>,<input|select|textarea|button>
            display: none;
        */
        *{
            margin: 0px;
            padding: 0px;
        }

        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin-left: 20px;
            margin-top: 20px;
            padding-left: 20px;
            padding-top: 20px;
        }

        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /*行内元素,上下外边距无效！*/
            margin-top: 20px;
            margin-bottom: 20px;

        }

        img{
            width: 100px;
            height: 50px;
            border: 1px solid red;
            margin-left: 20px;
            margin-top: 20px;
            padding-left: 20px;
            padding-top: 20px;
        }
    </style>
</head>
<body>
    <!--
        一：行内元素的特点
        1.不会独占一行
        2.设置宽高无效,宽高的大小由内容撑开！
        3.设置上下外边距无效,(其他的方向的内/外都行)
        4.行内元素只能包含行内元素
    -->
    <span>我是行内元素</span>

    <!--
        二：块级元素的特点
        1.不设置宽度的话,默认会独占一行（是父元素的全部 ）,高度是由内容的多少决定的！
        2.可以设置宽高,支持上右下左(顺时针)的内/外边距！
        3.块级元素可以包含块级元素|行内元素
    -->
    <div>我是块级元素</div>


    <!--
        三：行内块级元素的特点
        即可以设置宽高（块级元素），又不会独占一行(行内元素)，设置上右下左，内/外边距都会生效
        注：它和块级元素的区别就是：不会独占一行！！
    -->
    <img src="../imgs/bd_logo.png" alt="">我是图片啊,

</body>
</html>

二： 脱离了文档流（浮动和绝对定位）之后，不管是行内元素还是块级元素，最终都会变成行内块级元素(inline-block)的特点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
            脱离文档流的两种方式:
            1. float
            2. position: absolute;
            块级元素或者行内元素脱离文档流会变成inline-block;(行内块级元素)
        */

        /*去除一些元素的默认样式*/
        *{
            padding: 0px;
            margin: 0px;
        }

        div{
            border: 1px solid red;
            float: left;
            width: 100px;
            height: 100px;
        }

        span{
            border: 1px solid red;
            float: right;
            width: 100px;
            height: 100px;
        }


    </style>
</head>
<body>
    <!--
        块级元素脱离文档流之后，
        就变成了行内块级元素的特点了！
        跟块级元素的区别就是不独占一行了！
     -->
    <div>我是块级元素</div>

    <!--行内元素-->
    <span>我是行内元素</span>
</body>
</html>

一个虽然帅,但是菜的cxy

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css之块级元素/行内元素的区别(display属性)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /* display属性：常用的属性值 d...
复制链接

扫一扫

专栏目录