web前端开发CSS02(文本、字体、盒子模型、定位)

Insomeop

已于 2023-08-19 11:49:41 修改

阅读量653

点赞数

文章标签：前端 css 笔记

于 2023-07-27 21:47:07 首次发布

本文链接：https://blog.csdn.net/qq_68510847/article/details/131969210

版权

1、文本

1.1 文本颜色

CSS颜色表示方式：

color属性用于设置文本的颜色

1.英文颜色名称

目前所有浏览器都支持以下颜色名。141个颜色名称是在HTML和CSS颜色规范定义的（17标准颜色，再加124）。提示: 17标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色。
优点：方便快捷而且特定颜色比较准确。
缺点：表示颜色数量有限，不支持透明度的表示。

2.十六进制方式

颜色值由十六进制来表示红、绿、蓝（RGB）。每个颜色的最低值为 0(十六进制为 00)，最高值为 255(十六进制为 FF)。十六进制值的写法为 # 号后跟三个或六个十六进制字符。
三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。
优点：表示颜色种类多，使用较方便。
缺点：不支持透明颜色。

3.RGB方式：三原色配色方式

颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。三种颜色红，绿，蓝的组合从0到255，一共有1600万种不同颜色(256 x 256 x 256)。
优点：表示颜色种类多，使用较方便
缺点：不支持透明颜色。
每个参数 (red、green 以及 blue) 定义颜色的强度，可以是介于 0 与 255 之间的整数，或者是百分比值（从 0% 到 100%）。

1.2 文本对齐

text-align 属性用于设置文本的水平对齐方式。

属性值：

center:居中对齐
left:左对齐
right:右对齐
justify:拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中）

注意:text-aligh只对行内元素和行内块元素有效，想要块元素居中，可以设置margin:auto;

1.3 垂直对齐

vertical-align 属性设置元素的垂直对齐方式。

vertical-align常用属性值

baseline：默认值，元素放置在父元素的基线上。
top：把元素的顶端与行中最高元素的顶端对齐；
middle：把此元素放置在父元素的中部。
bottom：把元素的顶端与行中最低的元素的顶端对齐。

1.4 文本装饰

text-decoration 属性用于设置或删除文本装饰。

text-decoration: none通常用于从a链接上删除下划线：

属性值:

overline:上划线
line-through:删除线
underline:下划线

1.5 文本缩进

text-indent属性用于指定文本第一行的缩进。

实例：

<style>
    p{
        text-indent:2em;
    }
</style>

1.6 字符间距

letter-spacing 属性用于指定文本中字符之间的间距。

word-spacing 属性用于指定文本中单词之间的间距。

1.7 文本阴影

text-shadow 属性为文本添加阴影。

最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）：

<style>
p{
text-shadow:2px 2px;
}
</style>

效果：

在这里插入图片描述

也可以添加模糊效果和颜色：

<style>
       p{
            font-size: 40px;
            text-shadow: 2px 2px 5px orange;
        }
</style>

效果：

在这里插入图片描述

2、字体

2.1 font-family属性

在 CSS 中，我们使用 font-family 属性规定文本的字体。

font-family 属性应包含多个字体名称作为备用字体，以确保浏览器/操作系统之间的最大兼容性。字体名称应以逗号分隔。

如果字体名称不止一个单词，则必须用引号引起来，例如：“Times New Roman”。

2.2 字体样式

font-style 属性主要用于指定斜体文本。

此属性可设置很多属性值，常用的有两个：

normal - 文本正常显示
italic - 文本以斜体显示

2.3 字体粗细

font - weight属性指定字体的粗细。

可以设置数值，也可以设置属性值。

常用的有：

normal - 正常粗细

blod - 加粗

2.4 字体大小

font-size 属性设置文本的大小。

在网页设计中，能够管理文本大小很重要。但是，不应使用调整字体大小来使段落看起来像标题，或是使标题看起来像段落。请始终使用正确的 HTML 标签，例如<h1> - <h6>用于标题，而<p>仅用于段落。
font-size值可以是绝对或相对大小。

绝对尺寸：

将文本设置为指定大小
不允许用户在所有浏览器中更改文本大小(可访问性不佳)
当输出的物理尺寸已知时，绝对尺寸很有用

相对尺寸

设置相对于周围元素的大小
允许用户在浏览器中更改文本大小

如果未指定字体大小，则普通文本(如段落)的默认大小为16px(16px=1em)

绝对尺寸和相对尺寸的具体内容可以参考第二弹。

链接地址：web前端开发HTML01（HTML H5新特性、文档结构、标签分类、长度单位、超链接、路径、img）

3、盒子模型

3.1 盒子模型概述

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

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

在这里插入图片描述

对不同部分的说明：

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

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

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

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

！！！

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

3.2 宽度和高度

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

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

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

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

3.3 内边距

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

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

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

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

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

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

不允许负值。

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

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; 属性。这将导致元素保持其宽度。如果增加内边距，则可用的内容空间会减少。

3.4 外边距

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

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

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

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

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

允许负值。

同3.3内边距，可以指定多个外边距属性，用法一样。

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

⭐经典问题：外边距塌陷问题

链接地址：CSS中的外边距塌陷问题(外边距合并)及解决方法

3.5 边框

常用简写形式：

border:1px solid red;

分别代表边框粗细，边框样式，边框颜色。

单独指定一个方向的边框：

border-top、border-bottom、border-left、border-right

以上四个属性都可以设置：1px solid red;,也就是说我们可以给四条边设置不一样的粗细、样式及颜色。

边框样式：

border-style

属性值：dotted、dashed、solid、double、nono

分别表示：点状、虚线、实线、双实线、无边框

边框宽度：

border-width:5px;

4、定位

position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值：

static
relative
fixed
absolute
sticky

这个元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。

4.1 static(静态定位)

HTML 元素默认情况下的定位方式为 static（静态）。

静态定位的元素不受 top、bottom、left 和 right 属性的影响。

position: static;的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位。

4.2 relative(相对定位)

position: relative; 的元素相对于其正常位置进行定位。

设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。

4.3 fixed(固定定位)

position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。top、right、bottom 和 left 属性用于定位此元素。

固定定位的元素不会在页面中通常应放置的位置上留出空隙。

4.4 absolute(绝对定位)

position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位）。然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。

4.5 sticky(粘性定位)

position: sticky; 的元素根据用户的滚动位置进行定位。

粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止，然后将其“粘贴”在适当的位置。

4.6 子绝父相

常用到的组合，子元素绝对定位，父元素相对定位。

代码：

<style>
        .father{
            position: relative;
            top: 20px;
            left: 20px;
            width: 300px;
            height: 300px;
            border: 2px solid royalblue;
        }

        .son{
            position: absolute;
            top: 50px;
            left: 50px;
            width: 200px;
            height: 200px;
            border: 2px solid rosybrown;
        }
</style>
<body>
    <div class="father">
        父元素
        <div class="son">
            子元素
        </div>
    </div>
</body>