组成
- 内容区域-width&height
- 内边距-padding(出现在内容与盒子边缘之间)
- 边框线-border
- 外边距-margin(出现在盒子的外面)
边框线
- 属性名:border(bd)
- 属性值:边框线粗细 线条样式 颜色 (不去区分顺序)
- 常用线条样式:
solid--线条样式
dashed--虚线
dottted--点线
- 设置单方向边框线
属性名:border-方位名词(bd+方向名词首字母)
属性值:边框线粗细 线条样式 颜色 (不去区分顺序)
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
background-color: pink;
/* border: 1px solid #000; */
/* border: 2px dashed #000; */
/* border: 3px dotted #000; */
/* 设置单方向的边框线 */
border-top: 2px solid #000;
border-right: 2px dashed #000;
border-bottom: 2px dotted #000;
border-left: 2px solid yellow;
}
</style>
</head>
<body>
<div>div 标签</div>
</body>
</html>
内边距
- 作用:设置内容与盒子边缘之间的距离
- 属性名:padding/padding-方位名词
- 内边距多值写法
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
/* padding: 20px; */
/* padding-top: 20px;
padding-right: 40px;
padding-bottom: 80px;
padding-left: 10px; */
/* padding多值写法 */
/* 上 右 下 左 */
/* padding: 10px 20px 40px 80px; */
/* 上 左右 下 */
/* padding: 10px 40px 80px; */
/* 上下 左右 */
padding: 10px 80px;
/* 记忆方法:顺时针从上转一圈,如果当前方位没有数值,取值和对面一样 */
}
</style>
</head>
<body>
<div>div 标签</div>
</body>
</html>
尺寸计算
- 默认情况:盒子尺寸=内容尺寸+border尺寸+内边距尺寸
- 加border/padding会撑大盒子
- 解决:
手动做减法,减掉border/pading的尺寸
內减模式:box-sizing:border-box
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
/* 手动减法 */
/* width: 160px;
height: 160px; */
background-color: pink;
padding: 20px;
/* 内减模式:不需要手动减法,加padding和border不会撑大盒子 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div>div 标签</div>
</body>
</html>
外边距
- 作用:拉开两个盒子之间的距离
- 属性名:margin
- 提示:与padding属性值写法、含义相同
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color:
pink;
/* 外边距不会撑大盒子 */
/* margin: 20px; */
/* margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px; */
/* 多值写法和padding一致 */
}
</style>
</head>
<body>
<div>div 模型</div>
</body>
</html>