CSS盒子模型

一.CSS三大特性

1.继承性

2.层叠性

3.优先级

接前面CSS进阶

3.1优先级

便捷记法：谁作用范围小，谁的优先级就高

如果都是同一种选择器，那就遵循就近原则，靠近谁就使用谁

3.2权重叠加计算

Chrome调试工具

（拓展）查错流程（遇到样式出不来，要学会通过调试工具找错）

注意：如果CSS上一行代码出错，会导致下一行也不生效

pxcook软件的基本使用

png后缀用设计模式

psd后缀就用开发模式

重点.盒子模型

1.1.盒子模型的介绍

两个盒子之间的距离就是外边距

2.1.内容的宽度和高度

3.1.边框（border）- 连写形式

border: 粗细 线条样式 颜色 -- 不分先后顺序,先后写谁都可以

3.2.边框（border）-单方向设置

 3.3.边框（border）-单个属性

 3.4.盒子实际大小触及计算公式

 

 在浏览器调出检查后发现div尺寸变成了420x420，其原因是因为盒子的最终尺寸是盒子的width / height + 边框线。border是会撑大盒子的

（小案例）盒子边框的小案例

（综合案例）新浪导航

3.5.内边距（padding）

内边距和外边距一样，都会把盒子撑大

padding如果只设置一个数值，那么就是四边内边距都为同一个值

padding 属性可以当做复合属性使用，表示单独设置某个方向的内边距；四值：上  右  下  左  从上顺时针旋转，比如 padding: 10px 20px 40px 80px; 

三值：上  左右  下；  两值：上下  左右

不用硬记，多值写法，永远都是从上开始顺时针转一圈，如果数不够，看对面

内边距也可以单独设置一边，格式为padding-top、padding-right、padding-bottom、padding-left。

3.6.盒子实际大小终极计算公式

3.7.优化之前的新浪导航案例

 在实际开发中，可能每个超链接的字数不一样，因此就会出现有的字少，空间间距长，而有的字数多久导致溢出链接宽度而换行，因此可以使用padding来使每个链接的左右两边保持同一间距

使用 padding: 0px 16px;

3.8.CSS3盒模型（自动内减）

3.9.外边距

margin: 100px，表示盒子外边距四边为100像素。若是定义单独一边的外边距，有margin-top、

margin-right、margin-bottom、margin-left。

3.10.清除默认内外边距

3.11.版心居中

版心居中就一个重要代码，margin: px px; 左边为上下的位置，右边为上下位置，如果为margin:0 auto则表示版心居中。

需要注意的是，不要与margin: px; 混淆，前者是版心居中，后者是表示外边距。注意！

（案例）网页新闻列表案例

3.11.外边距折叠现象 -- ①合并现象

意思即是如果两个盒子之间都有外边距，就取两者外边距最大的那一个。不会相加

 ②塌陷现象

设置 overflow: hidden; 最实用

3.12.行内元素内外边距的问题

如果想要通过margin或padding改变行内标签的垂直位置,无法生效，即：行内标签的margin-top 或者margin-bottom不生效；行内标签的padding-top 或者padding-bottom不生效。若想改变行内元素的垂直位置，可以使用line-height。