WEB前端学习日志第二周 day2

WEB前端学习日志第二周 day2

今日总结：今天学习了css盒模型中的margin的用法，至此经过这一段的学习共学习了HTML的结构和标签，css的语法、样式表和选择符，同时还有css的文本、边框、列表、背景属性，并学习了浮动知识，再加上今天学习的css盒模型。已经学习了挺多知识，于是开始着手做一个简单的网页。

通过vscode、ps、和浏览器一步一步尝试做除了一个网页。

CSS盒模型中的margin用法

margin:
1: margin长在元素之外的。（这点和padding不同）

2: margin控制的是 同级元素 之间的位置关系。（例如两个同级div之间的间隔）

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; 让当前元素在父元素里面左右居中。

网页制作

以这个设计图为模板，制作网页。

通过三个css制作，一个时这一页本身的css，第二个是共同页面的css，最后一个为重置样式。
此网页共分为7部分，按照上下顺序依次制作，代码如下。



对其进行css修饰


最终得出效果

第一天虽然没有制作完成，但是我相信万事开头难，经过第一格网页的制作后以后我会越发熟练。