当前位置：首页 > article >正文

css:盒子模型

article 2024/11/18 22:21:11

盒子模型

边框（border）

内边距（padding）

外边距（margin）

盒子模型，浮动，定位

把一只大象塞进冰箱里需要三步：打开冰箱门，把大象塞进去，关上冰箱门

给一个网页布局需要三步：准备好我们的网页相关元素（盒子），用css设计样式摆好位置，往盒子里塞东西

最麻烦的就是摆盒子步骤

盒子模型

盒子模型也就是box model，就是把html页面中的布局元素看作一个矩形的盒子，一个盛装内容的容器

css盒子模型就是封装周围的html元素，包括：边框（border）、外边距（margin）、内边距（padding）和实际内容（content）

内边距（padding）控制内容和边框的距离

外边距(margin)控制边框和边框的距离

边框（border）

边框可以设置的样式有：边框粗细（border-width），边框样式（border-width）,边框颜色（

border-color）还有边框的各个边

  div {
            width: 300px;
            height: 200px;
            border-width: 5px;
            border-style: solid;
        }

dashed是虚线边框：

dotted是点线：

border-style:

dotted- 定义点线边框

dashed - 定义虚线边框

solid - 定义实线边框

double - 定义双边框

groove - 定义 3D 坡口边框。效果取决于 border-color 值

ridge - 定义 3D 脊线边框。效果取决于 border-color 值

inset - 定义 3D inset 边框。效果取决于 border-color 值

outset - 定义 3D outset 边框。效果取决于 border-color 值

none - 定义无边框

hidden - 定义隐藏边框

这几个3d的都不怎么用，兼容性太差了

加上颜色：

div {
            width: 300px;
            height: 200px;
            border-width: 5px;
            border-style: double;
            border-color: mediumvioletred;
        }

边框的复合写法,没有顺序要求：

p{
    border:1px solid red;//没有顺序，一般都按边框粗细，样式，颜色的顺序
}

边框分上下左右，我们可以分开来声明他们

 div {
            width: 300px;
            height: 200px;
            border-top: 5px double cornflowerblue;
            border-bottom: 10px dotted crimson;
            border-left: 10px dotted crimson;
            border-right: 10px dotted crimson;

        }

但是这样写很麻烦

如果我们让四条边都是红点点，再拿蓝色双线覆盖，就可以达成一样的效果

  div {
            width: 300px;
            height: 200px;
            border: 10px dotted crimson;
            border-top: 5px double cornflowerblue;

        }

一定要把 border-top: 5px double cornflowerblue;这句写在下面，因为根据层叠性，离结构近的部分覆盖离结构远的部分

我们之前不会美化表格，现在我们学了css，可以用css的border对表格的边框进行样式修改：

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

        table,
        td {
            /* width: 500px;
            height: 250px; */
            border: 1px solid pink;
        }
    </style>

表格中的单元格都有自己的边框，如果两个边框离太近就会加粗边框，使用border-collapse：collapse就可以合并离得太近的单元格的边框

不合并的话长这样

加上th，给表头也配上相应的样式

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

        table,
        td,
        th {
            /* width: 500px;
            height: 250px; */
            border: 1px solid pink;
        }
    </style>

另外，我们在设定盒子大小的时候，如果加上边框，那么盒子就会看起来比你设置的大小大；在网页设计中，如果我们要测量网页的盒子大小，最好是测不带边框的部分，是真实的盒子大小（width和height），或者测出带边框的盒子长宽后减去边框的宽度

在声明样式的时候根据自己的需要+或者-盒子的大小（带边框或不带）

内边距（padding）

当内容和边框离太近的时候就需要设置内边距

  div {
            width: 300px;
            height: 200px;
            border: 10px dotted crimson;
            border-top: 5px double cornflowerblue;
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 20px;
            padding-bottom: 20px;
        }

内边距的复合（简写）写法：

padding：5px；	四个边都是5px的内边距
padding：5px 10px；	上下5px，左右10px
padding:5px 10px 20px	上10px下20px左右10px
padding:5px 10px 20px 30px	上5px右10px下20px左30px，顺时针

这四种都要会写

padding本质上也会影响盒子的大小：

可以看到加了内边距是360*255

但是我们写的是300*200

360和255怎么来的？

360=300+border:10px*2+padding:20px*2

255=200+border:10px+border:5px+padding:20px*2

所以我们在测量别人的盒子大小和计算自己盒子大小的时候，也是用盒子的width和height减去内边距的大小就好了

    div {
            width: 240px;
            height: 145.46px;
            border: 10px dotted crimson;
            border-top: 5px double cornflowerblue;
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 20px;
            padding-bottom: 20px;
        }

一个小demo:通过padding控制盒子的大小

<!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>
       
        .sb a {
            text-decoration: none;
            font-size: 12px;
            color: #4c4c4c;
            line-height: 41px;
            padding: 0 20px;
        }

        .sb {
            height: 41px;
            border-bottom: 1px solid #edeef0;
            border-top: 3px solid #ff8500;
            background-color: #fcfcfc;
            color: #4c4c4c;
            text-decoration: none;
        }

        .sb a:hover {
            height: 41px;
            display: inline-block;//转换为行内块元素
            color: chocolate;
            background-color: rgb(198, 202, 202);

        }
    </style>
</head>
<section></section>

<body>
   
    <div class="sb">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
    </div>

</body>

</html>

我们之前写的一个小demo是用缩进来调整距离的，现在我们可以用padding：

.css

a {
    background-color: rgb(150, 144, 187);
    color: black;
    width: 170px;
    height: 40px;
    display: block;
    /* text-indent: 2em; 现在我们用行内距调整*/
    padding-left: 30px;
    text-decoration: none;
    line-height: 40px;
}

a:hover {
    color: rgb(255, 255, 255);
    background-color: khaki;
}

.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo3</title>
    <link rel="stylesheet" href="demo3.css">
</head>

<body>
    <a href="#">大学英语</a>
    <a href="#">数理方程</a>
    <a href="#">模拟电子技术</a>
    <a href="#">概率论与数理统计</a>
    <a href="#">嵌入式与微机原理</a>
    <a href="#">大学物理</a>
</body>

</html>

padding也有不会撑开盒子的时候：

我们生成一个设置高度的盒子：

  h1 {
            background-color: darkgray;
            height: 300px;
        }

可以看到宽被铺满了，高为300px

此时我们加入padding不会改变宽，只会改变盒子的高

但是如果我们设置了宽，也就是给了宽一个初始值：

  h1 {
            background-color: darkgray;
            height: 300px;
            padding: 100px;
            width: 100%;
        }

可以看见我们的宽被撑开了，横向也有了水平滑动条

还有一种情况:

我们在盒子内部创建了一个盒子，在没有给定孩子盒初始宽和高属性的时候，这个孩子盒的大小是不能超过盒子爹的大小的：

padding了也不能超过盒子爹的宽

但是如果给了孩子盒初始值：

 h1 {
            background-color: darkgray;
            width: 100%;//给初始值
            padding: 30px;

        }

        .sss {
            width: 300px;
            height: 300px;
            background-color: darkturquoise;
        }

外边距（margin）

控制盒子和盒子之间的距离

        .x,
        .y {
            background-color: cornflowerblue;
            width: 300px;
            height: 200px;
        }

        .x {

            margin-bottom: 5px;//x的下边距，也就是y的上边距
        }

简写方式和padding一样：

margin：5px；	四个边都是5px的外边距
margin：5px 10px；	上下5px，左右10px
margin:5px 10px 20px	上10px下20px左右10px
margin:5px 10px 20px 30px	上5px右10px下20px左30px，顺时针

外边距的应用：让块级盒子水平居中

需要满足两个条件：盒子指定了宽度、盒子左右的外边距设置为auto

 .x,
        .y {
            background-color: cornflowerblue;
            width: 300px;
            height: 200px;
            margin: 0 auto;
            //margin:auto也行
            //margin-left：auto;margin-right:auto;也行
        }

让行内元素水平居中或行内块元素（图片或文字）水平居中的方法更简单啦！给他们的父元素添加：text-align:center就好了

 .x,
        .y {
            background-color: cornflowerblue;
            width: 300px;
            height: 200px;
            margin: 0 auto;
            text-align: center;
        }

父子盒子的外边距塌陷问题：

<!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>
        .x,
        .y {
            background-color: cornflowerblue;
            width: 300px;
            height: 200px;
            margin: 0 auto;
            text-align: center;
        }

        .x {
            margin-top: 200px;
            margin-bottom: 5px;
        }

        .x span {
            margin-top: 100px;
            background-color: aquamarine;
        }
    </style>
</head>
<section></section>

<body>
    <div class="x">
        <span>你们好啊我是x的孩子盒</span>
    </div>
    <div class="y">

    </div>
</body>

</html>

可以看见我们给第一个盒子的span添加了上外边距，但是并没有改变和盒子爹的距离

这涉及到了嵌套块级元素垂直外边距的塌陷，父元素有上外边距、子元素也有上外边距，此时父元素会塌陷较大的外边距：

这是子的：

这是爹的：

如何修复这个问题：

1、为父元素定义上边框，边框会参与父元素的高度计算，可以让父元素更精确的计算和子元素的相对位置

2、为父元素定义上内边框，子元素就像父元素的content(内容)，修改内边距就是修改子盒子和父盒子的距离

3、为父元素添加overflow：hidden（常用）

清除内外边距

很多网页元素会自带默认的内外边距，不同的浏览器默认内外边距不一样，因此在布局前要清除网页自带的内外边距

 * {
            margin: 0;
            padding: 0;
        }

这也是我们css中的第一行代码

行内元素尽量只设置左右的内外边距（因为是行内元素，设置上下也不起作用啊）

小demo

把我们学到的东西来做一个小demo:

用到了分模块的思想，还有根据需求将行内元素转为行内块，认识父盒子的宽高和子盒子宽高的在有padding时候的继承，使用margin调整布局

.html:

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            margin: 100px auto;
            width: 300px;
            height: 450px;
            /* text-align: center; */
            background-color: #f5f5f5;
        }

        .box .review {
            font-size: 14px;
            color: rgb(39, 34, 34);
            padding: 0 20px;
            margin-top: 10px;
        }

        .box img {
            width: 100%;
        }

        .box .appraise {
            font-size: 10px;
            color: darkgray;
            margin: 20px 20px;
        }

        .box div h3 {
            display: inline-block;
            font-size: 20px;
            width: 200px;
            margin: 10px 0px 0px 20px;
            margin-top: 10px;
            font-weight: 400;

        }

        .box div h3 a {
            text-decoration: none;
            color: black;

        }

        .box div span {
            margin-top: 10px;
            color: #ff6700;
            margin-right: 20px;
        }

        .box div .dre {
            margin-top: 10px;
            color: darkgray;
            font-style: normal;
            /* margin: 0px 0px 0px 3px; */
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="微信图片_20241113155824.jpg" alt="菠萝吹雪">
        <p class="review">这是一只死到临头还在犯贱的菠萝吹雪,也可能是一个补不完deadline的励志轩,也是一个知道周末要考概率论的荷叶饭</p>
        <p class="appraise">来自XUPT的评价</p>
        <div>
            <h3><a href="#">荷叶饭尸块秒杀价...</a></h3>
            <em class="dre">|</em>
            <span>9.9元</span>
        </div>
    </div>
</body>

</html>

还有一个demo,快报模板:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

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

        .box h3 {
            height: 32px;
            border-bottom: 1px dotted #ccc;
            font-size: 20px;
            font-weight: 400;
            line-height: 32px;
            color: #6e6e6e;
            padding: 0 15px;
        }

        li {
            list-style: none;
            /* 去掉li前面的小圆点 */
        }

        .box ul li {

            height: 25x;
            line-height: 25px;

        }

        .box ul li a {
            text-decoration: none;
            color: #6e6e6e;
            margin-left: 15px;

        }

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

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

<body>
    <div class="box">
        <h3>喜欢十日终焉的小朋友们你们好啊</h3>
        <ul>
            <li><a href="#">【灵闻】我听见了招灾的回响</a></li>
            <li><a href="#">【灵嗅】我嗅到了治愈的清香</a></li>
            <li><a href="#">【灵视】我看见了生生不息的激荡</a></li>
            <li><a href="#">【灵嗅】我嗅到了替罪的清香</a></li>
            <li><a href="#">【灵闻】我听见了破万法的回响</a></li>
        </ul>
    </div>
</body>

</html>