89_css笔记5_css的盒子模型

一，盒子模型

CSS盒子模型仅仅是一个形象的比喻, HTML中所有的标签都是盒子

宽度/高度（width/height） == 指定可以存放内容的区域

内边距(padding) == 填充物

边框(border) == 手机盒子自己

外边距(margin) == 盒子和盒子之间的间隙

二，外边距：margin

标签和标签之间的距离就是外边距

外边距的那一部分是没有背景颜色的

连写模式

margin:20px 40px 80px 160px;上右下左

margin:20px 40px 80px;上右下，左和右都是40

margin:20px 40px;上右，下和上一样是20，左和右一样是40

margin:20px；上，右下左都是20

非连写模式

margin-top: ;上

margin-right: ;右

margin-bottom: ;下

margin-left: ;左

外边距合并现象

在默认布局的垂直方向上, 默认情况下外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的

三，边框：border

边框就是环绕在标签宽度和高度周围的线条

连写格式统一设置
1. border: 5px solid blue；（边框的宽度边框的样式边框的颜色）
2. border: 5px solid;（连写格式中颜色属性可以省略, 省略之后默认就是黑色）
3. border: 5px blue;（连写格式中样式不能省略, 省略之后就看不到边框了）
4. border: solid blue;（连写格式中宽度可以省略, 省略之后还是可以看到边框）
连写格式每一边设置
1. border-top: 边框的宽度边框的样式边框的颜色;
2. border-right: 边框的宽度边框的样式边框的颜色;
3. border-bottom: 边框的宽度边框的样式边框的颜色;
4. border-left: 边框的宽度边框的样式边框的颜色;
非连写格式统一设置：
1. border-width: 5px 10px 15px 20px;
2. border-style: solid dashed dotted double;
3. border-color: blue green purple pink;
非连写格式每一边设置
1. border-top-width: 5px;
2. border-top-style: solid;
3. border-top-color: blue;

四，内边距：padding

边框和内容之间的距离就是内边距
给标签设置内边距之后, 标签占有的宽度和高度会发生变化
给标签设置内边距之后, 内边距也会有背景颜色，就是background-color
连写模式：
1. padding:20px 40px 80px 160px;
2. padding:20px 40px 80px;
3. padding:20px 40px;
4. padding:20px
非连写模式：
1. padding-top: 20px;
2. padding-right:40px;
3. padding-bottom:80px;
4. padding-left:160px;

五，内容宽高：width/height

//以下两个选择器对应的标签的宽高都是200
  .box9{
            width: 150px;
            height: 150px;
            padding: 25px;
            background-color: red;
        }

   .box10{
            width: 160px;
            height: 160px;
            border: 20px solid #000;
            background-color: deepskyblue;
        }

元素宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框

元素空间的宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距

六，box-sizing属性

box-sizing: content-box,表示width/height,设置的为元素内容的宽高（跟不设置效果一样）

box-sizing: border-box,表示width/height,设置的为元素的宽高（边框 + 内边距 + 内容宽高）

七，注意点

如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来
如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性
在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin
margin本质上是用于控制兄弟关系之间的间隙的
在嵌套关系的盒子中, 我们可以利用margin: 0 auto;的方式来让里面的盒子在外面的盒子中水平居中，margin: 0 auto; 只对水平方向有效, 对垂直方向无效
text-align:center;和margin:0 auto的区别：text-align: center;作用，设置盒子中存储的文字/图片水平居中；margin:0 auto;作用，让盒子自己水平居中
为什么要清空默认边距(外边距和内边距)
在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等, 所以在企业开发中, 编写代码之前第一件事情就是清空默认的边距
如何清空默认的边距
格式*{ margin: 0; padding: 0;}
通配符选择器会找到(遍历)当前界面中所有的标签, 所以性能不好
企业开发中可以从这个网址中拷贝：http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css