• 盒子模型的基础

    • 盒子模型

      • 边框（border）

      • border可以设置元素的边框，边框分成三部分，边框的（粗细）边框的样式，边框的颜色

        2. <body>
        3.     <div>
        4.     div>
        5. body>

      • 边框的简写：没有顺序，一般规定。

        1. border-width: 200;
        2. border-style: 边框的样式 
        3. border-color: 边框颜色

      • 简写后：border: 5px solid pink;

      • 可以分别让四个边框各自修改

      • border-top: 大小 边框样式 边框颜色。这是让上边框改变，还有bottom left right

      • border: 1px solid bule;

      • border-top: 1px solid red;//这个最靠近body里面的容器故呈现上边框是红色，其他边其他颜色

      • 当想合并两个方框的边框使其1+1=1则

      • border-collapse:collapse;

      • 测量盒子的大小的时候，不量边框

      • 测量包括边框时需要，width/height剪切边框的宽度

      • 让内容与边框有距离则利用填充的方法

        1. padding-left: 200px;//将左边的进行填充
        2. padding-top: 38px;//将上边进行填充

    • 如果固定了和盒子的大小使用padding就会使盒子变大，故当使用padding时要将其与盒子一起相加

    • 当父类有witch/height时，子类无需在定义。定义会超出父类的范围。在子类padding不会超出父类的范围

    • 外边距margin-left: 数值

    • 右外边距margin-right: 数值

    • 上外边距margin-top: 数值

    • 下外边距margin-bottom: 数值

    • 让盒子水平居中

    • 1、盒子必须指定了宽度（width)

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

      2.     <body>
      3.     <div>div>
      4. body>

    • 以上的方法是让让块级元素水平居中，行内元素或者行内块元素水平居中需要给其父类元素添加text-align: center即可

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

    • 由于两个父子关系的块元素，两个都用margin-top: 59px；最终执行的是父类的塌陷

    • 解决方法一、父类定义上边框

    • border: 1px solid transparent；//transparent是全透明

    • 方法二、给父类上内边框

    • padding: 1px ；

    • 方法三、给父类添加overflow.hidden

  • 相关阅读:
    【服务器数据恢复】华为某型号服务器raid6数据恢复案例
    你了解Postman 变量吗？
    css实现轮播图弧形
    提升珠宝管理效率的新零售行业RFID应用解决方案
    记录一次nvm切换node版本npm安装失败问题Error: Cannot find module ‘@npmcli/config‘
    vue2学习之axios在项目中的优化
    python PIL基本使用
    深度学习之PyTorch实战（5）——对CrossEntropyLoss损失函数的理解与学习
    PHP:json_encode和json_decode用法
    LeetCode第29题-两数相除-java实现-图解思路与手撕代码
  • 原文地址：https://blog.csdn.net/Yyds12300/article/details/133580774