89_css笔记5_css的盒子模型

一，盒子模型

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

1. 宽度/高度（width/height） == 指定可以存放内容的区域
2. 内边距(padding) == 填充物
3. 边框(border) == 手机盒子自己
4. 外边距(margin) == 盒子和盒子之间的间隙

二，外边距：margin

1. 标签和标签之间的距离就是外边距
2. 外边距的那一部分是没有背景颜色的
3. 默认外边距：Netscape 和 IE 对 body 标签定义的默认边距（margin）值是 8px
4. 相反地，Opera 将内部填充（padding）的默认值定义为 8px
5. 连写模式：顺时针读取
   1. margin:20px 40px 80px 160px;上 右 下 左
   2. margin:20px 40px 80px;上 右 下，左和右都是40
   3. margin:20px 40px;上 右，下和上一样是20，左和右一样是40
   4. margin:20px；上，右下左都是20
6. 非连写模式
   1. margin-top: ;上
   2. margin-right: ;右
   3. margin-bottom: ;下
   4. margin-left: ;左
7. 百分比格式：
   1. 百分数是相对于父元素的 width 计算
8. 外边距合并现象
   1. 在默认布局的垂直方向上, 默认情况下外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的

三，边框：border

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

1. border-style：
   1. none    定义无边框。
   2. hidden    与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
   3. dotted    定义点状边框。在大多数浏览器中呈现为实线。
   4. dashed    定义虚线。在大多数浏览器中呈现为实线。
   5. solid    定义实线。
   6. double    定义双线。双线的宽度等于 border-width 的值。
   7. groove    定义 3D 凹槽边框。其效果取决于 border-color 的值。
   8. ridge    定义 3D 垄状边框。其效果取决于 border-color 的值。
   9. inset    定义 3D inset 边框。其效果取决于 border-color 的值。
   10. outset    定义 3D outset 边框。其效果取决于 border-color 的值。
   11. inherit    规定应该从父元素继承边框样式。
2. 连写格式统一设置
   1. border: 5px solid blue；（边框的宽度 边框的样式 边框的颜色）
   2. border: 5px solid;（连写格式中颜色属性可以省略, 省略之后默认就是黑色）
   3. border: 5px blue;（连写格式中样式不能省略, 省略之后就看不到边框了）
   4. border: solid blue;（连写格式中宽度可以省略, 省略之后还是可以看到边框）
3. 连写格式每一边设置
   1. border-top: 边框的宽度 边框的样式 边框的颜色;
   2. border-right: 边框的宽度 边框的样式 边框的颜色;
   3. border-bottom: 边框的宽度 边框的样式 边框的颜色;
   4. border-left: 边框的宽度 边框的样式 边框的颜色;
4. 非连写格式统一设置：
   1. border-width: 5px 10px 15px 20px;
   2. border-style: solid dashed dotted double;
   3. border-color: blue green purple pink;
5. 非连写格式每一边设置
   1. border-top-width: 5px;
   2. border-top-style: solid;
   3. border-top-color: blue;

四，内边距：padding

1. 边框和内容之间的距离就是内边距
2. 给标签设置内边距之后, 标签占有的宽度和高度会发生变化
3. 给标签设置内边距之后, 内边距也会有背景颜色，就是background-color
4. 连写模式：
   1.  padding:20px 40px 80px 160px;
   2.  padding:20px 40px 80px;
   3.  padding:20px 40px;
   4.  padding:20px
5. 非连写模式：
   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,设置的为元素的宽高（边框 + 内边距 + 内容宽高）

七，轮廓（outline）属性

1.outline是不占空间的，既不会增加额外的width或者height（这样不会导致浏览器渲染时出现reflow或是repaint）

2.outline有可能是非矩形的（火狐浏览器下）

属性	说明	值	CSS
outline	在一个声明中设置所有的轮廓属性	outline-color outline-style outline-width inherit	2
outline-color	设置轮廓的颜色	color-name hex-number rgb-number invert inherit	2
outline-style	设置轮廓的样式	none dotted dashed solid double groove ridge inset outset inherit	2
outline-width	设置轮廓的宽度	thin medium thick length inherit	2

八，注意点

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