学习内容:
学习时间:
例如:
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.垂直方向】
兄弟元素之间的相邻外垂直边距会取最大值而不是取和。
父子元素垂直外边距相邻,那么子元素的外边距会设置给父元素。
相邻【使用内容、边框或者内间距来改变相邻,注意保持可见框大小不变】
垂直【不用垂直外边距,给父元素设置垂直内边距】
完成情况:完成
问题:目前没有