什么是行内元素的盒模型

翘指

于 2022-10-31 20:56:19 发布

阅读量196

点赞数

分类专栏： html 文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_65334415/article/details/127622827

版权

html 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

行内元素的盒模型

行内元素不支持设置宽度和高度

但是这并不是说明行内元素没有内容区

而是通过width和height不能改变内容区的大小

行内元素的内容区是由他里面的内容决定的，并不能手动进行修改

行内元素可以设置padding，但是垂直方向不会影响页面的布局

行内元素可以设置border，垂直方向的border不会影响页面的布局

行内元素可以设置margin，垂直方向的margin不会影响布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        

        
        .box1{
            width: 200px;
            height: 200px;
            margin-top: 500px;
            background-color: aqua;
            

        }
        span{
            width: 100px;
            height: 100px;
        background-color: blue;
<!-- span行内元素的内容区并没有发生改变-->
        
        }
        
    </style>
</head>
<body>
    <span>我是行内元素</span>
    <div class="box1"> </div>
    
</body>
</html>

display

display:用来设置元素显示的类型

可选值：

inline

将元素设置为行内元素

block

将元素设置为块元素

inline-block

将元素设置为行内块元素（行内块既可以设置宽度和高度，又不会独占一行）

table:

将元素设置为一个表格

none:

元素不再页面中显示（既不显示也不会再占据位置，要与hidden区别开）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        

        
        .box1{
            width: 200px;
            height: 200px;
            margin-top: 500px;
            background-color: aqua;
            

        }
        span{
            display: block;
            width: 100px;
            height: 100px;
        background-color: rgb(238, 0, 255);
        
        }
        
    </style>
</head>
<body>
    <span>我是行内元素</span>
    <div class="box1"> </div>
    
</body>
</html>

none举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        

        
        .box1{
            width: 200px;
            height: 200px;
            margin-top: 500px;
            background-color: aqua;
            

        }
        span{
           display: none;
            width: 100px;
            height: 100px;
        background-color: rgb(238, 0, 255);
        
        }
        
    </style>
</head>
<body>
    <span>我是行内元素</span>
    <div class="box1"> </div>
    
</body>
</html>

visibility

visibility:用来设置元素的显示状态

可选值：

visible ：

默认值，元素在页面中正常显示

hidden：

元素在页面中隐藏，不显示，但是依然占据页面的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        

        
        .box1{
            width: 200px;
            height: 200px;
            margin-top: 500px;
            background-color: aqua;
            

        }
        span{
           visibility: hidden;
            width: 100px;
            height: 100px;
        background-color: rgb(238, 0, 255);
        
        }
        
    </style>
</head>
<body>
    <span>我是行内元素</span>
    <div class="box1"> </div>
    
</body>
</html>

翘指

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
什么是行内元素的盒模型

行内元素不支持设置宽度和高度，但是这并不是说明行内元素没有内容区，而是通过width和height不能改变内容区的大小，行内元素的内容区是由他里面的内容决定的，并不能手动进行修改。hidden：元素在页面中隐藏，不显示，但是依然占据页面的位置。inline-block 将元素设置为行内块元素（行内块既可以设置宽度和高度，又不会独占一行）行内元素可以设置border，垂直方向的border不会影响页面的布局。inline 将元素设置为行内元素。行内元素可以设置padding，但是垂直方向不会影响页面的布局。
复制链接

扫一扫