2020-11-26

学习内容：

学习时间：

例如：
1、 周三晚上7点到9点

---

学习产出：

1、盒子模型：元素想象成盒子，布局就是摆放盒子。
内容区（content)，内边距（padding内容和边框），边框(border)，外边距（margin盒子之间的距离）

2.盒子模型——边框：
要设置边框，必须指定三个样式
【border-width】：可以分别指定四个边框的宽度，分别是上，右，下，左（逆时针）。如果只设置了三个值，那么会分别设置给上，左右，下。如果只设置了两个值，那么先上下，后左右。
还有：border-xxx(top,right,bottom,left)-width
【border-color】:可以设置四个值，逆时针，类似于width
【border-style】：可以设置四个之，逆时针，类似于width

大部分浏览器，边框的宽度和颜色都有默认值，样式为none。
通过边框的简写样式，可以同时设置四个边框的样式，宽度，颜色,并且没有顺序要求，并且是同时指定四个边的变量，不能分开指定。
比如：border:10px red solid;
或者：border-xxx(top,right,bottom,left)可以单独设置。其余和上面的一样。
还可以设置单独一条边没有：border-xxx:none

3.内边距：padding-xxx（内容区的背景会延伸到内边距，子元素在父元素的内容区，只能是正值）
【盒子的可见框大小由内容区，内边距和边框共同决定。】
【盒子可见框的宽度=border-left-width+paddig-left+width+border-right-width+padding-right+width】高度类比
简写属性：padding: 100px ;

4.外边距：margin-xxx
因为页面中的元素靠左上放置，所以设置上左会改变，设置右下，本盒子不会改变，但是会改变后面的盒子。
外边距也可以设置为负值，向反方向移动。
外边距可以设置为auto：一般设置水平方向的margin，并且是最大值。如果是垂直方向设置为auto，则为0。如果左右都设置为auto,那么两侧外边距相同，并且自动在父元素中居中。

5.垂直外边距的重叠：【1.相邻 2.垂直方向】
兄弟元素之间的相邻外垂直边距会取最大值而不是取和。
父子元素垂直外边距相邻，那么子元素的外边距会设置给父元素。
相邻【使用内容、边框或者内间距来改变相邻，注意保持可见框大小不变】
垂直【不用垂直外边距，给父元素设置垂直内边距】

完成情况：完成
问题：目前没有