3月24日知识点梳理

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; 让当前元素在父元素里面左右居中。
前四章总结 ：
第一章：
html结构
标签！！！
第二章:
css语法
css样式表
选择符
第三章：
css属性：
文本属性
列表属性
边框属性
背景属性
浮动
第四章：
css盒模型
重点 ：
计算盒子在网页中真正所占据的空间。
占有的宽度：width + padding-left/right + border-left/right + margin-left/right
占有的高度：height+ padding-top/bottom + border-top/bottom + margin-top/bottom
1 ：公共样式、重置样式先导入 2: 首页上所有的版心宽度一样，并且居中
3：添加浮动 给li添加大小 先按照大部分导航样式设置。
4：调整文本样式，左右上下居中 文本大小
5： 导航遗留的问题： a的区域部不够大。用户体验不好。（元素类型）
6：banner的临时写法：给外围结构 添加背景图
7：banner遗留问题：banner图太宽，无法放在版心里面 （定位）
8：公共标题的样式 ， 单行文本上下的误差 通过 line-height 等于文本大小做清除 ， padding-top把文字往下挤。
规划:
元素命名：
id划分外围结构 -> id选用驼峰式命名法 || 语义化news/case。
版心的命名 -> 连字符命名法 news-wrap
内部内容块的命名 -> 下划线 news_left / news_right
css外部样式表：
1：每个页面都需要属于自己的样式表。
2：一个网站，都拥有公共样式表。
3：重置样式的样式表。（清除所有默认样式）
注：如果版心两侧没有颜色平铺，可以直接写版心区域。
今天对前四章的知识点进行了总结，老师把前四章的内容讲完了，开始带领我们作案例，虽然也能听得懂， 但是思维逻辑跟不上，等到自己单独作的时候，却是有一种无从下手的感觉。也不知道能不能学会这一行，心理也是有一点担忧。只能硬着头皮学下去，因为我想要改变以后的生活，不得不砥砺前行，好想线下上课主要是家里有琐事打扰，想要全身心投入学习中！