CSS in Depth 【第一部分】

katsu 发布于 2025-02-17 114 次阅读

Tcss

测试用图床

阿里SVG图标

font awesome 可以先去 copy 他的 cdn 链接

搜索 [ 或者 延伸 获得拓展链接

CSS in Depth 的笔记

延伸和补充

排版中，布局的关键是分清元素性质，把他们包裹在合适的容器里，然后对容器进行布局调整。其中单行适合 flex，多行列适合 grid

有关背景

background-attachment 可以固定背景 相对于视口

其他 html tag

aspect-ratio 35 / 1

absolute top 0

<figure>
  <img src="/media/cc0-images/elephant-660-480.jpg" alt="Elephant at sunset" />
  <figcaption>An elephant at sunset</figcaption>
</figure>

问题

FOUT（Flash of Unstyled Text）

书里也有提到，可以等到字体加载完成以后再更新

css

块级与行级

(1) 块级元素的渲染规则

  • 块级元素会参与 普通文档流（Normal Flow） 的布局计算：
    1. 宽度计算：
      • 默认宽度填满父容器，可以通过 width 显式设置。
    2. 高度计算：
      • 默认高度由内容撑开，可以通过 height 显式设置。
    3. 布局特性：
      • 垂直排列，每个块级元素都会在下一行开始。

(2) 行内元素的渲染规则

  • 行内元素参与 行内排版（Inline Formatting Context）：
    1. 宽度和高度：
      • 宽度由内容决定，高度由所在行的 line-height 和字体大小决定。
    2. 布局特性：
      • 在同一行内排列，遇到父容器宽度不足时，会换行。
  • 布局实现：
    • 行内元素的布局更加复杂，浏览器需要计算行框（Line Box）的高度和宽度，并将多个行内元素排入同一个行框中。

无障碍

无障碍只读不显示的时候 不能直接 hidden 会把元素从无障碍树里面删掉

span[class~="sr-only"] {

border: 0;

clip: rect(1px, 1px, 1px, 1px);

clip-path: inset(50%);

height: 1px;

width: 1px;

overflow: hidden;

white-space: nowrap;

position: absolute;

padding: 0;

margin: -1px;
}

对齐居中

普通盒子里的文字
text-align 水平
vertical-align垂直上定位（不是在盒子里居中）
flex 盒子里align-items 或者是的line-height等于父亲盒子的height

普通盒子里 只有一个元素（或者盒子）

margin 0 auto

flexbox 里的元素

justify-content 水平

align-items 垂直

滚动

scroll-behavior

行高

理解 inline-height 时钟翻页

backface-visibility 对卡片翻转类比较有用

宽高

#image {

max-width: 100%;

max-height: 100%;

height: auto;

width: 20%;

}

限定死宽度 式的宽度固定不变（不随窗口变）

table tbody td {

width: 100vw;

min-width: 4rem;

max-width: 4rem;

}

查询 media 和选择器

![[Pasted image 20241126160310.png]]

@media

,
/>
:first-of-type

属性选择器[attr=""]

The key difference between tr[class="total"] and tr.total is that the first will select tr elements where the only class is total. The second will select tr elements where the class includes total. 只有total 和包含 total 的关系

形状

典中典用 border 画三角形

inset管上下左右

第 0 章 html

语义化标签

语义化标签有利于 seo 帮助更好阅读网页代码 可以不加但是加了更好 而且很重要

- header 
- nav
- article
- section
- figure 和 figcaption
- form
- label
- footer
- main
- aside

伪元素

::before

::after

这俩是针对选到的那个东西来说之前之后 可以拿来加图标什么的 或者清除浮动

伪元素的好处是纯粹装饰不可交互 如果叠在 div 上面那么 div 本身也不可交互了（被盖住了）

display

display 属性是 CSS 中最重要的属性之一，用于设置一个元素的显示类型。它决定了元素的布局方式以及它如何影响其子元素和周围的元素。以下是 display 属性的主要值及其区别：

1. display: block

  • 行为：块级元素，占据一行的全部宽度。
  • 典型元素：<div>, <p>, <h1> 等。
  • 特点：
    • 宽度默认填满父容器。
    • 可以设置宽度、高度、内边距、外边距。
    • 会换行，独占一行。
<div style="display: block;">This is a block element.</div>

2. display: inline

  • 行为：内联元素，仅占据其内容的宽度。
  • 典型元素：<span>, <a>, <em> 等。
  • 特点：
    • 宽度和高度无法直接设置。
    • 内边距和外边距仅影响左右两侧，不影响上下。
    • 不会换行，多个内联元素会在同一行显示。
<span style="display: inline;">This is an inline element.</span>

3. display: inline-block

  • 行为：内联块级元素，结合了 inline 和 block 的特性。
  • 典型用途：用于需要内联布局但又需要设置宽度和高度的元素。
  • 特点：
    • 可以设置宽度、高度、内边距、外边距。
    • 不会换行，可以在同一行内显示多个内联块级元素。
    • 宽度和高度由内容决定，可以通过 CSS 控制。
<span style="display: inline-block; width: 100px; height: 50px;">This is an inline-block element.</span>

4. display: flex

  • 行为：使元素成为弹性容器，其子元素变为弹性项目。
  • 典型用途：用于实现复杂的布局，特别是响应式设计。
  • 特点：
    • 父元素使用 display: flex，子元素自动成为弹性项目。
    • 子元素的排列方式、对齐方式和大小可以灵活调整。
    • 提供强大的布局能力，如横向和纵向居中对齐、等分布局等。
<div style="display: flex; justify-content: center; align-items: center;">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
</div>

5. display: grid

  • 行为：使元素成为网格容器，其子元素变为网格项目。
  • 典型用途：用于实现二维布局，特别是需要行和列的精确控制的设计。
  • 特点：
    • 父元素使用 display: grid，子元素自动成为网格项目。
    • 可以精确控制行和列的大小、位置和对齐方式。
    • 提供复杂的布局能力，如网格区域、行列间距等。
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
  <div>Grid item 1</div>
  <div>Grid item 2</div>
  <div>Grid item 3</div>
</div>

6. display: none

  • 行为：隐藏元素及其子元素，不占据任何空间。
  • 特点：
    • 元素被完全从文档流中移除，不占据空间。
    • 与 visibility: hidden 不同，visibility: hidden 仅隐藏元素，但仍占据空间。
<div style="display: none;">This element is hidden.</div>

7. 其他常见值

  • display: inline-flex：内联弹性容器，其子元素为弹性项目，类似于 inline-block 和 flex 的结合。
  • display: inline-grid：内联网格容器，其子元素为网格项目，类似于 inline-block 和 grid 的结合。
  • display: table：使元素成为表格容器，类似于 HTML <table> 元素。
  • display: table-row：使元素成为表格行，类似于 HTML <tr> 元素。
  • display: table-cell：使元素成为表格单元格，类似于 HTML <td> 元素。

总结

  • 块级元素（block）：占据一行的全部宽度，宽高可设置。
  • 内联元素（inline）：占据内容宽度，宽高不可直接设置。
  • 内联块级元素（inline-block）：占据内容宽度，宽高可设置，不换行。
  • 弹性容器（flex）：用于创建复杂布局，特别是响应式设计。
  • 网格容器（grid）：用于创建二维布局，行列精确控制。
  • 隐藏元素（none）：完全隐藏元素及其子元素，不占据空间。

通过理解和应用这些 display 属性值，您可以灵活地设计和调整网页布局，满足不同的设计需求。

第一部分 基础

第一章 层叠优先级和继承

第一章到第三章是基础回顾

零碎 层叠

css里面默认margin 和 padding有值 为了左对齐之类的可以设置padding-left之类的为0

flex布局会盖掉inline-block 导致它们不会自动空开行间块级的距离

用户代理样式

link LoVe、HAte 顺序口诀 visited active

继承

文本字体 list列表属性等会继承

被覆盖的值会被划掉 顶部覆盖底部

特殊值：inherit initial-默认值

inherit 是继承父元素

不要混淆initial和auto

简写会默默把没提到的默认值覆盖掉前面的继承属性等

笛卡尔网格先左右再上下 比如background-position

gCVAen

第二章 相对单位

为什么相对

后期绑定，不知道窗口大小

响应式设计！

绝对常用px

1in=2.54cm=96px

相对于什么？

字号

根据相对计算出绝对值

em rem

1em等于当前元素的字号

字号变量em代表的值会变的

那字号自己呢

fontsize 1.2em怎么办呢

根据继承的字号决定

综上即使声明的em相同 也有可能有不同计算值

字号嵌套的时候会缩小、扩大

选中子元素 嵌套用1em可以保持

rem

rem永远相对于root根部所以是稳定的

始终使用相对单位设置字号 帮助更多人

rem设置字号 px设置边框 em设置其他

网页默认值是16px root

响应式面板

@media(mid-width: 800px){}

放大 缩小组件：

设置父元素字体大小以后覆盖它

视口的相对单位

媒体查询@media

视口：浏览器不含不纯粹的东西 下面那个框里的 vh vw vmin vmax

vh 表示百分之多少的视口高度 vw 则是宽度

把 div 长宽定成 vmin 可以固定显示 xx 大小比例的形状

vw 可以定义字号

rem和视口等是css3（2011） css现在是一个活的标准

使用 calc定义字号

cal (+-x/ 必须两边空白)

font-size:calc(0.5em + 1vw);

行高

行高一般不带单位 不然继承的时候出问题 因为带单位继承计算值

给 body 声明无单位行高 然后别的微调

自定义属性 css 变量

:root{
--main-font: Arial;
}
// 声明变量
p{  
font-family: var(--main-font, sans-serif);

}
// 使用变量，但是如果var非法直接变默认值

: root 里定义 别的容器里重新赋值

js 可以改变 css 变量

关注 can I use 查看是否兼容能用

第三章 盒模型

为了实现元素布局有很多办法 各种布局方法比较复杂 应该先精通一种 文档流和盒模型是他们的基础 决定网页元素大小和位置

设置为块级元素可以填满容器的宽度

元素宽度问题

同时解决了宽度和高度实际上就解决了两列问题

这部分练习里面用到了浮动布局 float

%的宽度设置规定相对于那一行；盒模型里默认设置宽高只设置了内容，还要再加上边距和边框（content-box）

注意要避免像是26%之类的魔术数值来达成目的

可以使用calc() 比如由于padding多了3em那么calc(30% - 3em) 但是还有更好的办法哦

调整盒模型

==将 box-sizing 修改为 border-box== 此时宽高设置整个盒子包含上内边距和边框 这时候动 padding 会挤压 content 大小 不含外边距

常用做法：
~~~css
*,
::before,
::after {
  box-sizing: border-box;
}
~~~
如果使用了第三方组件，要在第三方组件配置里清除上面的设定
更稳健写法，主动将这一段加入每个要写的网站 然后我们就知道自己写的全是这种盒模型
~~~css
:root {
  box-sizing: border-box;

}

*,
::before,
::after {
  box-sizing: inherit;
}
.third-party-component {
  box-sizing: content-box; // 这样的话第三方里面的继承content-box

}
~~~

给列之间加上空隙

使用 calc 减去 em 单位的宽度换成 margin

.sidebar {
    box-sizing: border-box;
    float: left;
    width: calc(30% - 1.5em);
    /* 明确相对关系 这个宽度为什么要这么写 因为要做空隙 空隙从原来的30%里扣过来 */
    margin-left: 1.5em;
    padding: 1.5em;
    background-color: #fff;
    border-radius: .5em;
}

元素高度问题

避免限定一个具体的高度，因为文档流是根据有限宽度和无限高度设计的

控制溢出 overflow

auto hidden visible scroll

百分比高度

  1. 视口 vh

  2. 等高列

比如使用等高列对齐两个盒子 高度始终保持一致 并且让他们自己就决定高度

实现1 css 表格

.container {
  display: table;
  width: 100%; // table默认不填满所以手动设置

}

.main {
  display: table-cell;
  width: 70%;
  background-color: #fff;
  border-radius: .5em;

}

.sidebar {
  display: table-cell;
  width: 30%;
  margin-left: 1.5em; // tablecell下不生效*
  padding: 1.5em;
  background-color: #fff;
  border-radius: .5em;

}

border-spacing 可以定义单元格间距 但是同时对外边距也有效 所以新在外面套一层 div 用负外边距吸收抵消

.wapper{
  margin-left: -1.5em;
  margin-right: -1.5em;

}

.container {
  display: table;
  width: 100%; // table默认不填满所以手动设置
  border-spacing: 1.5em 0;

}

.main {
  display: table-cell;
  width: 70%;
  background-color: #fff;
  border-radius: .5em;

}

.sidebar {
  display: table-cell;
  width: 30%;

  padding: 1.5em;
  background-color: #fff;
  border-radius: .5em;

}
负外边距

负外边距左上和右下不一样

左上拉元素 右下把别的元素拉过来

不建议经常用

外边距折叠

头部和或者底部外边距 也就是上下

相邻或者不相邻，只要有重叠：上下两个元素外边距算出来有重叠的花不会两个一股脑显示 而是以较大的外边距为准折叠一个小的 只剩一个外边距 抽象

==也就是说可以给任何元素加上外边距==

此外，外边距有可能在容器外折叠 为了防止这种情况可以加内边距；更多方法

  • 内边距或者边框
  • overflow auto
  • 布局 浮动元素 flex 等
  • table-cell
    相邻元素边距问题
.button-link + .button-link {
  margin-top: 1.5em;

}

使用+选择器不选中开头的元素

但是一旦 html 内容有变动 css 要重写或者多写 不太现实

另一种方法：猫头鹰选择器* + *

长得确实有一点点像猫头鹰

选中父容器下的所有非第一个元素

body * + *{} 选中的就是 body 容器里 所有非首元素；层层传下去

猫头鹰选择器需要权衡，而且不适合半路加 要么一开始就加

实现2 flex 布局 我感觉比 table 好

flex 默认产生等高元素 也不需要外面套一层和负外边距

.container {
  display: flex;  // 变成弹性容器

}

.main {      // 里面的元素不用指定display或者float属性
  width: 70%;
  background-color: #fff;
  border-radius: 0.5em;

}

.sidebar {
  width: 30%;
  padding: 1.5em;
  margin-left: 1.5em;
  background-color: #fff;
  border-radius: .5em;

}

盒子的 min-height max-height 有时候有用 （撑开）

垂直居中

vertical-align 只会影响行内元素（比如文字和图片同行对齐）和 table cell 疑似有点鸡肋了

最简单的办法 容器上下内边距相等

how to center

![[Pasted image 20240602181036.png]]