盒子模型的使用

最新推荐文章于 2023-03-02 19:42:10 发布

薯片

最新推荐文章于 2023-03-02 19:42:10 发布

阅读量361

点赞数

分类专栏： HTML与CSS基础知识文章标签： html css

本文链接：https://blog.csdn.net/weixin_52102646/article/details/115303387

版权

HTML与CSS基础知识专栏收录该内容

8 篇文章 0 订阅

订阅专栏

你好！这是我自己编辑的一些知识点。如果你想学习CSS与HTML的有关知识, 可以仔细阅读这篇文章，了解一下关于CSS与HTML的基本语法知识。

盒子模型

盒子模型概述

什么是盒子模型

CSS 在HTML 页面中的应用除了可以为HTML元素设置显示样式之外，还有就是实现HTML页面的布局，在CSS中 HTML 页面中的每一个元素都是一个盒子或者说是被一个盒子所包围着，理解CSS中的盒子是实现HTML页面布局和处理元素排列的关键。

盒子模型的组成部分

分为4个部分：

内容区：用来在HTML页面显示内容的区域，可以是文本内容、图片、视频或者其他后代元素
内边距：指的是内容区至边框之间的空白区域
边框：包含内容区和内边距的边界
外边距：指的是当前盒子模型的边框至其他盒子模型的边框之间的区域

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
        .box{
            width: 200px;
            height: 100px;
            padding: 50px;
            border: 1px solid black;
        }
        .content{
            width: 200px;
            height: 100px;
            background-color: rgb(191, 234, 252);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content"></div>
    </div>
</body>
</html>

块级元素与内联元素

在 CSS 中比较广泛应用于 HTML 元素的“盒子”共有3种：

块级元素：每个元素独占一行，块级元素之间是垂直方向排列
内联元素：每个元素不会独占一行，内联元素之间是水平方向排列
行内块级元素：每个元素不会独占一行，行内块级元素之间也是水平方向排列。但行内块级元素与内联元素还是有区别的

块级元素

释：
每一个块级元素都会产生换行，每一个块级元素都会独占一行。多个块级元素之间就是垂直方向的排列规则

内联元素

每一个内联元素都不会产生换行，每一个内联元素都不会独占一行，多个内联元素之间是水平方向的排列规则

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内联元素</title>
    <style>
        a{
            /*内联元素：width和height属性无效，宽度和高度实际等于文本内容或子元素的宽度和高度*/
            width: 500px;
            height: 500px;
            font-size: 46px;
        }
        a:first-child{
            background-color: red;
        }
        a:last-child{
            background-color: seagreen;
        }
    </style>
</head>
<body>
    <a href="#">1略略略</a><a href="#">2略略略</a>
</body>
</html>

行内块级元素

特点：

每一个行内块级元素不会独占一行，行内块级元素之间是水平方向进行排列
行内块级元素可以通过CSS的width属性和height属性设置该元素的宽度和高度
行内块级元素中，盒子模型中的边框，内边距和外边距都是有效的

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内块级元素</title>
    <style>
        button{
            /*行内块级元素：允许设置width和height属性*/
            width: 500px;
            height: 500px;
        }
        /*行内块级元素的对齐方式:其内容下边对齐*/
        div{
            display: inline-block;
            width: 500px;
            height: 500px;
            border: 1px solid black ;
        }
    </style>
</head>
<body>
    <button>1略略略</button><button>2略略略</button>
    <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
         Rerum sint dolor consequatur vel, aspernatur dolore voluptatibus omnis, 
         aliquam blanditiis minus, suscipit quod maxime odio exercitationem enim ab asperiores numquam? 
         Nesciunt. Lorem ipsum, dolor sit amet consectetur adipisicing elit.
         Rerum sint dolor consequatur vel, aspernatur dolore voluptatibus omnis, 
         aliquam blanditiis minus, suscipit quod maxime odio exercitationem enim ab asperiores numquam? 
         Nesciunt.</div>
    <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
        Rerum sint dolor consequatur vel, aspernatur dolore voluptatibus omnis, 
        aliquam blanditiis minus, suscipit quod maxime odio exercitationem enim ab asperiores numquam? 
        Nesciunt.</div>
</body>
</html>

display属性

HTML页面中的元素默认情况可以划分为块级元素、内联元素和行内块级元素，在CSS中提供了display属性，该属性可以修改任何HTML元素为指定元素。

属性值为：

block：将HTML元素设置为块级元素
inline：将HTML元素设置为内联元素
inline-block：将HTML元素设置为行内块级元素

CSS 中的盒子模型

width 属性和 height 属性设置盒子模型的内容区在页面中所占区域
border 属性、padding 属性和 margin 属性分别设置盒子的边框、内边距和外边距

设置盒子模型的大小

除了width和height,还有min-width,max-width,min-height,max-height

盒子的阴影

CSS box-shadow属性用来为HTML元素的盒子模型的边框设置阴影效果，工作原理与text-shadow相似

属性值：

color:可选项，设置盒子边框的阴影颜色
offset-x:必选项，设置盒子边框的阴影在水平方向的偏移量

如果值小于0的话，则表示向左偏移

如果值等于0的话，则表示水平方向不发生任何偏移

如果值大于0的话，则表示向右偏移
offset-y:必选项，设置盒子边框的阴影在垂直方向的偏移量

如果值小于0的话，则表示向上偏移

如果值等于0的话，则表示垂直方向不发生任何偏移

如果值大于0的话，则表示向下偏移
blur-raduis:可选项，设置盒子边框的阴影模糊偏移

如果没有指定，则默认为0，值挺大，模糊半径越大，阴影也就越大越淡
spread-radius:可选项，设置盒子边框的阴影扩散半径，

如果没有指定，则默认为0，此时的阴影与元素是同大小的，值越大，模糊扩散半径越大

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子的阴影</title>
    <style>
        body{
            background-color: slategray;
        }
        div{
            width: 200px;
            height: 100px;
        }
        .box1{
            background-color: seashell;
            box-shadow: skyblue 0 0 5px 5px;
        }
        .box2{
            background-color: springgreen;
            box-shadow:inset turquoise 0 0 5px 5px ;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="box2"></div>
</body>
</html>

盒子模型的边框

什么是盒子模型的边框

CSS 提供了border属性表示边框，但在实际应用时，边框的复杂度远不止于此。

由于CSS3版本为边框新增了很多属性，目前分为：

边框宽度
边框颜色
边框样式
边框圆角
边框图像

border 属性

CSS border属性用来设置盒子模型的边框，分为：

border-width：表示边框的宽度
border-style：表示边框的样式
border-color：表示边框的颜色

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型的边框</title>
    <style>
        div{
            width: 300px;
            height: 200px;
            border-width: 10px;
            border-color: yellow;
            /*顺序：上 右 下 左*/
            /*solid表示实线*/
            border-top-style: solid;
            /*double表示双实线*/
            border-bottom-style:double;
            /*dashed表示线状虚线*/
            border-left: dashed;
            /*dotted表示点状虚线*/
            border-right:dotted;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

边框圆角

border-radius属性的值表示的与边框交集的圆形的半径或者椭圆形的长半径与短半径

具体语法如下：

border-radius:radius;
border-radius:horizontal-radius / vertical-radius;

radius：表示圆形半径
horizontal-radius / vertical-radius：表示椭圆的长半径和短半径，其中 horizontal-radius 表示椭圆形的水平方向的半径，vertical-radius 表示椭圆形的垂直方向的半径

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框的圆角</title>
    <style>
        .box1,
        .box2,
        .box3{
            width: 200px;
            height: 200px;
            border: 1px solid black ;
        }
        .box1{
            border-radius: 10px;
        }
        .box2{
            border-radius: 10px / 20px;
        }
        .box3{
            width: 100px;
            height: 100px;
            border-radius: 50px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <br>
    <br>
    <br>
    <br>
    <div class="box2"></div>
    <br><br>
    <div class="box3"></div>
</body>
</html>

边框图像

CSS 新增border-image属性允许使用图像来设置边框

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框的图像</title>
    <style>
        div{
            width: 200px;
            height: 200px;

            border-width: 30px;
            /*
             border-image属性：引入一张图片作为边框的效果
             *前提：设置border-width属性（边框的宽度）
             *分解若干个属性：
                *border-image-source属性：设置引入图片路径
                 该属性的值：ul(图片的路径)
                *border-image-width属性：设置图片显示的宽度
                 该属性的值一般情况下会与border-width属性的值保持一致
                *border-image-repeat属性：设置图片如何填充边框
                    *repeat：平铺图片以填充边框
                    *stretch：拉伸图片以填充边框
                    *round：平铺图像，当不能整次平铺时，根据情况放大或缩小图像
                    *space：平铺图像，当不能整次平铺时，会用空白间隙填充在图像周围
                    （不会放大或缩小图像）
            */
            border-image: url("psc.jpg") 30 stretch ;
            /*兼容FireFox浏览器：Mozilla基金会*/
            -moz-border-image: url("psc.jpg") 30 stretch;
            /*
             兼容Chrome浏览器：WebKit内核
             *Chrome显示边框图片有效的话：设置border-style属性
            */
            -webkit-border-image: url("psc.jpg") 30 stretch;
        }
    </style>
</head>
<body>
    <div>零零零零</div>
</body>
</html>

盒子模型的边距

什么是盒子模型的边距

边距在CSS 盒子模型中分为内边距和外边距：

内边距：指的是内容区至边框之间的空白区域
外边距：指的是当前盒子模型的边框至其他盒子模型的边框之间的区域

盒子模型的内边距

CSS padding属性用来设置盒子模型的内边距，该属性默认情况下，同时设置盒子模型的上、右、下、左4个内边距

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内边距</title>
    <style>
        body{
            background-color: lightskyblue;
        }
        .parent{
            width: 200px;
            height: 200px;
            border: 1px solid grey;
            background-color: maroon;
            /*内边距的颜色是透明(transparent)的，无法设置背景颜色*/
            /*padding: 50px;*/

            /*四个值：上、右、下、左*/
            /*padding-top: 50px;
            padding-left: 50px;
            padding-bottom: 50px;
            padding-right: 50px;*/

            /*一个值：上、右、下、左*/
            /*padding:50px*/

            /*两个值：第一个值表示上下，第二个值表示左右*/
            /*padding: 30px 50px ;*/

            /*三个值：第一个值表示上，第二个值表示左右，第三个值表示下*/
            padding: 30px 20px 50px;
        }
        .child{
            width: 200px;
            height: 200px;
            background-color: lightsalmon;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

盒子模型的外边距

CSS margin属性用来设置盒子模型的外边距，该属性默认情况下设置盒子模型的上、右、下、左

例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>左外边距和上外边距</title>
    <style>
        .box{
            /*元素的默认位置在页面或者父级元素的左上角*/
            width: 200px;
            height: 200px;
            border: 1px solid black;
            /*左外边距可以用来控制当前元素在水平方向的位置*/
            /*margin-left: 50px;*/
            /*上外边距可以用来控制当前元素在垂直方向的位置*/
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

实现水平居中效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现水平居中效果</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
            /*实现水平方向的居中效果*/
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

外边距重叠

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距重叠</title>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
        .box1{
            background-color: aqua;
            margin-bottom: 50px;
        }
        .box2{
            background-color: bisque;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <!--
        外边距重叠的问题：
         *存在于两个块级元素之间
         *前一个块级元素设置下外边距
         *后一个块级元素设置上外边距
        结论：并不是将两个外边距相加，在两个外边距中取最大值
        解决：不要两个外边距一同设置，而是只设置其中一个
    -->
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

外边距传递

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距传递</title>
    <style>
        .parent{
            width: 200px;
            /*增加内边距，如果想实际宽高不变的话，宽高的值改变*/
            height: 100px;
            background-color: black;
            padding-top: 100px;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: brown;
            /*margin-top: 100px;*/
        }
    </style>
</head>
<body>
    <!--
        外边距传递：
         *父级元素与子级元素的结构
         *为子级元素设置上外边距
        结论：子级元素的上外边距会传递给父级元素
        解决：子级元素的外边距就是父级元素的内边距
    -->
    <div class="parent">
        <div class="child"></div>
    </div>
    <!--border本身就是解决外边距重叠与外边距传递的解决方法（BFC）-->
</body>
</html>

盒子模型的类型

什么是盒子模型的类型

CSS 盒子模型可以应用于HTML中的任何元素，可以拆分为块级元素、内联元素、行内块级元素，CSS 提供了 box-sizing 属性，可以用来设置盒子模型的类型

块级元素与内联元素

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内联元素的盒子模型</title>
    <style>
        span{
            /*内联元素的width和height属性是无效的，由内容决定*/
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            border: 1px solid black;
            /*内容的位置不变，内边距向四边扩充*/
            padding: 10px;
            /*内联元素的margin，水平方向是有效的，垂直方向是无效的*/
            margin-left: 100px;
            /*内联元素的margin-top属性是无效的*/
            margin-top: 100px;
            margin-right: 100px;
            /*内联元素的margin-bottom属性是无效的*/
            margin-bottom: 100px;
        }
    </style>
</head>
<body>
    <span>啦啦啦</span>
    <span>吼吼吼</span>
</body>
</html>

行内块级元素

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内块级元素</title>
    <style>
        img{
            /*行内块级元素的width和height属性是有效的*/
            width: 200px;
            border: 1px solid black;
            padding: 50px;
            margin: 50px;
        }
    </style>
</head>
<body>
    <!--<img>元素之间存在5px左右空白的区域-->
    <img src="psc.jpg">
    <img src="psc.jpg">
</body>
</html>

box-sizing属性

将box-sizing属性的值设置border-box更易于HTML页面的布局实现，相对于content-box,border-box影响布局的因素更少，更容易控制

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>box-sizing属性</title>
    <style>
        div{
            /*
             box-sizing属性：
             *content-box：表示默认的盒子模型
             *border-box：表示怪异的盒子模型
            */
            box-sizing: border-box;
            /*实际的宽高 = width或者 height*/
            width: 200px;
            height: 200px;
            background-color: cadetblue;

            border: 50px solid black;
            padding: 50px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

显示与溢出

显示与隐藏

HTML 所有元素默认情况下都是显示的，通过CSS提供的相关属性可以将指定元素进行隐藏，或者改变元素的类型

display属性：用来设置HTML元素的显示类型
visibility属性：用来设置显示或隐藏HTML元素

display属性

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display控制显示与隐藏</title>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
        .box1{
            background-color: blue;
        }
        .box2{
            background-color: blueviolet;
            /*
             当前元素设置为隐藏
             *当使用display属性设置元素为隐藏时，该元素在HTML页面中所占区域消失
             当前元素设置为显示
             *将display属性的值设置为非none的值
            */
            display: none;
        }
        .box3{
            background-color: brown;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

visibility属性

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>visibility控制显示与隐藏</title>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
        .box1{
            background-color: blue;
        }
        .box2{
            background-color: blueviolet;
            /*
             当前元素设置为隐藏
             *当使用visibility属性设置元素为隐藏时，该元素在HTML页面中所占区域依旧存在
             当前元素设置为显示
             *将visibility属性的值设置为visible（默认值）

            */
            visibility: hidden;
        }
        .box3{
            background-color: brown;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

内容溢出

什么是内容溢出

指当子级元素的大小超出父级元素的大小区域时，子级元素会有一部分显示在父级元素所在区域的外部

overflow属性

CSS overflow属性用来设置当子级元素溢出父级元素的区域时，要如何处理

属性值为：

visible：默认值，内容不会被修剪，会显示在父级容器之外
hidden：内容会被修剪，并且其余内容不可见
scroll：内容会被修剪，浏览器会显示滚动条以便查看其余内容

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内容溢出</title>
    <style>
        .con{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            /*内容溢出：内容显示的区域大于当前元素的区域
              *overflow属性设置内容溢出情况的处理方式
                *visible（默认值）表示显示
                *hidden:表示溢出部分全部隐藏
                *scroll：提供一个滚动条（不管内容是否溢出）
                *auto:由浏览器决定
                   *如果内容没有溢出的情况，不做任何处理
                   *如果内容溢出的情况，提供一个滚动条
            */
            overflow:auto
        }
        .child{
            width: 300px;
            height: 300px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <!--内容溢出：文本内容、图片、视频以及子级元素-->
    <div class="con">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Quaerat quae temporibus odio a. Quos unde totam ipsam natus, 
        ullam eligendi consequuntur obcaecati? Necessitatibus, 
        ullam porro sint maiores itaque eum optio.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Quaerat quae temporibus odio a. Quos unde totam ipsam natus, 
        ullam eligendi consequuntur obcaecati? Necessitatibus, 
        ullam porro sint maiores itaque eum optio.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Quaerat quae temporibus odio a. Quos unde totam ipsam natus, 
        ullam eligendi consequuntur obcaecati? Necessitatibus, 
        ullam porro sint maiores itaque eum optio.
    </div>
    <div class="con">
        <img src="8504219.jpg">
    </div>
    <div class="con">
        <div class="child"></div>
    </div>
</body>
</html>

text-overflow属性

CSS text-flow属性用来设置当文本内容溢出时，要如何处理

属性值为：

clip：将文本内容超出父级容器的部分隐藏
ellipsis：将文本内容超出父级容器的部分使用省略（…）表示
string：将文本内容超出父级容器的部分使用指定文本内容表示

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品描述</title>
    <style>
        .text{
            width: 190px;
            height: 48px;
            border: 1px solid black;

            font-size: 14px;
            color: blueviolet;
            text-align: left;
            word-break: break-all;

            overflow: hidden;
            text-overflow: ellipsis;

            line-height: 25px;
            /*
             display属性值为带前缀的值：不同浏览器提供的显示效果
             *-webkit-box:Chrome\Edge\Safari浏览器提供
             *-moz-box:Firfox浏览器提供
            */
            display: -webkit-box;
            display: -moz-box;
            /*
             -webkit-line-clamp属性：
             *注意：该属性是Webkit内核的私有属性（其他浏览器可能提供不同的属性）
             *作用：设置显示的行数
            */
            -webkit-line-clamp: 2;
            /*
             -webkit-box-orient属性：
             *作用：在父级元素设置，子元素的排列方式
             *值：
               *vertical：表示垂直
               *horizontal：表示水平
            */
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
    <div class="text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
        Exercitationem minima, animi non nam facere facilis placeat amet voluptates molestiae incidunt sequi, rerum corporis alias iste ipsum atque expedita tenetur quasi?</div>
</body>
</html>

薯片

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
盒子模型的使用

CSS与HTML的基础知识（六）盒子模型盒子模型概述什么是盒子模型盒子模型的组成部分块级元素与内联元素块级元素内联元素行内块级元素display属性CSS 中的盒子模型设置盒子模型的大小盒子的阴影盒子模型的边框什么是盒子模型的边框border 属性边框圆角边框图像盒子模型的边距什么是盒子模型的边距盒子模型的内边距盒子模型的外边距实现水平居中效果外边距重叠外边距传递盒子模型的类型什么是盒子模型的类型块级元素与内联元素行内块级元素box-sizing属性显示与溢出显示与隐藏display属性visibility
复制链接

扫一扫