css盒子模型1

1、关于盒子模型的理解

注意：每段话我都会举1-2例子来让看这篇文章的人进行更好的理解

众所周知 文档中的所有元素在网页中的布局是一个矩形盒子形状 我们来简化这个模型如下图
例如：
以上例子我没有使用width和height
width：设置内容框content的宽度
height：设置内容框content的高度
padding：设置元素content和边框之间的距离 我们称它为内边距 可以逐一设置（padding-top padding-bottom padding-left padding-right）
border：边框 可以设置宽度 颜色 以及他的样式 在border中也有详细讲解 不了解的可以自己搜一下
margin：设置边框外的边距 我们统称为外边距 跟padding一样我们可以逐一去设置
注意一点：使用margin后的盒子与另外一个盒子相连时 会发生一种特殊行为 外边距塌陷 两个盒子相连之间的距离不是两个margin的和 而是选取比较大的那个margin值
例如：

2.溢出

当我们学习盒子模型的时候 我们必须有一个觉悟 那就是你本身的盒子容纳不了太多的内容元素 我们该怎么做呢？其实非常的简单 我们经常在网页上看到这种情况

比如这种 当元素放不下的时候 我们会用overflow属性给他设置一个滚动条 让他继续展示下面的内容 接下来就看看还有哪几种方法来解决溢出问题
auto：内容太多 先隐藏内容 设置一个滚动条 让用户自己滚动看到下面隐藏内容
hidden：内容太多 直接隐藏内容

visible：内容太多 溢出框显示