C12、盒子模型

一、边框属性

1. 什么是：边框就是环绕在标签的宽度和高度

2. 边框格式：border：

3. border-stayle: solid,dashed

4. border：连写，bd+//快捷键，全部可以省略

5. border-width: 上 右 下 左

6. border-style: 上 右 下 左

7. border-color: 上 右 下 左

8. border用来做几何图形

二、内边距属性

1. 什么是内边距：边框和内容之间的距离就是内边距

2. 设置方式与边框属性一致，只是使用padding作为关键字

3. 给标签设置内边距后，便签占有的宽度和高度会发生变化

三、外边距属性

1. 什么是外边距：标签与标签的距离就是外边距

2. 设置方式与内边框一致，只是使用margin作为关键字

3. 行内元素回车和空格都会被解析成一个空格，注意与外边距的区别

4. 外边距是没有颜色。

5. 外边距合并现象：垂直方向指多个外边距相接时候合并，以最大为标准，水平方向并不会

四、盒子模型

1. 什么是盒子模型：类比现实生活中盒子，手机盒子一类的

2. HTML所有边框都可以设置内边框、边框、外边框。

3. 内容宽度和高度：content 内容 width及height

4. 元素宽度和高度： 宽度 =左边框+左边距+width +右边框+右边距，高度同理可得

5. 元素空间宽度和高度：元素空间宽度=元素宽度+外边框宽度

五、盒子box-sizing属性

1. 问题：水平方向上盒子内容超过边界，它会向下换行

2. box-sizing: border-box保证盒子宽高不变（自动缩减宽高）CSS3属性

3. 如果两个盒子是嵌套关系，里面盒子顶部设置外边距，外面的一个盒子也会被顶下来，加边框可以解决问题（为什么？），优先考虑padding（父子关系），再考虑margin（兄弟关系）。

4. 嵌套关系可用margin: 0 auto在水平方向居中

六、设置盒子居中和内容居中

1. text-align：文字图片水平居中

2. margin： 0 auto; 使得盒子居中

3. 清空默认边距：（效率比较低）*{ margin:0; padding:0;}还有使用yui全部标签选中方式

七、行号和字号

1. 行高：ling-height

2. 默认情况: 盒子高=行高，默认情况下文字在盒子高中垂直居中的。

3. 可以利用盒子高与行高一致，达到垂直居中的效果。只是适用于一行文字。

4. 多行文字居中就只能使用padding来让文字居中

5. 文字测量一般以左边为基准

八、网页注意事项：

1. 从外到内，从上到下制作问昂也