本帖最后由 暴风雨 于 2022-10-14 23:36 编辑
一、今日内容：
css盒子模型
边框 会影响盒子大小
border 需要设置宽度 样式 颜色
样式 solid 实线 dashed 虚线 dotted点线
可以单独设置上下左右边框
border-left左边框
border-lright右边框
border-top上边框
border-bottom 下边框
border-collapse 设置表格相邻的格子边框重叠
2. 内边距 也会影响盒子大小
padding 内容与盒子边框的距离
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom下内边距
padding：
设置一个值 上下左右 两个值 上下 左右 三个值 上 左右 下 四个值 上 右 下 左
3.外边距 maigin
margin
一个值上下左右 两个值 上下 左右 三个值 上 左右 下 四个值 上 右 下 左
margin 盒子外边距的距离
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom下外边距
margin：0 auto； 盒子居中
外边距塌陷问题 嵌套 块元素 设置外边距会导致塌陷
解决方法
1.给父元素设置上边框
2.给父元素设置上内边距
3.给父元素设置overflow ：hidden；属性
清楚内外边距
*{
margin 0
padding 0
}
3 圆角边框
border-radius
正圆 设置正方形盒子 属性值50%
胶囊形 设置矩形 属性值高的一半
可以设置四个值
左上角 右上角 左下角 右下角 （ border-top -left-radius border-top-right-radius border-bottom-left border-bottom-right）
4 盒子阴影
box-shadow
必须属性 h-shadow 水平（像素值 ） v-shadow 垂直（像素值 ）
阴影程度 （像素值 ） 阴影颜色
二、今日问题
无
三、解决方法
无
|
