电子元器件在哪个网站上做b站暴躁姐
盒子模型的重要组成部分
- 内容区域content：width , height
- 内边距：内边框和内容区域的距离Padding
- 边框线：Border
- 外边距：Margin
Border (边框线)
属性：Border
属性值：边框线粗细px 线条样式 颜色(不区分先后顺序，中间用空格隔开)
线条样式的属性值：
- solid 实线
- dashed 虚线
- dotted 点线
div{border:red 5px solid;}
Border-radius (圆角)
作用：设置元素的外边框为圆角
属性：border-radius
属性值：数字px 或 百分比 （属性值是圆角半径）
设置圆的半径为15px
div{width:100px;height: 100px;background-color: red;border-radius: 15px;}可以看到盒子的边框已经发生改变
正圆-盒子
将半径设置为盒子的宽高一半，宽高相等
div{width:100px;height: 100px;background-color: red;border-radius: 50px;} 
胶囊-盒子
将圆的半径设置为盒子的高度一半
div{width:200px;height: 100px;background-color: red;border-radius: 50px;}
同时给四个角赋值
div{width:100px;height: 100px;background-color: red;border-radius: 15px 25px 15px 30px;}每个角的像素都不同
Padding (内边距)
作用：设置内容与盒子边缘之间的距离
属性：paddding
属性值:数字px
div{padding:50px;background-color: red;}
Margin (边缘距离)
作用：拉开两个盒子之间的距离
属性：Margin
属性值：数字px
div{width:400px;height: 400px;margin: 50px;padding:50px;background-color: red;}可以清楚的看到边缘距离是50
设置单方向线
属性：盒子属性-方向名词(例如设置左边框border-left)
- 左边：left
- 右边：right
- 顶部：top
- 底部：bottom
属性值：边框线粗细px 线条样式 颜色(不区分先后顺序，中间用空格隔开)
div{border-left:red 5px solid;}
box-shadow (盒子阴影)
作用：给元素设置阴影效果
属性：box-shadow
属性值：x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色 内外阴影（前两个属性值必填）