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.垂直方向】
兄弟元素之间的相邻外垂直边距会取最大值而不是取和。
父子元素垂直外边距相邻,那么子元素的外边距会设置给父元素。
相邻【使用内容、边框或者内间距来改变相邻,注意保持可见框大小不变】
垂直【不用垂直外边距,给父元素设置垂直内边距】

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值