HTML + CSS 连载 | 19 - 盒子模型的尺寸一、盒子属性在行内非替换元素中的特殊性 盒子模型的一些属性如 内
站长
· 阅读数 11
一、盒子属性在行内非替换元素中的特殊性
盒子模型的一些属性如 内容宽度 width、高度 height、上外边距 margin-top、和 下外边距 margin-bottom 对于行内非替换元素如 span\a\strong\i 来说是不生效的。
<!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>
.content {
background-color: #f00;
color: white;
/*以下这些属性对于行内非替换元素都不会生效*/
width: 300px;
height: 300px;
margin-top: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<span class="content">
我是span
</span>
</body>
</html>
在浏览器中打开 HTML 页面，可以看到设置的 width\height 等属性并没有生效。
但是 padding 是生效的；
.content {
background-color: #f00;
color: white;
/*以下这些属性对于行内非替换元素都不会生效*/
width: 300px;
height: 300px;
margin-top: 20px;
margin-bottom: 20px;
/*padding 是生效的*/
padding: 20px 20px;
}
打开 HTML 页面，效果如下：
对于行内非替换元素，padding 在上下是不占据空间的，也就说是在下面加一个元素，不会再 padding 外面出现，而是直接在内容下面出现，上面由于不占空间，所以直接被内容给占据了。
.content {
background-color: #f00;
color: white;
/*以下这些属性对于行内非替换元素都不会生效*/
width: 300px;
height: 300px;
margin-top: 20px;
margin-bottom: 20px;
/*padding 是生效的*/
/*特殊：上下会被撑起来，但是不会占据空间*/
padding: 20px 20px;
/*边框：border*/
border: 50px solid orange;
}
border 属性是生效的；
行内级元素往往和其他元素在一行内显示，如果针对某个一部分设置 maring 会导致一整段上下不协调，不美观，基于这些原因考虑，上下不生效。
二、盒子模型-盒子尺寸 box-sizing
box-sizing 是用来设置盒子模型中的宽高的行为，包含两个属性值，分别是：
content-box：padding、border 都布置在 width、height 外边border-box：padding、border 都布置在 width、height 里面
content-box 中元素实际占用的宽度和高度如下图：
border-box 中元素实际占用的宽度和高度如下图所示：
新建一个 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>
.box1 {
/*不包含padding、border*/
box-sizing: content-box;
width: 100px;
height: 100px;
background-color: #f00;
padding: 30px;
border: 10px solid orange;
}
.box2 {
/*包含padding、border*/
box-sizing: border-box;
width: 100px;
height: 100px;
background-color: #0f0;
padding: 30px;
border: 10px solid purple;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
在 HTML 页面中打开该 HTML 页面，效果如下：
三、案例-实现两个按钮
需求：实现下面两个按钮
这两个按钮都是可以点击的，可以通过两个 a 元素来实现，设置边框和圆角来实现。
第一步：搭建 HTML 框架
创建一个 HTML 页面，使用 a 元素来搭建这两个按钮，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<a href="">新人福利</a>
<a href="">Plus会员</a>
</div>
</body>
</html>
在浏览器中打开该 HTML 页面，效果如下：
第二步：对 a 元素的样式进行重置
a 元素本身包含了一些样式，我们需要通过新建 reset.css 文件，在该文件中重置 a 元素的样式，具体 CSS 代码如下：
/*filename: reset.css*/
/*a元素的样式重置*/
a {
text-decoration: none;
color: #333;
font-size: 12px;
}
在 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>
<link rel="stylesheet" href="./css/reset.css">
</head>
<body>
<div class="container">
<a href="">新人福利</a>
<a href="">Plus会员</a>
</div>
</body>
</html>
在浏览器中打开 HTML 页面，效果如下：
第三步：设置按钮的内容属性和宽高背景颜色
接下来设置第一个按钮的样式，先给第一个按钮添加一个 class 属性并修改元素属性为 inline-block 类型，这样就可以设置宽高了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/reset.css">
<style>
.gift {
/*修改元素属性为 inline-block，设置宽和高*/
display: inline-block;
width: 70px;
height: 25px;
/*设置背景颜色*/
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<a class="gift" href="">新人福利</a>
<a href="">Plus会员</a>
</div>
</body>
</html>
打开浏览器，页面效果如下：
接着我们还需要对 a 元素中字体的颜色进行设置，将字体颜色修改为白色，并设置水平和垂直居中，具体 CSS 代码如下：
.gift {
/*修改元素属性为 inline-block，设置宽和高*/
display: inline-block;
width: 70px;
height: 25px;
/*设置背景颜色*/
background-color: red;
/*设置字体颜色为白色*/
color: #fff;
/*设置水平和处置居中，垂直居中只需要line-height等于height即可，
水平居中可以设置 text-align 为 center*/
line-height: 25px;
text-align: center;
}
在浏览器中打开 HTML 页面，效果如下：
原样式中还带有一定的圆角，可以通过 border-radius 来设置；具体代码如下：
.gift {
/*修改元素属性为 inline-block，设置宽和高*/
display: inline-block;
width: 70px;
height: 25px;
/*设置背景颜色*/
background-color: red;
color: #fff;
/*设置水平和处置居中，垂直居中只需要line-height等于height即可，
水平居中可以设置 text-align 为 center*/
line-height: 25px;
text-align: center;
/*设置圆角*/
border-radius: 13px;
}
在浏览器中打开 HTML 页面，效果如下：
第四步：设置第二个按钮的样式
第二个按钮的样式和第一个按钮的样式基本一致，先给两个按钮都增加一个相同的 btn 属性，并将 CSS 选择器也改为 .btn。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/reset.css">
<style>
.btn {
/*修改元素属性为 inline-block，设置宽和高*/
display: inline-block;
width: 70px;
height: 25px;
/*设置背景颜色*/
background-color: red;
color: #fff;
/*设置水平和处置居中，垂直居中只需要line-height等于height即可，
水平居中可以设置 text-align 为 center*/
line-height: 25px;
text-align: center;
/*设置圆角*/
border-radius: 13px;
}
</style>
</head>
<body>
<div class="container">
<a class="btn gift" href="">新人福利</a>
<a class="btn member" href="">Plus会员</a>
</div>
</body>
</html>
在浏览器中打开 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>
<link rel="stylesheet" href="./css/reset.css">
<style>
.btn {
/*修改元素属性为 inline-block，设置宽和高*/
display: inline-block;
width: 70px;
height: 25px;
/*设置水平和处置居中，垂直居中只需要line-height等于height即可，
水平居中可以设置 text-align 为 center*/
line-height: 25px;
text-align: center;
/*设置圆角*/
border-radius: 13px;
}
.gift {
background-color: red;
color: #fff
}
.member {
background-color: #363634;
color: #e5d790;
}
</style>
</head>
<body>
<div class="container">
<a class="btn gift" href="">新人福利</a>
<a class="btn member" href="">Plus会员</a>
</div>
</body>
</html>
在浏览器中打开 HTML 页面，效果如下：
第五步：设置 hover 时的状态
当鼠标放到按钮上的时候，按钮的背景颜色会加深，设置 hover 时的状态可以通过伪类 .btn:hover 来实现，具体 CSS 代码如下：
.btn:hover {
background-color: #c81623;
color: #fff;
}
在浏览器中打开 HTML 页面，效果如下：
至此完全实现了需求中的样式。
转载自:https://juejin.cn/post/7294442519966203938