1、什么是盒子模型
进行网页布局的重要属性,一个页面由可以由多个盒子组成。
盒子的组成:内容区域+边框(border)+内边距(padding)+外边距(margin)
2、div标签
div标签是块级标签,在没有设置高度、宽度时,和文本标签p功能类似,也可以自动换行。但和p标签不同的是,div标签可以作为容器包含其他标签,而p标签则不能作为容器使用。
3、盒子模型的属性:用盒子作为页面的布局时会用到的属性
3.1、border边框属性
边框属性 | 作用 |
---|---|
border | 边框基本属性 |
boder-style | 边框样式 |
boder-color | 边框颜色 |
border-width | 边框宽度 |
border-collapse | 边框合并 |
border-radius | 边框弧度 |
border-方向 设置某一边的边框 |
代码举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 300px;
border: solid 1px black;
font-size: 30px;
border-radius: 25px;
}
</style>
<body>
<div>
Manchester
</div>
</body>
</html>
border在使用是可以用boder:宽度 边框样式 边框宽度 这样简写的的方式来同时设置。
效果展示
3.2、padding内边距( 内填充)属性
内边距属性 | 作用 |
---|---|
padding:10px; | 指padding所有方向内边距加10px |
padding:7px 10px; | 指padding上下内边距加10px,左右加7px |
padding: 7px 9px 10px 11px; | 指padding上下左右内边距分别为7px、9px 10px、11px |
padding-方向 | 设置某一边的内边距 |
代码举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 300px;
font-size: 30px;
border: solid 1px black;
border-radius: 25px;
padding-left:100px;
}
</style>
<body>
<div>
Manchester
</div>
</body>
</html>
padding可在不设置任何方向时,则上下左右四个方向内边距一致,如需要单独设置某个方向的内边距则使用padding-方向,例如:padding-left:10px;表示左内边距为10px。
效果展示
3.3、margin外边界属性
margin是一个盒子的外边距,也是一个盒子和另一个盒子之间的区域。margin控制的是元素外部空出的空间。而相反,上面提到的padding 则是控制内部空出的空间。
margin和padding设置类似,但相比较于边框和内边距最大的不同是,它可以使一个盒子居中,只需要将margin值设为auto即可,但在设置margin:auto时必须设置盒子的宽度,否则将无效。
代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 300px;
font-size: 30px;
border: solid 1px black;
border-radius: 25px;
padding-left:100px;
margin: auto;
}
</style>
<body>
<div>
Manchester
</div>
</body>
</html>
效果展示
3.4、背景设置
背景设置 | 作用 |
---|---|
background-color | 背景颜色 |
background-image | 背景图像 |
background-position | 背景图像的位置(图像左上角的坐标)。取值可以是数值、预设值、百分比 |
background | 综合背景设置:背景色 url(“图像”) 平铺 定位 固定; |
background-repeat背景平铺属性
背景平铺 | 作用 |
---|---|
repeat | 沿着水平和垂直两个方向平铺(默认值) |
no-repeat | 不平铺(图像出现在左上角,只平铺一次) |
repeat-x | 水平方向平铺 |
repeat-y | 垂直方向平铺 |
代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#d1{
width: 200px;
height: 200px;
background-color: black
}
#d2{
width: 200px;
height: 200px;
background-image: url(./avatar.png);
border: solid 1px black;
}
#d3{
width: 200px;
height: 200px