第六章
盒子模型
1.边框(border)
1.边框颜色
border-color
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UzS7ZJi2-1610870351366)(D:\笔记\捕获.PNG)]
2.边框粗细
border-width
属性值:thin 细边框
medium 中等边框(默认)
thick 粗边框
像素值
例:border-width:15px;
border-width:thin;
border-width:thin medium thick 10px; 上、右、下、左(顺时针顺序)
3.边框样式
border-style
属性值:none 无边框
hidden 与“none”类似,用于表时,解决边框冲突
dotted 点状边框,在大部分浏览器中显示为实线
dashed 虚线,在大多数浏览器中显示为实线
solid 实线
double 双线,双线的宽度等于 border-width 的值
可以有1~4个值
border-style:dotted solid double dashed; 上、右、下、左(顺时针顺序)
border-style:dotted solid double; 上、左右、下
border-style:dotted solid; 上下、左右
border-style:dotted; 上下左右
4.border的简写
border-width
border-style
border-color
例:border:5px solid red;
5.圆角边框
border-radius: 20px 10px 50px 30px;
注:四个属性按顺时针排序(从左上、右上、右下、左下);
有一个值为负数时,全部失去弧度,变成正方形
制作圆形
div{
width: 100px;
height: 100px;
border: 4px solid red;
border-radius: 50%;
}
注:元素的宽度和高度必须相同;
圆角的半径为元素宽度的一半,或者直接设置圆角半径值为50%
制作半圆
注:制作上半圆或下半圆时,元素的宽度是高度的2倍,而且圆角半径为元素的高度值;
制作左半圆或右半圆时,元素的高度是宽度的2倍,而且圆角半径为元素的宽度值
制作扇形
“三同,一不同”:
“三同”是元素宽度、高度、圆角半径相同;
“一不同”是圆角取值位置不同
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kzBNke3T-1610870351367)(D:\笔记\圆角边框.PNG)]
2.外边距(margin)
margin-top
margin-bottom
margin-left
margin-right
margin
例:margin:25px 50px 75px 100px; 上、右、下、左(顺时针顺序)
margin:25px 50px 75px; 上、左右、下
margin:25px 50px; 上下、左右
margin:25px; 上下左右
特殊用法:寻找所有margin,适用网页居中对齐样式(*用于寻找所有margin)
*{margin:0px auto;}
注:该语句作用于全局,优先级较低,可被后续定位更精确的语句覆盖效果(使用时可先覆盖全局再局部修改)
3.内边距(padding)
padding-top
padding-bottom
padding-left
padding-right
padding
简写顺序同上
4.盒子模型的尺寸
盒子模型总尺寸 = margin + border + padding + width
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SSGf9Gm7-1610870351369)(D:\笔记\尺寸.PNG)]
box-sizing
语法:box-sizing:content-box | border-box | inherit;
注:“content-box”,默认值,盒子的总尺度;
“border-box”,盒子的宽度或高度,等于元素内容的宽度或高度;
“inherit”,元素继承父元素的盒子模型模式
5.盒子阴影
语法:box-shadow:inset x-offset y-offset blur-radius color;
注:“inset”,阴影类型内阴影
“x-offset”,X轴位移,指定阴影水平位移量;(左负右正)
“y-offset”,y轴位移,指定阴影垂直位移量;(上负下正)
“blur-radius”,阴影模糊半径阴影向外模糊的模糊范围;
“color”,阴影颜色,定义绘制阴影时所使用的颜色