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

标题: 丁竹清-前端（9）-20221114 [打印本页]

作者: 清墨、 时间: 2022-11-16 01:01
标题: 丁竹清-前端（9）-20221114
盒子模型
边框（border）
border：border-width border-style border-color
border-style常用值：solid（实线）、dashed（虚线）、dotted(点线）
边框会影响盒子的宽度
表格细线边框（将相邻的边框合并在一起）：border-collapse:collapse
内边距（padding）
padding-left：
padding-right：
padding-top：
padding-bottom：
padding:5px
padding:5px 10px
padding:5px 10px 20px
padding:5px 10px 30px
写1个值，代表上下左右都是5px
写2个值，代表上下是5px，左右是10px
写3个值，代表上是5px，左右是10px，下是20px
写4个值，代表（顺时针）上5px右10px下20px左30px
如果盒子没有指定宽度，就不会被padding撑开，指定了宽度就会被撑开
如果不想被撑开，将高和宽减去padding值即可
外边距（margin）
分开写和简写逻辑同内边距
典型应用：将块级元素水平居中
必须满足：
1、盒子必须有宽度
2、左右外边距设置为auto（自动）
如果行内盒子水平居中：
给父元素加text-algin：center
外边距合并：
margin定义块元素垂直外边距时可能会出现
相邻块元素垂直外边距合并
嵌套块元素垂直外边距塌陷
1、给父元素定义上边框
2、给父元素添加上内边距
3、给父元素添加 overflow:hidden
清除内外边距:
*{padding：0；
margin：0；}
CSS的圆角边框
（border-radius：像素值/百分比）
border-top-left-radius：
border-top-right-radius：
border-bottom-right-radius：
border-bottom-left-radius：
简写borer-radius:顺时针
CSS盒子的阴影
box-shadow：
h-shadow
必须，水平阴影位置，可有负值
v-shadow
必须，垂直阴影位置，可有负值
blur
模糊距离
spread
阴影尺寸
color
阴影颜色
inset
内部阴影；默认outset不过不要写会造成阴影失效

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