CSS之行内元素的盒模型

最新推荐文章于 2022-10-13 18:18:38 发布

原创最新推荐文章于 2022-10-13 18:18:38 发布 · 155 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html5 #html

CSS学习笔记专栏收录该内容

8 篇文章

订阅专栏

行内元素不支持设置宽度和高度，但如果必须为行内元素设置宽度和高度，可以通过display来设置元素的显示类型 visibility来设置元素的显示状态

<!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>
        .s1{
            /* 
            行内元素的盒内模型
                -行内元素不支持设置宽度和高度
                -行内元素可以设置padding，但垂直方向padding不会影响页面的布局
                -行内元素可以设置border，垂直方向的border不会影响页面的布局
                -行内元素可以设置margin，垂直方向的margin不会影响布局
            width height */
            width:100px;
            height:100px;
            background-color: skyblue;
            /* margin: 50px; */
            /* padding: 50px; */
            /* border:20px solid ; */
        }
        .s2{
            /*
            如果想给行内元素添加宽高，可以用
                display 来设置元素显示的类型
                -可选值：
                    inline：将元素设置为行内元素
                    block：将元素设置为块元素
                    inline-block：将元素设置为行内块元素
                        行内块，既可以设置宽度和高度，有不会独占一行
                    table：将元素设置为一个表格
                    none：元素不在页面中显示
                visibility 用来设置元素的显示状态
                    可选值：
                    visible 默认值，元素在页面中正常显示
                    hidden 元素在页面中隐藏不显示 但是依然占据页面中的位置
             */
             visibility: visible;
             display: inline-block;
             width: 50px;
             height: 50px;
            background-color: slateblue;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: tomato;
        }
    </style>
</head>
<body>
    <span class="s1">span1</span>
    <span class="s2">span2</span>
    <div class="box1"></div>
</body>
</html>

实现效果图如下