• 【攻破css系列——第八天】盒子模型

    文章目录

    在这里插入图片描述

    1. 盒子模型

    1.1 定义

    网页由元素组成，而元素在网页中实际是以一个个矩形盒子来呈现。它包括：外边距（margin）、内边距（padding）、边框（border）和内容（content）。

    在这里插入图片描述

    1.2 边框

    1.2.1 定义

    边框用 border 设置，由三部分组成边框的粗细（border-width）、边框样式（border-style）、边框颜色（border-color）


    1.2.2 语法

    /* 单独设置 */
border-width: 长度;
border-style: 样式;
border-color: 颜色;
/* 一起设置 */
boder: border-width || border-style || border-color /* 无关顺序 */

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    border-style 常用样式：solid（实线）、dashed（虚线）、dotted（点线）


    1.2.3 示例

    • html（用 div 设置一个 100*100 的盒子，边框为宽度为 1px 的红色实线）

      <body>
    <div>div>
body>

      • 1
      • 2
      • 3

    • css

      

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12

    • 效果

      在这里插入图片描述


    1.2.4 单独设置

    但我们发现 border 属性在设置边框时，会设置上下左右所有的边框。如果我们要设置某一个边边框与其他边框不同，应该怎么做呢？这里的 border 还额外提供了四个方向的设置。四个方向分别 left、right、top、bottom。我们如果要单独设置，我们直接在 border 后加入方向。比如对左边设置可以直接：border-left、border-left-color、border-left-style。 这点相对比较重要，本文后会再次用到。


    1.2.5 单独设置实例

    • html（用 div 设置一个 100*100 的盒子，所有与边框为宽度为 1px 的实线，上边框为红色，其他边框为蓝色）

      <body>
    <div>div>
body>

      • 1
      • 2
      • 3

    • css

      

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12

    • 效果

      在这里插入图片描述


    1.2.6 单独设置实例改进

    我仅仅只是单独设置边框我就需要这四条代码，这样太麻烦了。

    /* 上边框 */
border-top: 1px solid red;
/* 其他边框 */
border-bottom: 1px solid blue;
border-left: 1px solid blue;
border-right: 1px solid blue;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    我们想到 css 的层叠性，相同属性在同一个选择器中后写的会覆盖前写的。我们只要把 border 看成四个方向的边框设置就很简单理解。

    例如：

    border-top: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
border-right: 1px solid red;

    • 1
    • 2
    • 3
    • 4

    等同于：

    border: 1px solid red;

    • 1

    据此我们可以把 css 代码简化为：

    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    这也可以得到相同的效果。


    1.2.7 表格细线边框

    之前在这个表格的实验中，我们发现：我们设置的表格边框是 1px，但我们从页面上来看表格里面边框好像不止 1px，这点其实很好理解，因为两个单元格的边框放在一起了。

    在这里插入图片描述

    对于这种情况，如果我们可以使用 border-collapse 让相邻边框合并在一起（两个合为一个，但长度不变）

    border-collapse: collapse;

    • 1

    加了上面这个 css 属性后，表格里面的框线就变细了：

    在这里插入图片描述


    1.2.7 边框影响盒子实际大小

    我们刚才在边框实验中，设置了一个 100*100 的盒子，然后边框为 1px 的红色实线。

    我们发现盒子的大小变了，这是因为 width、height 属性设置的是内容盒的宽高。

    在这里插入图片描述

    解决方法：

    • 用 width、height 属性设置宽高时，不量边框

    • 如果包含边框，就减去 2 * 边框宽度（2是因为左右或者上下有两个边框的宽度）


    1.3 内边距

    1.3.1 定义

    通过盒子模型，我们看到内边距介于内容和边框之间，所以它可以控制内容到边框的距离。用 padding 表示。

    在这里插入图片描述

    1.3.2 语法

    值的个数意思
    padding: 10px;设置一个值，代表四个方向的内边距
    padding: 10px 20px;设置两个值，分别代表上下、左右的内边距
    padding: 10px 20px 30px;设置三个值，分别代表上、左右、下的内边距
    padding: 10px 20px 30px 40px;设置四个值，分别代表上、右、下、左（从上开始顺时针）的内边距

    padding 同样也可以像 border 那样有四个方向的单独设置，就是在 padding 后加 top、bottom、left、right。


    1.3.3 示例

    • html（盒子宽高为 100*100，背景为红色，并令内容距离边框的左边距为 20px，上边距也为 20px）

      <body>
    <div>你好！div>
body>

      • 1
      • 2
      • 3

    • css

      

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8

    • 效果

      在这里插入图片描述


    1.3.4 内边距影响盒子实际大小

    通过审查元素 F12 发现：内边距和边框一样，都会影响盒子的实际大小。这里有特例，我们在行盒块盒行块盒的区别细讲，这章我这几天找个时间再写。

    在这里插入图片描述

    解决方法与边框同理：量整个盒子长度后，设置宽高要减去内边距的部分。


    1.4 综合案例【导航栏】

    1.4.1 介绍

    我们先看两个导航栏：

    在这里插入图片描述
    在这里插入图片描述

    我们从视觉上看，会感觉第二个舒服很多，两个都是让文字在自己盒子居中，但不一样的是，第一个的每个盒子是固定宽，造成每个盒子中间间距不一样。而第二个盒子宽度由内容决定，但却用内边距填充，使其每个盒子中间间距一致。

    所以我们做这样的一个案例，设置一个这样的导航栏，可以用伪类选择器设置悬浮效果：

    在这里插入图片描述


    1.4.2 分析

    在这里插入图片描述


    1.4.3 代码

    • html

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

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10

    • css

      

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24

    1.5 外边距

    1.5.1 定义

    外边距用来控制盒子和盒子之间的距离，用 margin 表示。


    1.5.2 语法

    margin 同样也可以像 border、padding 那样有四个方向的单独设置，就是在 margin 后加 top、bottom、left、right。

    而且，margin 简写方式和 padding一致

    margin 还有一个取值 auto，针对 auto的原理我们也在行盒块盒行块盒的区别细讲，这章我这几天找个时间再写。


    1.5.3 示例

    • html（设置两个兄弟盒子宽高为 100*100，颜色分别为红色和蓝色，并对上面盒子设置底部的外边距为 100px）

      <body>
    <div class="one">div>
    <div class="two">div>
body>

      • 1
      • 2
      • 3
      • 4

    • css

      

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15

    • 效果

      在这里插入图片描述
      大概能看出上下盒子隔了 100px 的高度（因为和盒子高度差不多）



    2. margin 塌陷

    2.1 相邻块元素垂直外边距的合并

    我们在上个实验的基础上，并让下面盒子的顶部的外边距为 50px，效果如下：

    在这里插入图片描述

    我们理想的情况下，应该是间隔 150px 才对，但实际上仍是 100px。因为这里发生了相邻块元素垂直外边距的合并，这种情况就是上面盒子设置底部外边距，下面盒子设置顶部外边距的时候会产生，此时的外边距取两者中的较大值。


    2.2 解决方法

    尽量只给一个盒子设置 margin 值


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

    • html（设置两个嵌套关系的盒子，父盒宽高为 200* 200，子盒宽高为 100*100，颜色分别为红色和蓝色，并设置父盒和子盒顶部的外边距分别为 50px，100px）

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

      • 1
      • 2
      • 3
      • 4
      • 5

    • css

      

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15

    • 效果

      在这里插入图片描述
      在这里插入图片描述

      这效果和我们预想的也不一样，我们预想的是父盒到页面顶部有 50px 的间距，而子盒到父盒有 100px 的间距。但这里发生嵌套块元素垂直外边距的塌陷，父元素有上边距同时子元素有上边距，此时他们上边距的最大值只作用于父元素。即使父元素没有设置上边距，子元素设置了，子元素设置的也是作用于父元素。


    2.4 解决方法

    2.4.1 为父元素定义上边框

    border: 1px solid white;

    • 1

    在这里插入图片描述

    2.4.2 为父元素定义内边距

    padding: 1px 0 0 0;

    • 1

    在这里插入图片描述


    2.4.3 为父元素添加 overflow 属性

    overflow:hidden;

    • 1

    在这里插入图片描述

    2.4.4 本质

    我们子盒实际上是放在父盒的内容盒中，所以为父元素添加上边框或者上内边距，本质上就是为了隔离子盒和父盒的外边距，使得外边距不会合并。而 overflow:hidden; 的设置使块盒进入了 BFC 模式，规避了外边距的合并。关于 BFC，这里涉及浮动定位的知识，这里作为提前的铺垫即可。

    在这里插入图片描述


    本文主要学习黑马程序员pink老师的视频

    如有错误，敬请指正，欢迎交流🤝，谢谢♪(･ω･)ﾉ

  • 相关阅读:
    文件上传，还存储在应用服务器?
    解决 /bin/bash^M: bad interpreter: No such file or directory
    HTML做一个简单漂亮的宠物网页（纯html代码）
    C++ Reference: Standard C++ Library reference: C Library: cwchar: wscanf
    MQ 之 RocketMQ 核心知识点
    vue动态路由切换刷新保留历史路由搜索条件数据
    深入了解代理服务器：Socks5、IP代理与网络安全
    2023最新版Android逆向教程——第4天：真机环境的配置
    【Python第三方包】如何让中文变成拼音呢？(pypinyin包)
    【Java】Java概述以及开发环境简介
  • 原文地址：https://blog.csdn.net/m0_51302822/article/details/127845363