盒子模型（每个标签都是一个盒模型）
-
盒子属性（单位：px）
1），content：内容区域width：盒子宽度height：盒子高度2），
border：边框线 复合属性（包括宽度，样式，颜色）包含分属性-
border:1px solid blue; /*给盒子定一个边框线，这是一个复合属性*/ /*三个参数*/ border-width ： 边框线宽度 px eg：1px，2px，3px... medium 默认值 3px thick 粗的 5px thin 细的 1px border-style ： 边框线样式 solid 实线 dashed 虚线 dotted 点状线 double 双线 border-color ： 边框线颜色(不给颜色时，默认给的是字体的颜色) 1. 关键字：blue，red，yellow，purple 2. 十六进制颜色值 #cc3300 cc => 红色 33 => 绿色 00 => 蓝色 值范围：0~9，a~f 常见值：#ffffff 黑色 #000000白色 #999999灰色 #eeeeee淡灰色 0~f越来越灰 两两相同可以缩写：eg：#cc3300 => #c30 3. rgb() (red, greed, blue) eg:rgb(0, 255, 255) 0~255 0~255 0~255 4. rgba() (red, greed, blue, 0~1) 小数前面的0可以省略 eg：0.1 => .1 rgb-alpha 颜色透明度 0~1 0完全透明 0.5半透明 1全透明
-
/其中，若想修改其中一条边框线，可以单独使用一条属性/
border-top => 上边框线 left => 右边框线 right => 左… bottom => 下…
eg：border-top:3px solid red;
/每条边框线还能细分/
eg：border-top-color:red ==> 设置上边框线的颜色
eg：border-left-width:1px ==> 设置左边框线的宽度
/注意！写样式的时候，如果只需要控制单条样式，要写的很细，不要出现浪费性能/
/内边距的大小，也就是content盒子和border的距离/
}
padding:1px; ==> 1个值 代表4个方向
padding:2px 3px; ==> 2个值 2px代表上下 3px代表左右左右
padding:1px 2px 3px; ==> 3个值 1px代表上 2px代表左右 3px代表下
padding:1px 2px 3px 4px; ==> 4个值 从上开始 顺时针方向，上右下左
/padding主要用来控制父级盒子和内容盒子之间的距离/
4），margin ：外边距，border线以外的距离，类似于盒子外面贴了木板，会挤开别的元素
-
.warp{ width:200px; height:200px; /*width height 是content内容盒子的大小*/ border:1px solid blue; /*外边框线的大小*/ padding:20px; /*内边距的大小，也就是content盒子和border的距离*/ margin:30px; /*外边距，和其他元素的距离*/ } margin:1px; ==> 1个值 代表4个方向 margin:2px 3px; ==> 2个值 2px代表上下 3px代表左右左右 margin:1px 2px 3px; ==> 3个值 1px代表上 2px代表左右 3px代表下 margin:1px 2px 3px 4px; ==> 4个值 从上开始 顺时针方向，上右下左
margin:5px auto; ==> 第一个代表上下外边距，第二个代表让左右两侧外边距一样，居中
5），外边距合并（只存在于块级盒子和块级盒子之间）
-
-
父子级关系的盒子，都是块级盒子，垂直方向相遇的margin值，会产生合并 ==> 合并成为较大的margin值
<style>兄弟元素之间 垂直方向相遇的margin值 会产生合并，合并为较大的margin值
<style> div{ background-color:#000; height:100px; margin:20px 0px; } </style> ... <div> <p>123</p> </div> <div> <p>123</p> </div>解决方案：
1.直接使用父级的padding 2. 给外层盒子一个border线，在两个margin值之间形成一堵墙（有时不需border） 3. 给父级盒子一个`overflow:hidden;`样式 4. 给 浮动 定位写盒子的方法：
从外写到内，从上写到下，如果不知道全部给上边框线
外面的盒子，和里面的内容的关系 ==> padding
-
盒子模型（每个标签都是一个盒模型）
-
盒子属性（单位：px）
1），content：内容区域width：盒子宽度height：盒子高度2），
border：边框线 复合属性（包括宽度，样式，颜色）包含分属性-
border:1px solid blue; /*给盒子定一个边框线，这是一个复合属性*/ /*三个参数*/ border-width ： 边框线宽度 px eg：1px，2px，3px... medium 默认值 3px thick 粗的 5px thin 细的 1px border-style ： 边框线样式 solid 实线 dashed 虚线 dotted 点状线 double 双线 border-color ： 边框线颜色(不给颜色时，默认给的是字体的颜色) 1. 关键字：blue，red，yellow，purple 2. 十六进制颜色值 #cc3300 cc => 红色 33 => 绿色 00 => 蓝色 值范围：0~9，a~f 常见值：#ffffff 黑色 #000000白色 #999999灰色 #eeeeee淡灰色 0~f越来越灰 两两相同可以缩写：eg：#cc3300 => #c30 3. rgb() (red, greed, blue) eg:rgb(0, 255, 255) 0~255 0~255 0~255 4. rgba() (red, greed, blue, 0~1) 小数前面的0可以省略 eg：0.1 => .1 rgb-alpha 颜色透明度 0~1 0完全透明 0.5半透明 1全透明
-