CSS盒子模型

Liberty'

于 2024-04-08 22:35:42 发布

阅读量834

点赞数 34

文章标签： css 前端

本文链接：https://blog.csdn.net/Queen741740155/article/details/137211225

版权

CSS盒子模型是CSS中描述网页布局的基本概念之一。它将每个HTML元素看作是一个矩形的盒子，这个盒子包含了内容、内边距、边框和外边距，共四个部分。这些部分构成了盒子的整体结构，通过调整它们的大小和样式，可以实现对网页布局的控制。

具体来说，CSS盒子模型包括以下几个要素：

内容框（Content Box）：内容框是盒子中实际包含内容的部分，例如文字、图片等。内容框的大小可以通过设置元素的width和height属性来控制。
内边距框（Padding Box）：内边距框围绕在内容框外部，用于定义内容与边框之间的空白区域。可以通过设置padding属性来调整内边距的大小。
边框框（Border Box）：边框框位于内边距框的外部，用于显示元素的边框。边框的样式、宽度和颜色可以通过border属性进行设置。
外边距框（Margin Box）：外边距框位于边框框的外部，用于定义元素与其他元素之间的间距。可以通过设置margin属性来控制外边距的大小。

在CSS中，可以通过这些属性来调整盒子模型的各个部分，从而实现对网页布局的精确控制。盒子模型是理解和掌握CSS布局的重要基础之一，对于构建复杂的网页结构和实现各种布局效果都非常重要。

盒子模型的组成

border 边框

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框的颜色

边框的样式

solid	实线边框
dashed	虚线边框
dotted	点线边框

 <style>
        div {
            width: 300px;
            height: 300px;

            /* 边框的粗细 */
            border-width: 5px;

            /* 边框的样式 */
            /* border-style: solid;   实线边框*/

            /* border-style: dashed   虚线边框; */

            /* 点线边框 */
            border-style: dotted;

            border-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
</body>

边框的复合写法


            border: 1px solid red;
            /*没有顺序*/

边框的分开写法

border-top	上
border-bottom	下
border-left	左
border-right	右

<style>
        div {
            width: 300px;
            height: 300px;

            border: 2px dotted red;
            border-top: 2px solid pink;


        }
    </style>
</head>

<body>
    <div></div>
</body>

表格的细线边框

border-collapse: collapse; 表示相邻边框合并在一起

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <style>
        table {
            width: 500px;
            height: 250px;
        }

        table,
        td,
        th {
            border: 1px solid pink;
            border-collapse: collapse;
            font-size: 14px;
            text-align: center;
        }
    </style>
</head>

<body>
    <table border="1" cellspacing="0" cellpadding="20">

        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>班级</th>
                <th>学号</th>

            </tr>
        </thead>
        <tbody>
            <tr>
                <td>jack</td>
                <td>11</td>
                <td>101</td>
                <td>10100</td>
            </tr>

            <tr>
                <td>mary</td>
                <td>12</td>
                <td>102</td>
                <td>10222</td>
            </tr>

            <tr>
                <td>smith</td>
                <td>12</td>
                <td>103</td>
                <td>10301</td>
            </tr>

            <tr>
                <td>pink</td>
                <td>13</td>
                <td>102</td>
                <td>10210</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

padding内边距

内边距，边框与内容之间的距离

padding-top	上内边距
padding-bottom	下内边距
padding-left	左内边距
padding-right	右内边距

内边距的复合写法

值的个数	表达的意思
padding：5px；	1个值，代表上下左右各5像素内边距
padding：5px 10px	2个值，代表上下5像素内边距，左右10像素内边距
padding：5px 10px 20px	3个值，代表上内边距5像素，左右10像素内边距，下内边距20像素
padding：5px 10px 20px 30px	4个值，代表上是5像素，右是10像素，下是20像素，左是30像素顺时针

padding会影响盒子实际大小

如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

解决办法就是让width/height减去多出来的内边距大小即可。

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。

导航栏制作

<style>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            line-height: 41px;
            background-color: #fcfcfc;
        }

        .nav a {
            /* 将a标签转换为行内块元素 */
            display: inline-block;
            height: 41px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;

            padding: 0 20px;
        }

        .nav a:hover {
            background-color: #eee;
            color: #ff8500;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">设为首页</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">博客</a>
        <a href="#">微博</a>
        <a href="#">关注我</a>
    </div>
</body>

盒子模型外边距margin

margin属于设置外边距，即控制盒子与盒子之间的距离。

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

<style>
        div {
            background-color: pink;
            width: 100px;
            height: 100px;

        }

        .nav {
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div class="nav">1</div>
    <div>2</div>
</body>

块级盒子水平居中

外边距可以让块级盒子水平居中，必须满足

盒子必须指定了宽度width

盒子左右的外边距都设置为auto

<style>
        .header {
            width: 900px;
            height: 200px;
            background-color: pink;

            /* 上下外边距100px， 左右auto */
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="header"></div>
</body>

行内元素或者行内块元素居中

<style>
        .header {
            width: 900px;
            height: 231px;
            background-color: pink;

            /* 上下外边距100px， 左右auto */
            margin: 100px auto;

            /* 行内元素或者行内块元素居中给其父元素添加 text-align: center即可 */
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="header">
        <!-- <span>里面的内容</span> -->

        <img src="鹅鹅.png" alt="">
    </div>
</body>

嵌套块元素垂直外边距的塌陷

嵌套块元素垂直外边距的塌陷（Margin Collapsing）是CSS中一个常见的现象。当两个垂直外边距相遇时，它们将形成一个外边距。这个外边距的高度等于两个发生塌陷的外边距的高度中的较大者，而不是它们之和。

这种现象主要发生在以下情况：

相邻兄弟元素：当两个兄弟块元素（即它们有相同的父元素）垂直外边距相遇时，这两个外边距会塌陷。
父元素和第一个/最后一个子元素：当父元素和它的第一个/最后一个子元素有垂直外边距时，这两个外边距也可能发生塌陷。

需要注意的是，水平外边距不会发生塌陷。只有垂直外边距（即上边距和下边距）才会。

虽然外边距塌陷在某些情况下可能会导致布局问题，但它也提供了一种方便的方式来控制元素之间的间距。如果你不希望发生外边距塌陷，可以通过以下方法避免：

使用边框（border）或内边距（padding）：在元素上添加边框或内边距可以阻止外边距的塌陷。
使用空元素（如<div>）作为分隔符：在需要分隔的元素之间插入一个空元素，并为其设置适当的垂直外边距。
使用CSS的overflow属性：为父元素设置overflow: hidden;或overflow: auto;可以阻止其与子元素的外边距发生塌陷。
使用CSS的display属性：将元素的display属性设置为inline-block或flex可以阻止外边距的塌陷。

<style>
        .father {
            width: 400px;
            height: 400px;
            background-color: pink;
            margin-top: 50px;
            overflow: hidden;

        }

        .son {
            width: 200px;
            height: 200px;
            background-color: brown;

            /* margin-top: 100px;
            margin-left: 100px; */
            margin: 100px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

清除内外边距

 * {
            padding: 0;
            margin: 0;
        }

在实际开发中，这种操作很常见，尤其是在重置默认样式或创建基础样式时。需要注意的是，有些浏览器（尤其是旧版浏览器）可能会有默认的内外边距，因此即使你在CSS中明确设置了0，也可能需要额外的样式重置操作来确保一致的效果。这通常可以通过使用CSS重置库（如Normalize.css或Reset CSS）来实现。

综合案例1

<style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f5f5f5;
        }

        .box {
            width: 298px;
            height: 415px;
            background-color: #fff;

            /* 让块级的盒子水平居中对齐 */
            margin: 100px auto;
        }

        .box img {
            width: 298px;
        }

        .review {
            height: 70px;
            font-size: 14px;

            padding: 0 28px;
            font-family: sans-serif;
            margin-top: 30px;
        }

        .appraise {
            color: #b0b0b0;
            font-size: 12px;
            margin-top: 20px;
            padding: 0 28px;
        }

        .info {
            font-size: 14px;
            margin-top: 15px;
            padding: 0 28px;
        }

        .info h4 {
            display: inline-block;
            font-weight: 400;

        }

        .info span {
            color: #ff6700;
        }

        .info em {
            font-style: normal;
            color: #ebe4e0;

            margin: 0 2px 0 8px;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="人物.jpg" alt="">

        <p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p>

        <div class="appraise">来自于 117384232 的评价</div>

        <div class="info">
            <h4>Redmi AirDots真无线蓝牙...</h4>
            <em>|</em>
            <span>99.9元</span>
        </div>
    </div>
</body>

综合案例2

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
/* list-style: none; 是一个CSS样式规则，用于移除HTML列表元素（如 <ul> 或 <ol>）前的默认项目符号或编号。 */
            list-style: none;
        }

        .box {
            width: 248px;
            height: 163px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }

        h3 {
            height: 32px;
            border-bottom: 1px dotted #ccc;
            font-size: 14px;
            font-weight: 400;
            /* 垂直水平居中 */
            line-height: 32px;

            padding-left: 15px;

        }

        .box ul li a {
            font-size: 12px;
            color: #666;
            text-decoration: none;


        }

        .box ul li a:hover {
            text-decoration: underline;
        }


        .box ul li {
            height: 23px;
            line-height: 23px;
            padding-left: 20px;

        }

        .box ul {
            margin-top: 7px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h3>品优购快报</h3>

        <ul>
            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
            <li><a href="#">【特惠】母情节，健康好礼低至5折！</a></li>
            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
            <li><a href="#">【特惠】9.9元洗100张照片！</a></li>
            <li><a href="#">【特惠】长虹智能空调立省1000</a></li>
        </ul>
    </div>


</body>

圆角边框

在CSS中，你可以使用border-radius属性来创建圆角边框。这个属性允许你指定元素边框的四个角的形状。

下面是一个简单的例子，展示了如何给一个<div>元素添加圆角边框：

div {  
  width: 200px;  
  height: 100px;  
  background-color: #4CAF50;  
  border: 2px solid #000000;  
  border-radius: 25px;  
}

在这个例子中，border-radius属性被设置为25px，这意味着所有四个角的圆角半径都是25像素。因此，这个<div>元素将会有一个圆角边框。

如果你想给每个角设置不同的圆角半径，你可以提供四个值给border-radius属性。这四个值将按照顺时针的顺序分别应用于左上角、右上角、右下角和左下角。例如：

div {  
  border-radius: 15px 50px 30px 5px;  
}

border-top-left-radius: ;	左上角
border-top-right-radius: ;	右上角
border-bottom-right-radius: ;	右下角
border-bottom-left-radius: ;	左下角

在这个例子中，左上角的圆角半径是15像素，右上角的圆角半径是50像素，右下角的圆角半径是30像素，左下角的圆角半径是5像素。

此外，你还可以使用斜杠（/）来分别设置水平和垂直的圆角半径。例如：

div {  
  border-radius: 50% / 30%;  
}

在这个例子中，水平方向的圆角半径是元素宽度的50%，垂直方向的圆角半径是元素高度的30%。

绘制圆形盒子


        div {

            /* 绘制正方形盒子 */
            width: 200px;
            height: 200px;
            background-color: #4CAF50;
            border: 2px solid #000000;

            /* 圆的半径设置正方形边长的一半就可以绘制圆形 */
            border-radius: 100px;
             /* border-radius: 50%  高度或宽度的一半 等价于100px*/
        }

圆角矩形

 div {
            height: 100px;
            width: 300px;
            background-color: #4CAF50;
            border: 2px solid #000000;

            /* 圆形矩形设置为高度的一半 */
            border-radius: 50px;
        }

盒子阴影

值	属性
h-shadow	必须。水平阴影的位置，允许负值。
v-shadow	必须。垂直阴影的位置。允许负值。
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色
inset	可选，将外部阴影改为内部阴影

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
        }

        div:hover {
            /* 原先盒子没阴影，当我们鼠标经过时盒子就添加阴影效果 */
            box-shadow: 10px 10px 10px -4px rgb(0, 0, 0, .3);
        }
    </style>

文字阴影

值	属性
h-shadow	必须。水平阴影的位置，允许负值。
v-shadow	必须。垂直阴影的位置。允许负值。
blur	可选，模糊距离
color	可选，阴影的颜色

 <style>
        div {
            font-size: 50px;
            color: orange;
            font-weight: 700;
            text-shadow: 5px 5px 6px rgb(0, 0, 0, .3);
        }
    </style>
</head>

<body>
    <div>中华人民共和国万岁！</div>
</body>

Liberty'

关注

34
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
CSS盒子模型

CSS盒子模型是CSS中描述网页布局的基本概念之一。它将每个HTML元素看作是一个矩形的盒子，这个盒子包含了内容、内边距、边框和外边距，共四个部分。这些部分构成了盒子的整体结构，通过调整它们的大小和样式，可以实现对网页布局的控制。：内容框是盒子中实际包含内容的部分，例如文字、图片等。内容框的大小可以通过设置元素的width和height属性来控制。：内边距框围绕在内容框外部，用于定义内容与边框之间的空白区域。可以通过设置padding属性来调整内边距的大小。：边框框位于内边距框的外部，用于显示元素的边框。
复制链接

扫一扫