盒模型、盒子模型、框模型box model css将页面中的所有元素都设置为了一个矩形的盒子 将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置 每一个盒子都由一下几个部分组成， 内容区（content） 内边距（padding) 边框（border） 外边距（margin)
边框（border），边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部 边框的大小会影响到整个盒子的大小 要设置边框，需要至少设置三个样式: 边框的宽度border-width 边框的颜色border-color 边框的样式border-style
<div class="box1"></div> .box1{ width: 200px; height: 200px; background-color: aqua; border-width: 5px; border-color: crimson; border-style: dashed; }border属性简写：
border: solid red 10px;内容区（content），元素中的所有的子元素和文本内容都在内容区中排列 内容区的大小由width和height两个属性来设置 width 设置内容区的宽度 height 设置内容区的高度
子元素是在父元素的内容区中排列的， 如果子元素的大小超过了父元素，则子元素会从父元素中溢出 使用overflow属性来设置父元素如何处理溢出的子元素 可选值: visible，默认值子元素会从父元素中溢出，在父元素外部的位置显示 hidden 溢出内容将会被裁剪不会显示 scroll生成两个滚动条，通过滚动条来查看完整的内容 auto根据需要生成滚动条
<div class="box1"> <div class="box2"></div> </div> .box1{ width: 200px; height: 200px; background-color: aqua; border-width: 5px; border-color: crimson; border-style: dashed; border: solid red 10px; margin: 10px 20px 30px 40px; overflow: hidden; } .box2{ width: 100px; height: 300px; background-color: blue; }垂直外边距的重叠（折叠） -相邻的垂直方向外边距会发生重叠现象 -兄弟元素 -兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值） -特殊情况: 如果相邻的外边距一正一负，则取两者的和 如果相邻的外边距都是负值，则取两者中绝对值较大的 -兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理 -父子元素 -父子元素间相邻外边距，子元素的会传递给父元素（上外边距卫 -父子外边距的折叠会影响到页面的布局，必须要进行处理
行内元素的盒模型
行内元素不支持设置宽度和高度行内元素可以设置padding，border，margin，但垂直方向上不会影响页面布局display：设置元素显示类型 inline：将元素设置为行内元素 block：将元素设置为块元素 inline-block：将元素设置为行内块元素(可以设置宽高但不会独占一行) none：元素不在页面显示 visibility：设置元素显示状态 hidden：隐藏元素，但是仍然占据位置 visible：正常显示
span{ display: inline-block; width: 200px; height: 30px; border: aqua 5px solid; background-color: burlywood; margin: 10px; visibility: visible; }