盒子的概念
我的的HTML的网页布局是使用一种矩形的方式来作为基础,先设立一段矩形,然后往这个矩形中添加我们所需的内容,从而达到我们对网页的布局。
边框的构成
在后面的内容中,我们会对边框的大小,内边距,外边距大小的控制进行讲解
我们来用<div></div>来查看一下
我们可以发现<div></div>所占用的边框和<html></html>占有的边框不同,<html></html>包含了<div></div>的边框,这种边框在CSS里面称为盒子
盒子的控制
我们可以通过<style></style>来控制盒子的大小,位置,风格
一般我们的盒子我们是看不到的,但是我们可以通过修改参数来使盒子更加直观
边框大小的控制
border-style
border-style用于定义盒子的边框,一般默认是不会显示的。
使用格式
border-style:solid;
border-style常用参数有以下几种
模式 | 作用 |
soild | 边框实线 |
dotted | 边框点线 |
dashed | 边框虚线 |
groose | 边框细线 |
这里的border-style还有其它的参数,我们就不一 一演示了
border-color
border-color用于定义边框的颜色,一般默认是黑色。
使用格式
border-color: red;
border-color参数没有什么特别的,就是颜色,会懂得每个颜色的英文名是什么就可以直接用了
border-width
border-width用于定义边框的粗细。单位是px,一般默认单位是2px
使用格式
border-width: 2px;
border
border用于对边框设置的简写,有三个参数,书写必须有序
使用格式
border: 2px black solid;
这里我们缩短篇幅只演示一下border的用法代码
演示代码
<!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>
.One{
border: 2px black solid;
}
</style>
</head>
<body>
<div class="One">
!!!Hello,World!!!
!!!Hello,World!!!
</div>
</body>
</html>
演示结果
内边距大小的控制
内边距就是文本内容和边框在边框内部间隔的距离
使用格式
padding: 2px;
padding-left: 2px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
其中下面四个格式是用来修改某个方向的内边框距,padding是修改所有方向的内边框距离
浏览器提供了用于我们观察盒子数据的调试
在这张图中,我们可以看到内边距全都为'-'也就是零 ,而这里的本文和边框的距离是零
当我们将所有内边框距离修改为10px时,演示结果如下
这里的内边距被修改成了10,但是修改的代价时边框变大了,文本是不会变小的
CSS盒子类型content-box和border-box
改变盒子类型格式
box-sizing: border-box;
content-box:保持文本部分的盒子大小不变,更改内边距的大小时,通过改变整体边框的大小来给改变内边距提供空间
border-box:保持整体边框大小不变,通过改变本文边框的大小来给改变内边框大小提供条件
注意,使用border-box模式时,必须设置好边框的大小,否则还是content-box模式
外边距大小控制
外边距大小控制使用到的是margin,控制单位为px
使用格式
margin:2px
这里我们就来展示一下margin的使用示例就可以了吧
这里当我们将margin的参数调大时,文本边框的间距也会跟着调大,而且它们互相之前还会发生嵌套
嵌套块元素垂直外边距塌陷
当我们定义全局外边距时,是非常容易有这种嵌套发生的,往往这种情况容易出现错误
演示代码
<!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>
.One{
height: 200px;
width: 200px;
background-color: aqua;
margin: 40px;
}
.two{
height: 50px;
width: 50px;
background-color: black;
margin: 20px;
}
</style>
</head>
<body>
<div class="One"><div class="two"></div>
</div>
</body>
</html>
演示结果
这里面的黑色区域并没有和外面的蓝色区域保持外边距为20px 这就是塌陷的情况
对于两个嵌套的父子块元素,当他们都有上外边距时,父块元素会选择它们两其中一个最大的值作为它的上外边距,而子块元素的上外边距为0
遇到这种问题有两种解决方式
1.删除字块元素的上外边距,父块元素设置边框大小
2.删除子块元素的上外边距,父块元素设置内边距大小
演示代码
<!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>
.One{
height: 180px;
width: 180px;
background-color: aqua;
border: 20px aqua solid;
}
.two{
height: 50px;
width: 50px;
background-color: black;
}
</style>
</head>
<body>
<div class="One"><div class="two"></div>
</div>
</body>
</html>
演示结果
演示代码
<!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>
.One{
height: 200px;
width: 200px;
background-color: aqua;
padding: 20px;
}
.two{
height: 50px;
width: 50px;
background-color: black;
}
</style>
</head>
<body>
<div class="One"><div class="two"></div>
</div>
</body>
</html>
演示结果
盒子相关属性
border-radius
border-radius可以修改盒子的弧度,
使用格式
border-radius: 10%;
有两种参数,分别是数值型和百分数型
百分数型范围0%~50%
数值型范围为0~120
演示代码
<!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>
.One{
height: 200px;
width: 200px;
border-radius: 50%;
background-color: aqua;
padding: 20px;
display: inline-block;
}
</style>
</head>
<body>
<div class="One"></div>
</body>
</html>
演示结果
border-shadow
border-shadow可以用来给盒子添加阴影,并且修改阴影的属性
使用格式
box-shadow:h-shadow v-shadow blur spread color/insert
- h-shadow:阴影的横向位置
- v-shadow:阴影的纵向位置
- blur:阴影的模糊程度
- spread:阴影的扩散范围
- color:阴影的颜色
- inset:向内阴影
演示代码
<!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>
.One{
height: 200px;
width: 200px;
border-radius: 50%;
background-color: aqua;
padding: 20px;
display: inline-block;
box-shadow: 20px 10px 3px -1px red;
}
</style>
</head>
<body>
<div class="One"></div>
</body>
</html>
演示结果
内部阴影演示代码
<!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>
.One{
height: 200px;
width: 200px;
border-radius: 50%;
background-color: aqua;
padding: 20px;
display: inline-block;
box-shadow: 20px 10px 10px -10px red inset;
}
</style>
</head>
<body>
<div class="One"></div>
</body>
</html>
演示结果