【一章更比百章强!最全、简单、易懂前端】——04补充选择器+盒模型知识下-爱代码爱编程
目录索引
盒模型:
在css中,我们标签可以看作是一个矩形盒子。
一个网页的生成就是由多个盒子搭建而成的。
请添加图片描述
像这种就是属于盒子。
-如何查看盒模型的效果?
F12检查
将样式拉到最下面就可以看到盒模型的示意图
![](https://img-blog.csdnimg.cn/27fd67923f4a4c92bff0a9a2527cfcd8.pg
点一下这个按钮,然后再选择你需要查看的盒子
我们再来看看标准的盒模型图:
什么是盒模型?
英文全称: css model
盒模型组成:
- 内容区域:content
- 内边距:padding
- 边框:border
- 外边距:margin
听上去很懵?没关系,我们来打个比喻:
把一个盒模型想象成装玩偶的快递盒子
1. 内容区域——玩偶
2. 内边距——玩偶和快递盒子之间,有一个填充物(泡沫)来保护
3. 边框——装玩偶的快递盒子
4. 外边距——快递盒与快递盒之间的距离
盒模型的属性运用
-内容:
内容 content height+width 由高度和宽度来决定的
<!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>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
/* 加背景色是为了方便你看清 */
}
</style>
</head>
<body>
<div>
我是盒子
</div>
</body>
</html>
呈现效果:
特别注意: 情况下,盒子不设置高宽,默认的大小是由里面的文字内容撑开的,由于span包裹标签大小是依据文字内容撑开的,不同于块级元素默认是占据一行的,所以如果span标签里面不写内容,即使写了高宽也不会出现盒子。写文字的话,依据文字大小来。
<!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>
<style>
span{
width: 200px;
height: 200px;
background-color: pink;
/* 加背景色是为了方便你看清 */
}
</style>
</head>
<body>
<span>
我是盒子
</span>
</body>
</html>
呈现效果:
- 谈谈块级元素:
- div
- ul
- li
- p
- h1~h6
块级元素不写宽度的话,那就和浏览器宽度一样百分百一行
- 行内标签:
- span
- a
- b
- i
- em
- strong等
这些标签暂时不支持自定义高宽,高宽是由文字内容来决定的
-取值:
像素值:1px等于1像素,像素不允许设置负数
-内边距:
– 一个值的写法:
会变大,上下各长
例子: padding 10px;
<!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>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
/* 加背景色是为了方便你看清 */
padding:10px;
/* 加个内边距属性 四个方向都是10像素*/
/* 宽度:220 width=200+上下内边距各10=220 高度同理*/
}
</style>
</head>
<body>
<div>
我是盒子
</div>
</body>
</html>
呈现效果:
– 两个值的写法:
例子: padding:10px 20px;
注意: 先设置的是上下为10px,左右设置都是20px
<!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>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
/* 加背景色是为了方便你看清 */
padding:10px 20px;
}
</style>
</head>
<body>
<div>
我是盒子
</div>
</body>
</html>
呈现效果:
– 三个值写法:
例子: padding:10px 20px 30px;
注意: 第一个表示上10px,第二个表示左右20px,第三个表示下30px
– 四个值写法:
例子: padding: 10px 20px 30px 40px;
注意: 上10px,右20px,下30px,左40px
按照顺时针方向转。
– 单个值写法:
例子:
- 顶部内边距——padding-top: 20px;
- 底部内边距——padding-bottom:30px;
- 左边内边距——padding-left:25px;
- 右边内边距——padding-right:35px;
- 四个方向边距全加——padding:20px;