初学者的 CSS 基础知识

作者

设置最小高度而不是高度

CSS Fundamentals for Beginners

大多数时候 – 如果您需要设置高度，请设置最小高度，因为当您设置特定高度时，当您使屏幕更窄（移动屏幕）时，东西可能会溢出。或者当内容增加的时候，有人多加了一段，就溢出来了。

默认情况下，元素的高度由元素内部的内容决定。如果添加更多内容，高度会增加。min-height 表示高度不能小于指定的高度，但是如果需要随着内容增长它会。

您仍然应该在图标/图像上设置高度以避免累积布局偏移。

CSS 关系

元素的大小受其包含块的影响。如果我们使用百分比来设置元素的宽度，那是它的包含块宽度的百分比。

如果我们80%在一个元素上设置宽度，这意味着80%它的父元素的总宽度。

当我们使用position: absolute;一个元素的包含块时，不再是它的 parent，而是它最近的祖先，它的位置不是静态的。如果没有非静态位置的祖先元素，则包含块是根 HTML 元素。

当使用position:fixed;该元素的包含块时，就是 viewport。

框大小：边框框

box-sizing: border-box;大小不是由内容决定的
（content-box之所以称为 CONTENT 框，是因为您只是设置了 CONTENT 的大小），而是由border-box（包括内容、填充和边框）决定的。

.box {
  box-sizing: border-box;
  width: 100px;
  padding: 20px;
  border: 10px solid red;
  margin: 10px;
}

在上面的示例中，100px宽度包括边框、填充
和内容。它被称为 border-box 因为在你的边界内 – 你有你的边界，你的填充和你的内容。

边距不包括在 中，border-box因为边距是元素之间的空间，而不是元素本身。

为所有元素和伪元素设置box-sizingto ：border-box

*,
*::before,
*::after {
  box-sizing: border-box;
}

CSS继承

任何相关的东西typography都会从孩子那里继承 –
font-size, font-family, text-decoration, text-align, color。这就是为什么我们经常将font-familyor放在我们的
元素上——因为它们是从该元素的子元素继承而来的。您可以通过在子元素上显式指定它们来覆盖继承的属性。font-sizefont-weighthtml

浏览器默认设置的任何内容（即links, headings）都不会继承。

与布局相关的任何内容都不会被继承 – margin, padding, height, width,
position不会被孩子继承。

默认情况下button，由于浏览器的默认设置，input元素不会继承任何内容。您可以明确指定您希望这些元素继承：selecttextarea

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

CSS 级联

级联看：

  1. 起源和重要性。使用important是不受欢迎和草率的。
  2. 特异性。最好保持特异性不变，避免使用#ids或
    .class .innerClass选择器。因为当我们提高特异性时，如果我们将来需要覆盖它，它可能会很烦人。如果我们消除特殊性并只使用顺风风格的类，我们需要考虑的事情就会更少。如果我们没有特异性战争，我们!important无论如何都不必使用。
  3. 出现顺序 – 在.css文件中
.red {
  background: red;
}

.blue {
  background: blue;
}

<div class="blue red">Hi there</div>

类在类字符串中的排列顺序并不重要，重要的是它们在.css文件中出现的顺序。所以.blue定义将覆盖那个.red。

如果一个选择器出现在另一个相等的选择器之后，它往往会获胜。

箱中箱箱中箱

在网站中，一切都是盒子中的盒子，盒子中的盒子。一切都参与格式化上下文。

  • 块格式化上下文
  • 内联格式化上下文
  • 灵活格式化上下文
  • 网格格式化上下文

元素在特定格式化上下文中的行为方式有规则。

尝试创建和管理布局时，了解这些规则非常重要。

  1. 内联格式化上下文元素，如span, strong, em, links。

    • 它们是内联的，它们彼此相邻，而不是一个在另一个之上，这与块级元素相反。
    • 使用内联元素 – 水平填充、边框和边距应用于元素并将文本向左和向右推开
    • 不会应用元素上方和下方的边距
    • 将应用垂直填充和边框，但可能会与上方和下方的内容重叠，因为内联框不会被填充和边框推开。

  2. 块级元素要么包含其他块级元素，要么包含内联元素，但不能同时包含两者。如果我们有 aparagraph或 a div，它们可以包含其他块级元素，也可以包含内联元素，但不能同时包含两者。

    <div>
  lorem ipsum
  <p>dolor sit</p>
  amet consectur
</div>

浏览器获取内联文本并在后台将其转换为块级元素。它将文本包裹在顶部和底部，文本成为块级元素。

在 Block formatting context 中，你的内容是一层一层地布局的，即使有空间，它们也不会试图挤进去。即使你将宽度设置为30%on 2 divs，它们也不会试图挤进去在同一条线上并排放置，它们仍将一个放在另一个之上。

  • 在块上下文中，边距崩溃。如果你有 2 个 div 一个在彼此之上，并且两者的边距都是100px，则边距将折叠并且它只会是100pxdiv 之间的边距。较大的利润率获胜并保留下来，较小的利润率崩溃了。
  • 仅垂直边距折叠，水平边距不折叠

如果您创建一个新的块格式化上下文，您可以阻止边距折叠。创建块格式化上下文的方法包括：

  1. 使用floats

  2. 位置和absolute_fixedinline-block

  3. overflow除了visible

  4. 使用列

  5. flex和grid物品

  6. 展示flow-root

  7. 当您display: flex;建立flex格式化上下文时。它类似于块格式化上下文，但有一些不同之处：

    • 浮动和清除不起作用
    • 它的边距不会随着它的孩子的边距而崩溃
    • 孩子们是弹性布局的一部分，而不是盒子布局。他们一个接一个地走，而不是一个在另一个上面。在 flex 布局中，它取决于flex-direction.
    • 孩子们（弹性项目），建立自己的格式化上下文

Z-索引

Z-index 影响 HTML 元素相互堆叠的方式。当我们使用定位时，我们开始将元素相互叠加。更高
z-index的元素将堆栈中的元素推得更高，而更低的数字则更低。Z-index 不能孤立使用，需要其他属性才能使用z-index。

当没有z-index应用和定位时，HTML 元素按照它们在 HTML 中出现的顺序堆叠。最后一个元素获胜并呈现在另一个元素之上。如果元素具有相等的z-index.

当我们将（默认）以外的位置应用于static元素时，它将呈现在顶部。

我们只能应用于z-index定位元素（不是静态的）。Z-index 对有位置的元素没有影响static。Z-index 也可以是负值 – 即-10.

默认z-index值为0。

我们也可以使用z-indexonflex和griditems。

当我们创建一个新的堆叠上下文时，我们将其z-index与堆叠上下文中的那组元素隔离开来。因此，当我们创建一个新的堆栈上下文时
z-index，它不再与根 HTML 元素相关，而是与那个单独的堆栈上下文相关。

Flex-Basis、Flex-Shrink、Flex-Grow

您可以影响 flexboxflex使用以下属性更新项目大小的方式：

  • 弹性基础
  • 伸缩收缩
  • 灵活成长

弹性基础

flex-basis 是flex item 在main axis上的大小。flex 中的主轴根据属性而变化。所以
改变方向是有效的。如果你有一个
专栏 –会看而不是。默认情况下是并查看 width 属性。flex-directionflex-directionflex-basisflex-directionflex-basisheightwidthflex-directionrowflex-basis

的默认flex-basis值为auto。如果我们不在flex-basisflex-item 上设置 a ，默认行为是设置flex-basisto auto，所以它会查看元素的内容。弹性项目中的内容决定了弹性项目显示的大小。如果内容相同且
flex-direction设置为row，则宽度相等。如果其中一个 flex 项目的内容较少 – flexbox 假定它不需要那么多空间。

如果设置flex-basis为100%，则所有弹性项目都变得相等。我们说所有的 flex 项目都应该是父级大小的 100%，但它们不能都是父级大小的 100%，这就是默认值flex-shrink出现的地方——元素按相同的比例缩小，现在它们是相同的大小。

收缩

Flex-shrink – 允许/禁止弹性项目随着视口变窄而收缩。flex-shrink的默认值为1。如果flex-shrink是一个大于 0 的数字——如果没有足够的空间，弹性项目允许收缩（变得更小）比它的实际大小。没有flex-shrinkandflex-wrap元素会从侧面溢出，flexbox 布局也不会很有用。

因此，对于flex-basis，我们说的是弹性项目应该有多大，并且是
flex-shrink正整数——我们允许弹性项目小于它。如果flex-shrink设置为0，则表示flex-item不允许收缩。

灵活成长

Flex-grow 定义弹性项目在必要时增长的能力。它规定了项目应该占用弹性容器内的可用空间量。

如果所有弹性项目都flex-grow设置为1，则弹性容器内的每个子项都将设置为相同大小。如果您要给其中一个孩子一个
flex-grow，2那么该弹性项目将占用两倍的空间。

的默认值为flex-grow，0这意味着默认情况下不允许元素增长。

–

发表评论