学习前端的第七天

盒模型

一、padding
1、padding是长在内容和盒子之间的，在盒子内部。
2、padding是为了调整 子元素 在 父元素里面位置关系。
3、padding的特点：padding值会把盒子撑大。
4、如果想让盒子保持原有大小，需要在宽高的基础上减掉padding值。
5、给单一方向设置padding值：
padding-left/right/top/bottom:;
6、padding 设置方法：
padding:1个值 四周
padding:2个值 上下 左右
padding:3个值 上 左右 下
padding:4个值 上右下左
7、padding不能设置负值
8、 padding不会对背景图造成影响。
9、如果一个盒子没有设置固定的宽和高，添加padding是不用减的。
二、margin
1、margin长在元素之外的。
2、margin控制的是 同级元素 之间的位置关系。
3、margin不会对盒子本身的宽高造成影响。
4、给单一方向添加margin值
margin-left/right/bottom/top:;
5、margin的设置方法：
margin:1个值 四周
margin:2个值 上下 左右
margin:3个值 上 左右 下
margin:4个值 上右下左
6、margin可以设置负值。
7、margin常出现的BUG:
a：当父元素和第一个子元素都没有设置浮动的情况下，如果给第一个子元素添加margin-top 会错误的把margin-top加在父元素上面。
b: 上下相邻两个元素之间的margin值，不会叠加，按照最大值去设置。
8、margin:0 auto; 让当前元素在父元素里面左右居中。
三、同级元素之间用margin，不同级元素之间用padding。
四、计算盒子在网页中真正所占据的空间。
占有的宽度：width + padding-left/right + border-left/right + margin-left/right。
占有的高度：height+ padding-top/bottom + border-top/bottom + margin-top/bottom。

网页布局

一、元素命名：
id划分外围结构 -> id选用驼峰式命名法 || 语义化news/case。
版心的命名 -> 连字符命名法 news-wrap
内部内容块的命名 -> 下划线 news_left / news_right
二、css外部样式表：
1、每个页面都需要属于自己的样式表。
2、一个网站，都拥有公共样式表。
3、重置样式的样式表。（清除所有默认样式）
注：如果版心两侧没有颜色平铺，可以直接写版心区域。
三、先引入公共样式表和重置样式表，再引入属于自己的样式表。
四、页面布局顺序：由上到下，由左到右。
五、导航遗留问题：a的区域不大，需要学习元素类型才能解决。
六、banner遗留问题：banner图太大，无法放在版心里，需要学习定位才能解决。
七、单行文本会有大小的误差，通过line-height=文本大小可清除。
八、