2022/8/10
学习进度
css(3) 30:33
内边距与外边距
margin
从内到外 : 内容 -> padding -> border -> margin
margin : 上 左 下 右
跟 border 是一样的用法
视频中出现问题 : div-inner 进行 margin 20px , 为什么会拉着父元素向下 20px , 而不是距离父元素 20px
原因 : 父元素没有上边框 或 padding
解决方法有 ① ② ③ ④
.div-outer{
① : border-top : 1px soild
② : padding-top : 1px
③ : overflow : hidden
}
① ② 的缺点是会增加元素的大小
③ 的缺点是我们有时会用到 overflow , 并且不想 hidden
④ :
.div-outer::before{
content:"";
display : table;
}
还提及一种冲突的情况 :
margin-bottom : 20px ( div-outer )
margin-top : 30px; ( div-inner )
则两者距离回取最大值 ( 30px )
一个习惯是当有连续的 <div> 时 , 我们就只定义上边距 或者 下边距.
padding
跟 margin 一致
提及 width = content + padding + border ( 三者大小 )