css盒模型

框属性

每一个元素都是一个矩形框，框的每层的大小都可以通过一些特定的属性调整
矩形框包括：content ，padding，border，margin

width/height :设置 content 的宽高
padding:用来设置padding内边距大小
border：CSS 框的边界（border）是一个分隔层，位于内边距的外边缘以及外边距的内边缘之间。边界的默认大小为0——从而让它不可见——不过我们可以设置边界的厚度、风格和颜色让它出现。 border 简写属性可以让我们一次设置所有四个边，例如 border: 1px solid black; 但这个简写可以被各种普通书写的更详细的属性所覆盖：
margin:外边距，用来分隔元素与另一个元素

1. 如果盒子的高度被设置为百分比长度，那么盒子高度不会遵循这个设置了的百分比长度，而是总会采用盒子内容的高度，除非给它设置了一个绝对高度（例如，像素或者 em）。这比把页面上每个盒子的高度默认设置为视口高度的 100% 更方便。
2. 边界（border）也会忽略百分比宽度设置。
3. 外边距（margin）有一个特殊的行为，称为 外边距塌陷： 当两个盒子挨在一起时，二者之间的距离为两个挨着的外边距中最大的那个值，而不是二者的和。

overflow:auto/hidden/visible

1. auto: 当内容过多，溢流的内容被隐藏，然后出现滚动条来让我们滚动查看所有的内容。
2. hidden: 当内容过多，溢流的内容被隐藏。
3. visible: 当内容过多，溢流的内容被显示在盒子的外边（这个是默认的行为）

背景裁剪（Background clip）
border-box padding-box content-box

css框类型

我们可以通过display属性来设定元素的框类型。display属性有很多的属性值。在本篇文章，我们将关注三个最常见的类型：block, inline, and inline-block。

block：可以设置宽高paddng，margin，border，独占一行
inline：不可以设置宽高，可以设置padding，margin，border，和其他文字在同一行
inline-block:可以设置宽高paddng，margin，border，和其他文字在同一行.，它不会在段落行中断开。

参考：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Box_model