盒子模型总结

时间 2019-11-09

标签盒子模型总结栏目 CSS 繁體版

原文原文链接

1、盒子模型的概念

什么是盒子模型，盒子模型其实就是CSS网页布局中的一种布局方式，宛如一个盒子，其中包括内容（Content）、内边距（Padding）、边框（Border）、外边距（Margin），以下图： html

2、盒子模型的六种属性

Margin:外边距，盒子外边距与边框之间的距离，分上右下左；
Border:盒子的边框大小，分上下左右；
Padding:内边距（补白），盒子的边框与内容之间的距离，分上下左右；
Width:盒子内容的宽度；
Height:盒子内容的高度；
Background:盒子的背景，默认填充内容、Padding与Border
复制代码

盒子的宽度=Margin-left+Border-left+Padding-left+Width+Padding-right+Border-right+Margin-right浏览器

盒子的高度=Margin-top+Border-top+Padding-top+Height+Padding-bottom+Border-bottom+Margin-bottombash

3、盒子模型须要注意的几点

对于块级标签，六大属性均适用，而对于行内标签来讲，height与width并不适用，且Margin与Padding只能在水平方向上有效，垂直方向无效
块级标签具备贪婪性，若是未设置宽度，则会占据整个页面；行内标签则具备懒惰性，宽度取决于内容大小
因为浏览器会自行设置元素的Margin与Padding值，因此通常咱们会自行设置一个Reset.less，来覆盖浏览器默认值

<!--Reset.less-->
*{
    margin:0;
    padding:0
}
复制代码

4、 CSS边距重叠（塌陷）

知足前提：块级标签与垂直方向less

父子元素之间的重叠：父元素的margin-top与第一个子元素的margin-top重叠或父元素的margin-bottom与最后一个子元素的margin-bottom重叠（取大优先）布局

解决方法：1.父元素设置border-top或border-bottom,不想用则可以使边框透明
          2.父元素设置padding-top或padding-bottom
          3.将父元素设置成行内块标签
复制代码

兄弟元素之间的重叠：上盒子的margin-bottom与下盒子的margin-top之间的重叠（取大优先）ui

解决方法：1.将一方设置成行内块标签
          2.将下盒子设置浮动（浮动不会塌陷)
复制代码

5、简单实现小三角案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{margin: 0;padding:0}
    div{
        width: 0;
        border: 20px solid transparent;
        border-top:20px solid black; 
    }
    </style>
</head>
<body>
    <div></div>
    
</body>
</html>
复制代码

效果以下：spa