CSS不仅仅是选择背景颜色

让我们看一下以前的情况以及如何不做这些事情。

目录

浮动布局

🔝

您可能对此很熟悉：

.el {
    float: left; /*left, right*/
}
.after {
    clear: left; /*left, right, both*/
}

在过去，这可以用来对齐两个容器彼此相邻。由于父母对父母的影响，这比实际的方法更是一种黑客。
该元素从某种程度上撤出了流程，这意味着如果没有其他孩子可以给它一个高度，或者没有自己的高度，则父母会崩溃至0。 清晰的方法是告诉父母不要这样做的一种方式。通过在浮动元素之后给予元素。

这种布局的方式相当脆弱，并采用了flex和grid等新的布局方法； float迅速变得过时和过时。

- 使用flex或grid而不是float

但是float仍然具有其用途。当您希望文本遵循图像的曲线时，float是完成它的理想方法。

<div class="parent">
    <img src="your_img.png" />
    <p>lorem500</p>
    <p>lorem200</p>
    <p>lorem100</p>
</div>

首先，您希望图像成为第一个元素。如果是最后一个，它将无法使用。并给它float属性。

img {
    float: left;
    /*
    I curve the image by using border radius; 
    using the shape-outside property works as well
    */
    border-radius: 100%;
    widht: 150px;
    height: 150px;
}

，但是现在我们仍然存在崩溃的问题，只要文本足够长，这并不是很明显的。但是为什么抓住机会？
为了解决这个问题，我们可以再次使用清除方法。但是我更喜欢使用父母。这是一种更干净的方法。

.parent {
    display: flow-root;
}

a display: flow-root改变了父母的上下文，在这种情况下，即使内容是浮动的，它也会增长以适合内容。

使用float with display: flow-root曲线绕图像

填充纵横比

🔝

短一个；在我们拥有aspect-ratio属性之前，他们将使用另一种方法来实现此效果：

.element {
    /* 1:1 AR */
    width: 50px;
    height: 50px;
}

太好了！但没有响应，因为这是行不通的：

.element {
    width: 100%;
    height: 100%;
}

即使两个值都是100％，它们的大小也不相同。因为尺寸的百分比是指父元素的尺寸。

所以他们发现了这个黑客：

.element {
    padding-top: 100%; 
    /* 1:1 AR: 100% */
    /* 16:9 AR: 56.25% */
    /* 4: AR: 75% */
    /* 3:2 AR: 66.66% */
}

，如果他们的元素具有像文本这样的子元素，则无效。 “纵横比”将添加到元素的高度。
所以他们确实关注了：

.parent {
    position: relative;
    padding-top: 100%; 
}
.child {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

，但这仍然对内容没有响应。孩子的内容仍然可能溢出。

幸运的是那些日子结束了。

使用aspect-ratio属性与响应性

像素值

🔝

一个像素。一个小的正方形斑点，您的屏幕是由其建立的。但是在CSS-Land中，像素是单位测量值，是第一个，即使不是第一个。

如果您想要50 x 50像素的正方形，则使用以下内容：

.square {
    width: 50px;
    height: 50px;
}

没有什么开创性的。但是如今，我们拥有更多的单位，可以使用rem，em，ch，vh，vw，vw，dvh，dvh，dvw ...
每个单元都有自己的用例，他们自己的参考点；以及他们自己的特权应考虑的。
对于本节，我只会查看该列表的前三个。

Rem
：一个具有根字体大小作为参考点的单元；默认情况下16px。
（您可以通过更改根字体大小来更改此值；但是您不应该这样做。）

Em
：具有元素字体大小为参考点的单元。因此，如果您更改字体大小，则EM值也会更改。

Ch
：具有元素0字符的当前字体和字体大小的单元。因此，如果您更改字体大小，则CH值也会更改。

您什么时候应该使用？什么时候不？

REM

如果您使用像素，请改用REM。在我看来，这是一个很好的开始。因此，字体大小，宽度，高度...
rem单元比像素单元更容易访问。因为当用户希望使用较大的字体时，浏览器可以轻松增加默认值。如果您使用像素，则可能不会放大网站的字体，这是不良的UX。
是的，它可能会为某些常规使用的像素值创建一些怪异的值，这是因为我们的REM单元使用16，但是我发现自己在大多数情况下都在使用CSS自定义属性，因此并不重要。

Em

如果您想要一个用字体大小的单元以适合某个组件，请使用em。假设我们有一个带有font-size: 0.875rem的按钮，我们希望所有尺寸为0.4375REM的填充。
现在以后您可能想要相同的按钮，但更大，可以说font-size: 1.25rem；但是您想保持相同的比率，要“扩展”按钮。在这种情况下，您可能需要将填充值更改为0.5em。因此，现在您需要更新的唯一值是字体大小。

/* old */
.btn {
    font-size: 0.875rem; /*14px*/
    padding: 0.4375rem; /*7px*/
}
.btn[large] {
    font-size: 1.25rem; /*20px*/
    padding: 0.6125rem; /*10px*/
}
/* new */
.btn {
    font-size: 0.875rem;
    padding: 0.5em;
}
.btn[large] {
    font-size: 1.25rem;
}

它使代码更加清洁；如您所见，使用像0.4375REM这样的值有点混乱，可以肯定的是，如果您不知道该值在像素中转化为什么，它似乎是一个随机的值。
但是通过使用0.5em，我们现在只知道：一半的字体大小。
它可以很好地缩放按钮。
许多人也使用此技巧来扩展盒子阴影。

ch

ch单元使得将一段段落限制在一定数数量的角色上非常容易，哎呀，如果这是引入的确切原因，我不会感到惊讶。

由于所有角色都是相同的宽度，因此它最适合于单层字体。它也适用于其他字体，但在我看来，结果不太令人满意。

类似于em单元，ch链接到字体大小。但是它们并不相同，我注意到某些字体1​​EM和2CH的大小相似，但并非完全如此。这是由于em单元与字体高度相关联，我相信ch是字符宽度。他们的描述中的措辞有点模糊。

根据一些UX文章，45至90个字符的长度是确保可读性的段落的最佳长度，是的，这似乎有效。
我个人以70至75ch的最高宽度拍摄，该范围非常合适。
这个单元使在我们的网络设计中实现该理论变得非常容易。

文章我迅速扫描为那个角色范围：
Practical Typography: Line Length
Webflow: Ch unit

脱离父母

🔝

您可能会在这种情况下发现自己：

<main class="max-width">
    <article>
        <p>lorem500</p>
        <p>lorem200</p>
    </article>
    <div class="full-width">
        <article>
            <p>lorem500</p>
                <p>lorem200</p>
        </article>
    </div>
    <article>
        <p>lorem500</p>
        <p>lorem200</p>
    </article>
</main>

max-width将孩子的宽度限制为75REM； full-width希望跨越整个站点的宽度，例如100VW。

.max-width {
   max-width: 75rem;
   /*to center the container horizontally*/
   margin-inline: auto; 
}
.full-width {
   width: 100vw;
}

好吧，这无法正常工作；除非您的目标是混乱的溢出。因此，我经常看到以下要解决此问题：

（对于那些思考：width: 100%;这意味着与父母相同的宽度，这不是所需的效果，因为它不会爆发）

body {
   overflow: hidden;
}
.max-width {
   max-width: 75rem;
   margin-inline: auto;
   overflow: visible;
}
.full-width {
   position: relative;
   left: -50vw; /*pull out*/
   transform: translateX(-50%); /* push back in*/
   width: 100vw;
}

您可以通过在main宽度overflow: visible上删除滚动条来解决溢出问题，并使用overflow: hidden来抵消body上的溢出。
（是的，您更好地指定生产中的overflow-x: hidden）
然后，您将文章放在中心中，将其拉回一半的视口宽度，并将其向后推回一半的长度。

，如果不适合卷轴。
滚动条将通过IDK，Chrome上的20个像素，Safari上的30px和带有浮动滚动条的浏览器上的0px向后推进内容。
（不，我没有测量这些浏览器的滚动厚厚度，仅供参考，这些值是随机的）

由于没有关于滚动条及其宽度的标准，因此无法抵消这些偏移。甚至没有JavaScript，或者至少没有可靠。
这意味着对于最好的情况：内容与其他内容不符；或最坏的情况：溢出的问题完全使您的设计陷入困境。

那么，您如何突破？
我认为，您不这样做。我只能将最大宽度类放在真正需要它的块上。
但是，在这种情况下，您不能将类添加到除全宽课以外的这些元素中，您可以做这样的事情：

.max-width > :not(.full-width) {
   max-width: 75rem;
   margin-inline: auto;
}

虽然有一个捕获量，而那是.max-width的孩子本身不是集装箱的时候。

<main class="max-width">
    <!-- these children -->
    <h1>lorem5</h1>
    <p>lorem500</p>
    <!--  -->
    <article>
        <p>lorem500</p>
        <p>lorem200</p>
    </article>
    <div class="full-width">
        <article>
            <p>lorem500</p>
                <p>lorem200</p>
        </article>
    </div>
    <article>
        <p>lorem500</p>
        <p>lorem200</p>
    </article>
</main>

假设我希望所有p标签最多为60个字符。 max-width可以被覆盖为60ch，这不是问题。但是由于margin-inline: auto，文本将无法与其余内容保持一致。并删除这些元素的margin-inline将意味着p将粘在屏幕的边缘。您可以尝试硬编码margin-left，以便再次对齐，但我不建议这样做。

您必须确保正确包装HTML；由DIV或适当的语义正确元素。

<main class="max-width">
    <div>
        <h1>lorem5</h1>
        <p>lorem500</p>
    </div>
    <article>
        <p>lorem500</p>
        <p>lorem200</p>
    </article>
    <div class="full-width">
        <article>
            <p>lorem500</p>
                <p>lorem200</p>
        </article>
    </div>
    <article>
        <p>lorem500</p>
        <p>lorem200</p>
    </article>
</main>

可以考虑您喜欢哪种方法的东西。在需要它的元素上使用详细的类，或者仅在不同的项目中添加类。

不要使用width:100vw脱离容器父母；重新考虑如何构建您的HTML /如何使用CSS级< / strong>
如果可以的话，如果不能的话，请诅咒。