伪类伪元素超链接盒子模型

最新推荐文章于 2023-02-26 19:24:24 发布

懒羊羊羊羊羊️

最新推荐文章于 2023-02-26 19:24:24 发布

阅读量284

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_73692074/article/details/128422058

版权

day03【stage03】

1 章节目录

1.1 目标

伪类
伪元素
超链接
盒子模型

1.2 重点

超链接
盒子模型

1.3 难点

盒子模型

2 伪类

伪类用于定义元素的特殊状态。

例如，它可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

伪类的语法：

selector:pseudo-class {
  property: value;
}

实例：

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

伪类名称对字母大小写不敏感。

伪类选择器可以和类选择器结合使用：

a.highlight:hover {
  color: #ffdd00;
}

在 <div> 元素上使用 :hover 伪类：

div:hover {
  background-color: blue;
}

简单的工具提示悬停：

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

:first-child 伪类匹配其父元素中的第一个子元素。

如果父元素的第一个子元素不是寻找的元素的话，就会不起作用。

实例：

ul li:first-child {
  color: blue;
}

:last-child 伪类可匹配其父元素中的最后一个子元素。

3 伪元素

伪元素用于设置元素指定部分的样式。

例如，它可用于：

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

伪元素的语法：

selector::pseudo-element {
  property: value;
}

::before 伪元素可用于在元素内容之前插入一些内容。

h1::before {
	content: url('img/smiley.png');
	vertical-align: middle;
	margin-right: 12px;
}

::after 伪元素可用于在元素内容之后插入一些内容。

4 超链接

通过 CSS，可以用不同的方式设置链接的样式。

文本链接文本链接链接按钮链接按钮

4.1 设置链接样式

链接可以使用任何 CSS 属性（例如 color、font-family、background 等）来设置样式。

实例：

a {
  color: hotpink;
}

此外，可以根据链接处于什么状态来设置链接的不同样式。

四种链接状态分别是：

a:link - 正常的，未访问的链接
a:visited - 用户访问过的链接
a:hover - 用户将鼠标悬停在链接上时
a:active - 链接被点击时

实例：

/* 未被访问的链接 */
a:link {
  color: red;
}

/* 已被访问的链接 */
a:visited {
  color: green;
}

/* 将鼠标悬停在链接上 */
a:hover {
  color: hotpink;
}

/* 被选择的链接 */
a:active {
  color: blue;
}

如果为多个链接状态设置样式，请遵循如下顺序规则：

a:hover 必须 a:link 和 a:visited 之后
a:active 必须在 a:hover 之后

4.2 文本装饰

text-decoration 属性主要用于从链接中删除下划线。

实例：

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

4.3 背景色

background-color 属性可用于指定链接的背景色。

实例：

a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
}

4.4 链接按钮

我们可以组合多个 CSS 属性，将链接显示为框/按钮。

实例：

a {
	color: white;
	padding: 14px 25px;
	text-decoration: none;
	display: inline-block;
	background-color: #f44336;
}
a:link,
a:visited {
	background-color: #f44336;
}
a:hover,
a:active {
	background-color: red;
}

效果（文档中无法显示鼠标悬停效果）：

这是一个链接

5 盒模型

所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。

CSS 盒模型实质上是一个包围每个 HTML 元素的盒子。它包括：外边距、边框、内边距以及实际的内容。下图展示了盒模型：

对不同部分的说明：

内容 - 盒的内容，其中显示文本和图像。
内边距 - 清除内容周围的区域。内边距是透明的，可以呈现元素的背景。
边框 - 围绕内边距和内容的边框。
外边距 - 清除边界外的区域。外边距是透明的，不会遮挡其后的任何元素。

盒模型允许我们在元素周围添加边框，并定义元素之间的空间。

背景应用于由内容和内边距、边框组成的区域。

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

* {
  margin: 0;
  padding: 0;
}

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

假设盒的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：

在这里插入图片描述

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。

外边距可以是负值，而且在很多情况下都要使用负值的外边距。

实例：

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

效果：

5.1 宽度和高度

height 和 width 属性用于设置元素的高度和宽度。

height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。

height 和 width 属性可设置如下值：

auto - 浏览器计算高度和宽度（默认）
length - 以 px、cm 等定义高度/宽度
% - 以包含块的百分比定义高度/宽度

实例1：

div.percent {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

效果：

此元素的高度为 200 像素，宽度为 50％

实例2：

div.fixed {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

效果：

此元素的高度为 100 像素，宽度为 500 像素。

请记住，height 和 width 属性不包括内边距、边框或外边距！它们设置的是元素的内边距、边框和外边距内的区域的高度/宽度！

5.2 内边距

padding 属性用于在任何定义的边界内的元素内容周围生成空间。

通过 CSS，你可以完全控制内边距（填充）。有一些属性可以为元素的每一侧（上、右、下和左侧）设置内边距。

CSS 拥有用于为元素的每一侧指定内边距的属性：

padding-top
padding-right
padding-bottom
padding-left

所有内边距属性都可以设置以下值：

length - 以 px、pt、cm 等单位指定内边距
% - 指定以包含元素宽度的百分比计的内边距

不允许负值。

实例：

div.padding {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 10px;
  padding-left: 80px;
  color: white;
  background-color: red;
}

效果：

内容

为了缩减代码，可以在一个属性中指定多个内边距属性。

padding: 25px 50px 75px 100px; ：上内边距是 25px；右内边距是 50px；下内边距是75px；左内边距是100px。
padding: 25px 50px 75px; ：上内边距是 25px；右和左内边距是 50px；下内边距是75px。
padding: 25px 50px; ：上和下内边距是 25px；右和左内边距是 50px。
padding: 25px; ：四个内边距都是 25px。

如果元素拥有指定的宽度，则添加到该元素的内边距会添加到元素的总宽度中。

若要将宽度保持为设定值，无论填充量如何，那么你可以使用 box-sizing: border-box; 属性。这将导致元素保持其宽度。如果增加内边距，则可用的内容空间会减少。

实例：

div.border-box {
  width: 300px;
  padding: 50px;
  box-sizing: border-box;
  color: white;
  background-color: red;
}

效果：

填充量不影响容器宽度填充量不影响容器宽度填充量不影响容器宽度

5.3 边框

border 属性允许你指定元素边框的样式、宽度和颜色。

我的所有边都有边框。

我有一条红色的下边框。

我有圆角边框。

我有一条蓝色的左边框。

5.3.1 边框类型

border-style 属性指定要显示的边框类型。

实例：

p.dotted {
	border-style: dotted;
}
p.dashed {
	border-style: dashed;
}
p.solid {
	border-style: solid;
}
p.double {
	border-style: double;
}
p.none {
	border-style: none;
}
p.mix {
	border-style: dotted dashed solid double;
}

效果：

点状边框

虚线边框

实线边框

双线边框

无边框

混合边框

5.3.2 边框宽度

border-width 属性指定四个边框的宽度。

可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick 。

实例：

p.px5 {
  border-style: solid;
  border-width: 5px;
}

p.medium {
  border-style: solid;
  border-width: medium;
}

p.px2 {
  border-style: dotted;
  border-width: 2px;
} 

p.thick {
  border-style: dotted;
  border-width: thick;
}

5px 宽度

medium 宽度

2px 宽度

thick 宽度

border-width 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）：

p.one {
  border-style: solid;
  border-width: 5px 20px; /* 上边框和下边框为 5px，其他边为 20px */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 上边框和下边框为 20px，其他边为 5px */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 上边框 25px，右边框 10px，下边框 4px，左边框 35px */
}

5.3.3 边框颜色

border-color 属性用于设置四个边框的颜色。

可以通过以下方式设置颜色：

name - 指定颜色名，比如 “red”
HEX - 指定十六进制值，比如 “#ff0000”
RGB - 指定 RGB 值，比如 “rgb(255,0,0)”
HSL - 指定 HSL 值，比如 “hsl(0, 100%, 50%)”
transparent

实例：

p.one {
  border-style: solid;
  border-color: red;
}

p.two {
  border-style: solid;
  border-color: green;
}

p.three {
  border-style: dotted;
  border-color: blue;
}

效果：

红色实线边框

绿色实线边框

蓝色点状边框

border-color 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）：

p.four {
  border-style: solid;
  border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}

5.4 外边距

margin 属性用于在任何定义的边框之外，为元素周围创建空间。

CSS 拥有用于为元素的每一侧指定外边距的属性：

margin-top
margin-right
margin-bottom
margin-left

所有外边距属性都可以设置以下值：

auto - 浏览器来计算外边距
length - 以 px、pt、cm 等单位指定外边距
% - 指定以包含元素宽度的百分比计的外边距

允许负值。

实例：

p {
  color: white;
  background-color: red;
  display: inline-block;
  margin-top: 100px;
  margin-bottom: 50px;
  margin-right: 150px;
  margin-left: 80px;
}

效果：

内容

为了缩减代码，可以在一个属性中指定多个外边距属性。

margin: 25px 50px 75px 100px; ：上外边距是 25px；右外边距是 50px；下外边距是 75px；左外边距是 100px。
margin: 25px 50px 75px; ：上外边距是 25px；右和左外边距是 50px；下外边距是 75px。
margin: 25px 50px; ：上和下外边距是25px；右和左外边距是 50px。
margin: 25px; ：四个外边距都是 25px。

你可以将 margin 属性设置为 auto，以使元素在其容器中水平居中。

然后，该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。

实例：

div.content {
  width: 300px;
  margin: auto;
  border: 1px solid red;
  text-align: center;
}

效果：

水平居中

5.5 外边距合并

外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

$(img-lWbNK8cN-1671787447784)(MD文档.assets\margin_collapsing_example_2.gif)]$

外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CY7msmJX-1671787447787)(MD文档.assets\margin_collapsing.gif)]$

只有普通文档流中块元素的垂直外边距才会发生外边距合并。行内元素、浮动元素或绝对定位之间的外边距不会合并。

实例：

#div1 {
  width: 100px;
  height: 100px;
  margin-top: 30px;
  margin-bottom: 30px;
  background-color: red;
}

#div2 {
  width: 100px;
  height: 100px;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: blue;
}