
网页开发基础-排版布局
网页开发基础–排版布局
一、伪类和伪元素
1.伪类的语法规则
1 |
|
第7到9行,定义了一个伪类。
- css选择器:伪类由两大部分构成,第一部分是普通的CSS选择器。
- 伪类名称:第二部分是伪类名称,用于说明伪类的功能。伪类名称以单英文冒号
:
作为前缀,紧跟在选择器后面,不能有空格。
2.状态伪类
在网页中,有些元素的状态是动态变化的,该元素会根据其状态呈现不同的样式。比如,未访问的链接为:带有下划线的蓝色文本;访问过的链接为:带有下划线的紫色文本。要达到这种效果,就需要使用状态伪类。
常见的状态伪类有五种,而链接就能设置其中的四种。
在网页中,链接通常会有四种不同的状态,分别是未访问状态、已访问状态、鼠标悬停状态、链接点击状态。
这时候,就需要:link、:visited、:hover
和 :active
四种状态伪类,依次为链接的四种状态,来设置不同的样式。
- :link伪类:可以设置「未访问状态」的样式。
- :visited伪类:可以设置「已访问状态」的样式。
- :hover伪类:可以设置「鼠标悬停状态」的样式。
- :active伪类:可以设置「点击时状态」的样式。
注意:这4种状态伪类对同一元素使用时,必须按照:link、:visited、:hover、:active
的顺序。否则,很大程度上会产生紊乱,造成效果失效!
- :focus伪类:它表示在元素获得焦点时,向元素添加特殊的样式。
1 | <style> |
3.结构伪类
在网页中,有时我们需要对特定位置的元素设置一些样式。比如,有若干个p元素,都没有class属性,那么我们如何给某个或某些p元素设置样式呢?这时候,就可以使用结构伪类来进行设置。
结构伪类的种类比较多,这些伪类中,:first-child
、:last-child
和:nth-child(n)
这三种最为常见。
first-child伪类:用于匹配第一个子元素。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* 匹配<body>下的第一个子元素<p> */
p:first-child {
background-color: skyblue;
}
</style>
</head>
<body>
<p>第一个段落元素p</p>
<p>第二个段落元素p</p>
<div>一个布局元素div</div>
<p>第三个段落元素p</p>
</body>
</html>第13行的元素p,是其父元素body的第一个子元素。第7-9行,使用
p:first-child
,匹配父元素body的第一个子元素p,并将其背景颜色设置为skyblue。:last-child伪类:用于匹配最后一个子元素。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* 匹配<body>下的最后一个子元素<p> */
p:last-child {
background-color: skyblue;
}
</style>
</head>
<body>
<p>第一个段落元素p</p>
<p>第二个段落元素p</p>
<div>一个布局元素div</div>
<p>第三个段落元素p</p>
</body>
</html>第16行的元素p,是其父元素body的最后一个子元素。
第7-9行,使用
p:last-child
,匹配父元素body的最后一个子元素p,并将其背景颜色设置为skyblue。nth-child(n)伪类:就十分灵活了,它可以用于匹配第n个子元素。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<head>
<meta charset="UTF-8">
<style>
/* 匹配<body>下的第二个子元素<p> */
p:nth-child(2) {
background-color: skyblue;
}
</style>
</head>
<body>
<p>第一个段落元素p</p>
<p>第二个段落元素p</p>
<div>一个布局元素div</div>
<p>第三个段落元素p</p>
</body>
</html>第14行的元素p,是其父元素body的第二个子元素。
第7-9行,使用
p:nth-child(2)
,匹配父元素body的第二个子元素p,并将其背景颜色设置成了skyblue。不仅如此,它还能一次性匹配多个子元素。因为,它的小括号
()
中的n
,不一定是具体的数字,也可以是一个an+b
形式的参数:an+b的形式 匹配元素的位置 n 1、2、3、… 2n 2、4、6、… 2n+1 1、3、5、… 例如:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* 匹配<body>下的,位于偶数位置的元素<p> */
p:nth-child(2n) {
background-color: skyblue;
}
</style>
</head>
<body>
<p>第一个段落元素p</p>
<p>第二个段落元素p</p>
<div>一个布局元素div</div>
<p>第三个段落元素p</p>
</body>
</html>第7-9行,使用
p:nth-child(2n)
,匹配父元素body的偶数位置的子元素p,并将其背景颜色设置成了skyblue。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<head>
<meta charset="UTF-8">
<style>
/* 匹配<body>下的,位于奇数位置的元素<p> */
p:nth-child(2n+1) {
background-color: skyblue;
}
</style>
</head>
<body>
<p>第一个段落元素p</p>
<p>第二个段落元素p</p>
<div>一个布局元素div</div>
<p>第三个段落元素p</p>
</body>
</html>第7-9行,使用
p:nth-child(2n+1)
,匹配父元素body的奇数位置的子元素p,并将其背景颜色设置成了skyblue。注意:子元素div虽然是父元素body第3个子元素,位于奇数位置,但是背景颜色并不会变化。因为这里的选择器是p,只针对元素p生效。
4.伪元素
有时候,我们需要在不更改HTML内容的情况下,来设置样式,从而实现内容与样式的分离。比如,在不改变<h3>元素内容的情况下,在它之前和之后插入一幅图片。为了实现这种效果,就需要用到伪元素。例如:
1 |
|
第7到9行,定义了一个伪元素。表示在h3
元素之前插入图片。
选择器:这里,选中的选择器是h3,表示要对h3元素进行操作。
伪元素名称:以双英文冒号
::
作为前缀,紧跟在选择器后面,不能有空格。示例中,::before
就是一个伪元素名称,紧跟在选择器h3
的后面,表示在h3
元素的前面插入内容。注意:在一些老的规则中,伪元素也可以使用单冒号
:
为了区分它和伪类,推荐使用最新的语法规范::
content属性:用于定义要插入的内容。
::before
伪元素中必须定义content
属性才会生效。没有需要插入的内容时可以设置为空,即content: "";
content属性值:表示插入的内容具体是什么。插入的内容可以是文本,图片等,甚至是空的内容。示例中,插入图片的规范为:
url(图片的链接)
,直接将图片链接放入url()
中,无需引号。插入文本内容:当
content
属性值为文本内容时,需要将文本内容放入一对英文引号" "
中。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* 使用::before伪元素,在h3元素之前插入文本内容,并设置为红色 */
h3::before {
content:"插入文本内容";
color: red;
}
</style>
</head>
<body>
<h3>一个h3标题</h3>
</body>
</html>与伪元素
::before
对应的,若需要在指定的元素的后面插入一些内容,就需要用到::after
伪元素。伪类和伪元素的区别:
书写区别:伪类使用
:
,伪元素使用::
概念区别:伪类,是根据已有元素的状态或结构,来添加样式;
伪元素,是创建了新元素,通过新元素的来添加样式。
本节总结:
二、盒子模型
所有HTML元素都会生成一个矩形框,它描述了一个元素在网页中所占的空间量。
盒子模型是CSS的一种思维模型,它认为网页中的每个元素都是一个矩形盒子且每个盒子被分为四个区域:
- 内容区(content)
- 内边距(padding)
- 边框(border)
- 外边距(margin)
例如:
1.内容区
内容区是盒子模型的中心,也是盒子模型必备的组成部分。
盒子的内容可以包含文字、图片等多种类型。浏览器在加载网页时,会将元素按照内容区分为替换元素与非替换元素。
替换元素:替换元素指的是HTML中的一些形如<img>、<input>等非文本元素。这些元素本身不包含任何内容,而是由浏览器根据元素的类型与属性为网页添加或替换内容。比如<img>标签,浏览器通过src属性找到图片,并将其替换到<img>标签处,在网页中显示。
非替换元素:与替换元素相反,非替换元素指的是如<p>、<div>、<span>等HTML中本身具有实际内容的元素。这些元素在创建时就被指定了要显示的内容,不需浏览器通过其他途径获取、替换已有的内容。
行内非替换元素:并非所有的元素都可以通过width与height设置大小。若一个元素同时满足下面的条件:
- 它是行内元素;
- 它是一个非替换元素;
则无法使用width或height设置内容区的大小,例如<span>、<a>等。即width属性、height属性对行内非替换元素无效。
2.边框
1 |
|
上述代码为div元素设置了一个蓝色的直线边框。其中:
第18行,设置边框粗细为4px;
第19行,将边框设置为直线;
第20行,将边框设置为蓝色。
边框粗细:border-width 用来设置盒子的边框粗细。它用来控制边框在盒子中占据的空间大小。border-width 可以设置为任意长度值。
边框样式:border-style 用来设置边框的样式类型,默认情况下,它的值为 none 表示没有边框。CSS 提供了多种边框样式,常用的有:
- 直线 solid
- 虚线 dashed
- 双直线 double
边框颜色:border-color 用来设置边框的颜色。与其他设置颜色的属性相同,它可以用RGB、16进制等多种方式表示颜色。
缩写:border属性是上述代码的缩写形式,可以同时设置边框的粗细、样式、颜色。它通常包含三个值,即border-width、border-style、border-color,格式为:
border: 粗细值 样式值 颜色值(每个值之间需要使用空格分割开)
注意:必须为每个边框设置border-style属性,否则边框将不会显示。
取消边框:有些HTML标签默认添加了边框样式,例如select、input等。若是想要取消这些元素的边框,可以将border的值设置为none。例如:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html lang="en">
<head>
<title>取消边框</title>
<style>
form {
width: 250px;
text-align: left;
}
input{
/* 取消input标签的默认边框 */
border: none;
}
</style>
</head>
<body>
<form action="#">
<input type="text" placeholder="输入你的手机号:" >
</form>
</body>
</html>圆角:在CSS中,可以使用 border-radius 属性设置圆角。该属性可以接受1~4个长度单位,其中最常用的是:
1个属性值:同时设置元素四个顶点圆角;
1
2/* 设置边框圆角 */
border-radius: 10px;4个属性值:分别设置每个顶点的圆角。
1
2/* 设置边框圆角 */
border-radius: 10px 20px 30px 60px;border-radius 左上 右上 右下 左下:
第1个属性值表示:左上顶点的半径;
第2个属性值表示:右上顶点的半径;
第3个属性值表示:右下顶点的半径;
第4个属性值表示:左下顶点的半径。
除此以外,border-radius 还提供了设置2个属性值与3个属性值的情况:
- 两个属性值:第一个属性代表左上与右下的圆角半径,第二个属性值代表右上与左下的圆角半径;
- 三个属性值:第一个属性值表示左上的半径; 第二个属性值表示左下与右上顶点的半径,第三个属性值表示右下顶点的半径。
本节总结:
3.内边距
内边距(padding)是指环绕在内容区外的空间,它位于内容区与边框之间。
1 |
|
padding
属性用来设置元素的内边距长度,元素在默认情况下没有内边距,其值为none
。
上下左右:padding属性可以接受1~4个属性值。当 padding 属性中仅包含一个值时,该长度会同时应用在上、下、左、右四个区域。padding属性的值可以设置为长度或百分比。
上下、左右:当 padding 属性中包含两个值时,第一个值代表上、下区域的长度,第二个值代表左、右区域的长度。
1
2
3
4div{
/*对内边距的设置*/
padding: 20px 60px;
}上、左右、下:当 padding 属性中包含三个值时:
- 第一个值代表顶部区域的长度;
- 第二个值代表左、右区域的长度;
- 第三个值代表底部区域的长度。
格式为:
padding: 上 左右 下;
1
2
3
4div{
/*对内边距的设置*/
padding: 5px 20px 100px;
}上、右、下、左:可以通过 padding 属性,分别为内边距的上、右、下、左四个方向设置长度,格式为:
1
2
3
4div{
/*对内边距的设置*/
padding:100px 90px 100px 50px;
}为了方便记忆,可以理解为从上边距开始,顺时针依次设置
3.1单独设置某一方向的内边距
也可以单独设置上、下、左、右四个区域中的某一个内边距长度,只需通过下面的属性:
- 上内边距
padding-top
- 下内边距
padding-bottom
- 左内边距
padding-left
- 右内边距
padding-right
3.2元素在浏览器显示的大小
默认情况下,CSS中的width或height属性只用来设置内容区的大小。
对于一个同时拥有内容区、内边距与边框的元素,它在浏览器中显示的大小尺寸是上述三者的长度之和:
CSS中的box-sizing
属性可以改变这一规则。
box-sizing
属性提供了两种计算尺寸的模式,content-box(默认)与border-box。
content-box: width、height属性的值仅决定盒子中内容区的大小
border-box: width、height属性同时控制边框、内边距、内容区的长度。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素的尺寸</title>
<style>
.two{
background-color: lightcoral;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid gray;
}
</style>
</head>
<body>
<div class="two">我是第二个盒子。</div>
</body>
</html>
4.外边距
1 | .box { |
上面的代码使用margin
属性为class=’box’的盒子设置外边距。
- 上下左右:与padding类似,margin 属性也可以设置1~4个属性值。当 margin 属性中仅包含一个值时,该长度会同时应用给上、下、左、右四个区域。
- 上下、左右:当 margin 属性中包含两个值时,第一值代表上、下区域的高度,第二个值代表左、右区域的高度。
- 上、左右、下:当 margin 属性中包含三个值时,第一值代表上区域的高度,第二个值代表左、右区域的高度,第三值代表下区域的高度。
- 上、右、下、左:当 margin 属性中包含四个值时,第一值代表上区域的高度,第二个值代表右区域的高度,第三值代表下区域的高度,第四个值代表左区域的高度。
4.1单独设置某一方向的外边距
与padding类似,你可以通过下面的属性单独设置某一方向的外边距:
- 上外边距
margin-top
- 下外边距
margin-bottom
- 左外边距
margin-left
- 右外边距
margin-right
4.2 自动设置外边距
除了长度与百分比以外,margin还提供了一个特殊的属性值auto
。
当margin中的某个值为auto时,浏览器会自动设置外边距的长度。
1 | .box { |
比如上边的代码,将左、右外边距的长度设定为auto,div元素得以居中显示。
4.3外边距合并
对于两个分别设有top、bottom外边距的元素,当它们处于垂直方向并且相邻显示时:
它们之间的距离并不是两者外边距相加的和,而是取它们之中较大的那个值。
注意,只有top、bottom位置的外边距会合并,left、right位置的外边距不会受到影响。
4.4将margin设置为负值
margin 的长度值还可以设置为负数。如图所示:
当margin-top 或者 margin-left 为负数时,元素自身会被拉向上方或左方;
当 margin-bottom 或者 margin-right 为负数时,位于该元素之后的其他元素会被拉向上方或左方。
4.5负margin的应用场景
负值的margin常用来实现图文对齐或多列布局。例如:
1 |
|
当第二个盒子的顶部外边距设置为负数时,它会移动到第一个盒子的位置。
4.6外边距与行内非替换元素
对于行内非替换元素来说,浏览器只会对左、右两个位置的外边距生效。当我们对行内文本元素设置上、下位置的外边距时,样式并不会生效,即浏览器不会按照指定的长度预留垂直空间。例如:
1 | span{ |
为span元素设置上、下外边距为999px;左、右外边距为10px
4.7内、外边距的差异
在盒子模型中,内边距与外边距虽然有着类似的代码结构,但在属性值的方向上存在着一些差异。
比较对象 | 外边距 | 内边距 |
---|---|---|
缩写形式 | margin | padding |
属性值 | 长度、百分比、auto | 长度、百分比 |
支持负数 | 支持 | 不支持 |
默认值 | auto | none |
三、项目实战:朋友圈风格网页
1 |
|
实现效果: