css

###############

在CSS样式中，关于文字的line-height属性和font-size属性：

从图中可以看出：
行高=行间距（两倍行半距）+文字大小

文字的大小由font-size属性决定，行高由line-height属性决定。

关于同时使用font-size与line-height属性的3种情况：

font-size与line-height的值相同时：此时的行间距为0

当font-size > line-height时：此时的行间距为负数，即不同行的文字之间会出现重叠现象

当font-size < line-height时：行间距 > 0

我们通常配置行高为1.5rem，这样行间距为半个文字大小

CSS 中的长度单位px, em, rem：

绝对长度单位
px（pixel 像素）：相对于显示设备而言的。对于低 dpi 设备，1px 是显示的一个设备像素(点)。对于打印机和高分辨率屏幕，1px 意味着多个设备像素。

特点：
- 使用时间长，而且比较直观。
相对长度单位

em：相对于当前元素的字体大小.目前浏览器默认的字体大小是 16px，em 是相对当前元素字体大小的倍数。例如，父级 div 字体设置了 20px, 在设置 2em 之后，该元素的字体大小就变成了 40px。中文段落的首行两格缩进，2em
rem: 相对于根元素的字体大小

特点：
- rem 和 em 作为相对长度单位。他们的大小都不是固定的，会根据参照物的大小而动态变化。
- rem 相对 em 来说，计算的参照物只有一个：根元素（<html>），这样大大减小了计算成本。
比如说下面两个例子。分别计算出 grandson 的字体大小。

rem 是相对 html 根元素字体大小的倍数。

而 html 默认的字体大小是 16px。所以，1rem 就相当于 16px。当然这个默认值也可以调整。

认识rem

当浏览器解析HTML文档时，创建了一个用来代表页面元素的集合，叫做DOM（文档对象模型，Document Object Model）。树状结构，每一个节点代表一个元素。<html>就是顶层节点（根节点），在下面的是它的子节点<head>和<body>，再往下就是它们的子节点，还有后代节点，如此类推。

根节点是文档里所有其他元素的祖先。它有一个特别的伪类（pseudo-class）选择器（:root），在样式表里可以用这个选择器表示。使用带类名的类型选择器html，或者直接用标签选择器，效果是一样的。

rem是根em（root em）的缩写。rem是和根元素关联的，不依赖当前元素。不管你在文档中的什么地方使用这个单位，1.2rem的计算值是相等的，等于1.2倍的根元素的字号大小。

<div class="father">
  father font size
  <div class="child">
    child font size
    <div class="grandson">grandson font size</div>
  </div>
</div>

用 em 的是1.2*1.2*1.2 = 1.728em = 1.728*16px算起来就比较麻烦。

.father {
  font-size: 1.2em;
}
.child {
  font-size: 1.2em;
}
.grandson {
  font-size: 1.2em;
}

用 rem 的就直接是是1.2rem = 1.2*16px，相对比较直观一些。

.father {
  font-size: 1.2rem;
}
.child {
  font-size: 1.2rem;
}
.grandson {
  font-size: 1.2rem;
}

适用场景

目前，我们浏览器现在的缩放都是通过 zoom 缩放，而不是改变文本大小。缩放的时候，用 px 的字体也会跟着一起缩放。所以做一些不需要支持移动端的网站可以用 px.
如果需求给的设计稿上就要求详细的 px 长度。比如说一些 boreder，image, icon。

em, rem：

它们是专门为可伸缩布局创建的。有些人喜欢把手机上的默认字体调大，这时候，浏览器的默认字体也会跟着变大。
方便适配各种分辨率的设备。

在CSS的世界里，这个答案通常是，看情况。rem只是你的工具箱中的其中一个。掌握CSS很重要的一点，就是学会分辨在什么场景下该使用什么工具。

对font-size使用rem
对border使用px
对其他的度量方式如padding、margin、border-radius等使用em。

然而在必要时，需要声明容器的宽度的话，我更喜欢使用百分比。

这样，字号大小就变得可预测，而当其他因素影响到元素的字号大小时，你也可以借助em去缩放元素的padding和margin。在border上使用像素是很合适的，尤其当你想要一根漂亮的线的时候。

以上就是我对不同属性使用不同单位的理想方案，不过我要再次声明，这些都是工具，在某些特定场景下，利用不同的工具可能取到更好的效果。
提示：在你不确定的时候字号给rem，border给px，其他单位值给em

有很多文章说1em是等于父元素的字体大小！这种说法实际上是不准确的。看以下例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            font-size: 16px;
        }
        div {
            font-size: 32px;
            padding-bottom: 2em;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <div></div>
</body>
</html>

<div>会被padding-bottom撑开，而padding-bottom的高度是64px，而不是32px！这证明了1em等于当前元素的字体大小（只有一个例外，下面会讲）。

字体大小和长度有什么关系呢？字体不是一个方块吗？实际上，字体大小被定义为M的宽度。

为什么有人误认为1em等于父元素的字体大小呢？这是因为如果在设置font-size的时候使用em单位，此时font-size还是默认值inherit，因此此时1em还等于父元素的字体大小。

这是在设置font-size时才有的特例！这个特例很好理解，毕竟我正在设置当前元素的字体大小呢！总不能使用此刻正在设置的字体大小作为单位吧！这不是悖论吗！

举个例子，如果这个悖论真的发生了，就会出现以下情况：水果店老板对你说：“你要多少斤橘子，我给你装起来”，而你却对老板说：“我要的数量是我最终要的数量的2倍”。

这个时候水果店老板估计就要崩溃了，他到底要给你装多少橘子呢？
为了避免这种事情发生，在你指定数量的时候如果使用相对单位，那这个单位必定不能相对于你此刻所指定的数量。你可以对老板这样说：“我要的数量是上一个顾客买的2倍”（类比于设置font-size: 2em）。

当你买完橘子以后，又可以对老板这样说：“我还要一些苹果，数量是刚才买的橘子的2倍”（类比于设置padding-bottom: 2em）。

除了这个特例以外，当设置其他css属性的时候，1em就等于当前元素的字体大小。

在上面的例子中，设置font-size的时候使用em，就能证明这个特例的存在：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            font-size: 16px;
        }
        div {
            font-size: 2em;  /* 仅仅这一行改变了！ */
            padding-bottom: 2em;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <div></div>
</body>
</html>

最终高度依然是64px，因为在设置font-size的时候，1em == 16px；在设置padding-bottom的时候，1em 就等于 32px 了。

如果在根元素上的font-size使用em会怎么样呢？它没有父元素了啊！没关系，对于inherited properties（其中就包括font-size），在根元素上的默认值为initial，

对于大部分浏览器，font-size的initial值就是16px。因此在设置根元素上的font-size时，它的值还是16px，1em也就等于16px。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html {
            /* 2*16px=32px */
            font-size: 2em;
        }
        div {
            /* 2*32px=64px */
            font-size: 2em;
            /* 2*64px=128px */
            padding-bottom: 2em;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <div></div>
</body>

<!DOCTYPE html>
<html>
<head>
<style>
div {  
  background-color: lightblue;
  margin: 40px 40px 40px 40px;
  border: 20px solid red;
  padding:30px;

}
</style>
</head>
<body>
<p>Using individual margin properties</p>
<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.
This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.
This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.
This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.
</div>
<p>Using individual margin properties</p>
</body>
</html>

box-sizing属性

box-sizing 属性是干什么用的？

box-sizing 属性是用来更改 CSS盒模型中的这种计算元素宽高的一种方法

2. box-sizing 的取值

content-box

是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

border-box

如果你将一个元素的 width 设为100px,那么这100px会包含它的 border 和 padding，内容区的实际宽度会是 width 减去 border + padding 的计算值。

3. 使用 box-sizing 属性

轮廓outline：是outline-width、outline-style、outline-color的缩写：

outline-width：规定边框的宽度。
outline-style：规定边框的样式。
outline-color：规定边框的颜色。
outline-offset：在轮廓和元素的边或边框之间添加空间。

外边距：

bootstrap中的margin：

边框border：四条边、width、style、color、border-collapse、border-spacing、border-radius、border-image：

bootstrap中配置边框颜色：

`bootstrap中配置边框宽度border-n：代表多少px：`

内边距padding：

元素宽度和高度：

box-sizing：
width和height：

文本相关：

标题类：h1,h2,h3,h4,h5,h6：

<div class="container">
  <h1>h1 Bootstrap 标题</h1>
  <h2>h2 Bootstrap 标题</h2>
  <h3>h3 Bootstrap 标题</h3>
  <h4>h4 Bootstrap 标题</h4>
  <h5>h5 Bootstrap 标题</h5>
  <h6>h6 Bootstrap 标题</h6>
</div>

段落：

<div class="container">
  <p class="h1">h1 Bootstrap 标题</p>
  <p class="h2">h2 Bootstrap 标题</p>
  <p class="h3">h3 Bootstrap 标题</p>
  <p class="h4">h4 Bootstrap 标题 </p>
  <p class="h5">h5 Bootstrap 标题</p>
  <p class="h6">h6 Bootstrap 标题</p>
</div>

颜色：

背景颜色：

背景：

文本颜色：

自定义属性：

要在什么时候定义这些属性？在使用之前吗？自定义属性遵从标准的作用域和级联规则，开发者按照平时使用的习惯来就可以了！

你可能希望将 --theme-color 设置为全局变量，处处可用。最简单的方法是使用 :root 伪元素：

:root {
  --theme-color: gray;
}

这样定义以后，无论是按钮、标题还是图片网格乃至整个文档，都可以使用 --theme-color 了。

但当你希望不同的模块使用不同的 --theme-color 值怎么办呢？和初始化自定义属性的步骤相同，只需要在模块的作用域中给属性重新赋值，新的颜色就会分模块生效，而不需要开发者一个个重置使用到 --theme-color 的属性。

section.about {
  --theme-color: darkblue;
}
section.contacts {
  --theme-color: darkred;
}
section.news {
  --theme-color: teal;
}

当然，你也可以定义复杂的选择器规则，应用特定的属性值：

section.news > .sidenote {
  --theme-color: gray;
}

<style>
:root {
  --main-bg-color: coral;
  --main-txt-color: blue;  
  --main-padding: 15px;  
}

#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);  
  padding: var(--main-padding);
}

#div2 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

#div3 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}
</style>

在本节中，我们还使用：

width（一个元素）。
background-color，元素内容和填充背后的颜色。
color，元素内容（通常是文本）的颜色。
text-shadow在元素内的文本上设置投影。
display设置元素的显示模式。（继续阅读以了解更多信息）

position：

（1）position: absolute;

也就是说绝对定位的元素再文档流中没有位置，它从文档流中脱离了出来，后面的元素会填充掉它原来的位置，就像是覆盖在页面上一样；

绝对定位的第二个特征在于定位位置相对于第一个具有定位属性（即 position 为 relative 或者 absolute）的祖先元素，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动，

当给绝对定位元素设置定位值时，该元素会延着DOM树向上查找，直到找到一个具有定位属性的祖先元素，则定位相对于该元素，在该例子中，由于其祖先元素都没有定位属性，则该绝对定位元素会相对于body体进行定位；如果给其父元素加上一个定位属性，则该绝对定位元素会相对于这个父元素；

绝对定位元素的第一个高级特性就是其具有自动伸缩的功能，当我们将 width 设置为 auto 的时候（或者不设置，默认为 auto ），绝对定位元素会根据其 left 和 right 自动伸缩其大小（ 注意：请牢记绝对定位元素的定位值是相对于第一个具有定位属性的祖先元素）；

https://blog.csdn.net/devilpace/article/details/51912382

############

posted @ 2022-09-08 14:01 igoodful 阅读(86) 评论(0) 编辑收藏举报

刷新页面返回顶部

igoodful

一枚数据库管理员（DBA），从事的数据库有：MySQL，PostgreSQL，Redis，MongoDB

css