CSS系列之盒子模型/边框/外边距/内边距/圆角边框/盒子阴影
01 盒子模型
盒子模型总尺寸=内容宽度+border(边框宽度)+padding(内边距)+margin(外边距)
02 边框
- 常用边框设置
- border-color:设置边框颜色
- border-top-color
- border-right-color
- border-bottom-color
- border-left-color
- 同时设置上、右、下、左(顺时针)边框颜色简写方式:border-color:#369 #000 #f00 #00f;
- border-width:设置边框粗细
- 属性值设置:thin细 /medium中等/thick粗/像素值(单位px)
- border-style:设置边框样式
- 属性值设置:none/hidden/dotted星状虚线/dashed虚线/solid实线/double双线
- border-color:设置边框颜色
- 边框简写形式
- 同时设置边框颜色,粗细和样式
- border:1px solid red;
- 同时设置边框颜色,粗细和样式
03 外边距
- 外边框设置
- margin
- margin-top 设置顶端外边距
- margin-right 设置右端外边距
- margin-bottom 设置底部外边距
- margin-left 设置左端外边距
- margin
- margin
- 如何设置网页居中对齐
- margin:0px auto;
04 内边距
- 设置内边距
- padding
- padding-left 设置左端内边距
- padding-right 设置右端内边距
- padding-top 设置顶端内边距
- padding-bottom 设置底部内边距
- padding
- padding
05 如何设置圆角边框
- 语法:
- border-radius:10px 20px 30px 40px (四个属性值按顺时针排列,分别是左上 右上 右下 左下的圆角边框的属性值)
- border-radius:10px;(四个角属性值都为10px)
06 盒子阴影
- 语法
- box-shadow:阴影类型属性 x轴位移 y轴位移 阴影模糊半径 阴影颜色
07 程序示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#two{
width: 300px;
height: 300px;
background: lightblue;
border-radius: 10px;
border:1px solid antiquewhite;
margin: 0px auto;
float: left;
}
#one{
width: 200px;
height: 200px;
background: pink;
border-radius: 10px;
border:1px solid antiquewhite;
margin: 50px auto;
float: none;
}
</style>
</head>
<body>
<div id="two"><div id="one"></div></div>
</body>
</html>
- 运行结果