3、盒子模型
本章目标
- 理解盒子模型及其构成
- 会计算盒子模型尺寸
- 会使用盒子模型的两种解析方式来布局网页
- 会使用圆角属性给网页元素添加圆角效果
- 会使用盒子阴影属性给网页元素添加阴影效果
3.1、什么是盒子模型
讲解盒子模型及属性，并说明边框、外边框和内边框都是四个边，最后介绍盒子模型的立体结构.
在这里插入图片描述
在这里插入图片描述
3.2、边框
边框颜色 border-color
- 边框颜色设置方式与文本颜色对比讲解，都是使用十六进制
- 强调同时设置4个边框颜色时，顺序为上右下左
- 详细讲解分别上、下、左、右各边框颜色的不同设置方式，及属性值的顺序
在这里插入图片描述
边框粗细 border-width
- thin
- medium
- thick
- 像素值 border-top-width:5px; border-right-width:10px; border-bottom-width:8px; border-left-width:22px; border-width:5px ; border-width:20px 2px; border-width:5px 1px 6px; border-width:1px 3px 5px 2px; 边框样式 border-style
- none
- hidden
- dotted
- dashed
- solid
- double border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-style:solid ; border-style:solid dotted; border-style:solid dotted dashed; border-style:solid dotted dashed double; border简写 同时设置边框的颜色、粗细和样式
border:1px solid #3a6587;
border: 1px dashed red;
在这里插入图片描述
3.3、内外边距
外边距 margin
- margin-top
- margin-right
- margin-bottom
- margin-left
margin-top: 1 px
margin-right : 2 px
margin-bottom : 2 px
margin-left : 1 px
margin :3px 5px 7px 4px;
margin :3px 5px;
margin :3px 5px 7px;
margin :8px;
外边距的妙用：网页居中对齐
margin:0px auto;
网页居中对齐的必要条件
- 块元素
- 固定宽度
在这里插入图片描述
内边距 padding
- padding-left
- padding-right
- padding-top
- padding-bottom
padding-left:10px;
padding-right: 5px;
padding-top: 20px;
padding-bottom:8px;
padding:20px 5px 8px 10px ;
padding:10px 5px;
padding:30px 8px 10px ;
padding:10px;
3.4、盒子型模尺寸
在这里插入图片描述
box-sizing
在这里插入图片描述
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>box-sizing</title>
<style>
div{
width: 100px;
height: 100px;
padding: 5px;
margin: 10px;
border: 1px solid #000000;
box-sizing: border-box;
/*box-sizing: content-box; /!* 默认值*!/*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3.5、圆角边框
border-radius: 20px 10px 50px 30px;
四个属性值按顺时针排列
在这里插入图片描述
border-radius制作特殊图形：圆形
利用border-radius属性制作圆形的两个要点
- 元素的宽度和高度必须相同
- 圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%
div{
width: 100px;
height: 100px;
border: 4px solid red;
border-radius: 50%;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>border-radius制作圆形</title>
<style>
div{
width: 100px;
height: 100px;
border: 4px solid red;
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
使用border-radius制作特殊图形：半圆形
利用border-radius属性制作半圆形的两个要点
- 制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值
- 制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值
在这里插入图片描述
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>border-radius制作半圆形</title>
<style>
div{
background: red;
margin: 30px;
}
div:nth-of-type(1){
width: 100px;
height: 50px;
border-radius: 50px 50px 0 0;
}
div:nth-of-type(2){
width: 100px;
height: 50px;
border-radius:0 0 50px 50px;
}
div:nth-of-type(3){
width: 50px;
height: 100px;
border-radius:0 50px 50px 0;
}
div:nth-of-type(4){
width: 50px;
height: 100px;
border-radius: 50px 0 0 50px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
使用border-radius制作特殊图形：扇形
利用border-radius属性制作扇形遵循“三同，一不同”原则
- “三同”是元素宽度、高度、圆角半径相同
- “一不同”是圆角取值位置不同
在这里插入图片描述
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>border-radius制作扇形</title>
<style>
div{
background: red;
margin: 30px;
}
div:nth-of-type(1){
width: 50px;
height: 50px;
border-radius: 50px 0 0 0;
}
div:nth-of-type(2){
width: 50px;
height: 50px;
border-radius:0 50px 0 0;
}
div:nth-of-type(3){
width: 50px;
height: 50px;
border-radius:0 0 50px 0;
}
div:nth-of-type(4){
width: 50px;
height: 50px;
border-radius: 0 0 0 50px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
3.6、盒子阴影
在这里插入图片描述
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>box-shadow的使用</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
border-radius: 8px;
margin: 20px;
/*box-shadow: 20px 10px 10px #06c; /!*内阴影*!/*/
/*box-shadow: 0px 0px 20px #06c; /!*只设置模糊半径的阴影
*!/*/
box-shadow: inset 3px 3px 10px #06c; /*内阴影*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3.7、小结
在这里插入图片描述