菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 谷江涛-20221014-前端css盒子模型 [打印本页]

作者: 暴风雨 时间: 2022-10-14 22:22
标题: 谷江涛-20221014-前端css盒子模型
本帖最后由暴风雨于 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  垂直（像素值  ）
阴影程度  （像素值  ）阴影颜色
二、今日问题
无
三、解决方法
无

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)