柚子快报邀请码778899分享：前端 CSS-盒子模型
盒子模型的重要组成部分
内容区域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轴偏移量 模糊半径 扩散半径 颜色 内外阴影（前两个属性值必填）
柚子快报邀请码778899分享：前端 CSS-盒子模型
参考链接
发表评论