0%

CSS基础快速入门

Box模型

基本概念

在HTML中,任何一个元素,比如按钮或二级标题等,都被理解为一个盒子。如下图所示:

img

几个概念说明下:

  • border(边框):盒子是有厚度的,盒子的厚度叫border
  • content(内容):盒子是用来装东西的,被装的东西叫content。我们说的宽度(width)和高度(height)也是指content的长度和宽度。
  • padding(内边距,填充物):想象下,用个Lock&Lock盒子,装了一块榴莲,榴莲与盒子的内侧间隙就叫padding
  • margin(外边距):这个盒子与其他盒子的间隙,叫margin

下面两幅图会帮助我们更好的理解:

boxing-model

box4

注意:本文刚说的宽度和高度,是按content的计算的。这个是W3C模型的定义,但在IE模型里,宽高是按border计算的。CSS3新增了一个属性box-sizing: content-box | border-box 用户可以依据自己的习惯,选择哪个模型。当然默认值是 content-box.

在线实验

  • 实验目标效果

image-20181225132750282

  • CSS样式设置
1
2
3
4
5
6
7
#d1 {
background-color: lightgrey;
width: 600px; /* content width */
border: 25px solid red; /* 边框 */
padding: 50px; /* 内边距 */
margin: 25px; /* 外边距 */
}
  • 完整的HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
<style>

#d1 {
background-color: lightgrey;
width: 600px;
border: 25px solid red;
padding: 50px;
margin: 25px;
}

#d2 {
background-color: lightgrey;
width: 300px;
border: 25px solid red;
padding: 25px;
margin: 25px;
}

body {
background-color: green;
}

</style>
</head>
<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially …….</p>

<div id="d1">This text is the actual ……</div>

<div id="d2">This text is the actual …….</div>

</body>
</html>

margin负值

image-20181225143413926

上图示例中,margin-top取值为-5px,则“测试元素”会遮挡“前快”

标题自动编号

CSS计数器和前插操作

HTML中有一级标题、二级标题、三级标题等。Word中也有,而且它可以自动生成目录,并在目录上注明1.2.3,表示第1章第2章第3段。比如:

image-20181225153025146

它的HTML原文是:

1
2
3
4
5
6
7
8
9
10
11
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>正文内容 Content </p>
<h3>三级标题</h3>
<p>正文内容 Content </p>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>正文内容 Content </p>
</body>

如何写样式能显示上面的“标题自动编号”呢?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<style type="text/css">

h1 {
counter-increment: countH1;
}

h2 {
counter-increment: countH2;
counter-reset: countH3;
}

h3 {
counter-increment: countH3;
}

h1::before {
content: counter(countH1);
}

h2::before {
content: counter(countH1)"."counter(countH2);
}

h3::before {
content: counter(countH1)"."counter(countH2)"."counter(countH3)"";
}

</style>

原来CSS里面支持计数器

  • counter-increment:表示计数器累加操作。counter-increment: countH1;表示对计数器变量countH1,进行累加操作。
  • counter(计数器变量名):表示计数器读取操作。counter(countH1);表示读取计数器变量countH1的数值。
  • counter-reset表示计数器重置操作(重新设置为0)。counter-reset: countH3;表示对计数器变量countH3的取值清零。
  • E::beforeE::after是伪选择器,表示元素E的前面或后面。比如:h2::before就表示在标签h2的前面。

更丰富的样式调整

  • 编号前后留间隙:数字左右有点拥挤感?用margin-leftmargin-right调整间隙。
1
2
3
4
5
h2::before {
content: counter(countH1)"."counter(countH2);
margin-left: 2em;
margin-right: 2em;
}
  • 编号后换行写标题名: 不想让数字编号与标题名在一行?用display: block换行。
1
2
3
4
5
6
h2::before {
content: counter(countH1)"."counter(countH2);
margin-left: 2em;
margin-right: 2em;
display: block; /* 标题编号换行 */
}

image-20181225155009898

目标样式:可能吧的排版

如何实现可能吧公众号里面的标题样式?

image-20181225160140084

这个标题样式有几个细节:

  1. 标题自带数字编号。
  2. 编号和标题名之间隔着一条彩带。
  3. 彩带有两种颜色:前面一点深色,后面浅色。

下面的代码用border-top只实现了一条彩带,而且不带两种颜色。

1
2
3
4
5
6
7
8
9
10
11
12
13
h2::before {
content: counter(countH2);
margin-left: 2em;
margin-right: 2em;
display: block; /* 标题编号换行 */
color: rgb(73, 200, 149); /* 标题编号上色 */
}

h2 {
margin-top: 20px; /* 上侧外边距 */
border-top: 10px solid rgb(73, 200, 149); /* 上侧边框,实现彩带 */
padding-top: 40px; /* 上侧内边距 */
}

image-20181225161100483

改进的情况:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
h2::before {
content: counter(countH2);
margin-left: 1em;
margin-right: 1em;
// display: block; /* 标题编号换行 */
color: rgb(73, 200, 149); /* 标题编号上色 */
}

h2 {
border-bottom: 10px solid rgb(73, 200, 149); /* 上侧边框,实现彩带 */
padding-bottom: 10px; /* 上侧内边距 */
}

h3::before {
content: counter(countH2)"."counter(countH3)"";
margin-left: 1em;
margin-right: 1em;
color: rgb(38, 198, 218); /* 标题编号上色 */
}

h3 {
border-bottom: 5px solid rgb(38, 198, 218); /* 上侧边框,实现彩带 */
padding-bottom: 5px; /* 上侧内边距 */
margin-left: 10px;
}

参考资料