css 选择器

css 选择器

• 通用选择器

• 选择文档中所有元素

• 类型选择器（选择给定的节点名称） input

• 类选择器(选择给定类名的的所有元素) .index

• ID 选择器（选择与 id 属性匹配的元素，一个文档中，每个 ID 属性都是唯一的） #toc

• 属性选择器（按照给定的属性，选择所有匹配的元素） [autoplay] 选择所有具有 autoplay 属性的元素

组合选择器

• 选择器列表（将不同的选择器组合在一起） div， span 同时匹配 span 元素和 div 元素

• 后代组合器（选择前一个元素的后代节点） div span 匹配所有位于任意 div 之内的 span 元素

• 子代组合器 （选择前一个元素的直接子节点） ul > li 匹配直接嵌套在 ui 元素内的所有 li 元素

• 一般兄弟组合器（后一个节点在前一个节点后面的任意位置，并且共享同一个父节点） p ~ span 匹配同一父元素下，p 元素后面的所有 span 元素

• 紧邻兄弟组合器（后一个元素紧跟在前一个之后，并且共享同一个父节点） h2 + p 匹配所有紧邻在 h2 元素后的 p 元素

• 列组合器（组合器选择某个表格行的节点） col || td 匹配所有 col 作用与内的 td 元素

  伪选择器

• 伪类 a:visited 匹配所有曾被访问过的元素 常用的有： :nth-child() 获取子元素（-n + 3: 前三个子元素，2n， 2n -1 ） :nth-of-type() 匹配同类型中的第 n 个同级兄弟元素 :only-child() 匹配没有任何兄弟元素的元素 :first-child() 匹配第一个子元素 :last-child() 匹配最后一个元素

• 伪元素 p::first-line 匹配所有 p 元素的第一行 ::placeholder 表单元素的占位文本

writing-mode 学习

• 定义文本水平或垂直排列以及在块级元素中文本的行进方向 可以设置的值：
• inherit 继承
• initial
• unset
• horizontal-tb 内容从左到右水平，从上到下垂直（默认值）
• vertical-rl 内容从上到下垂直流动，从右到左水平流动
• vertical-lr 内容从上到下垂直流动，从左到右水平流动
• sideways-rl 内容从上到下垂直流动，所有字形也都向右侧设置（兼容性不好）
• sideways-lr 内容从上到下垂直流动，所有字形朝左侧设置（兼容性不好）

white-space

• 用来设置如何处理元素中的空白 可以设置的值
• normal 连续的空白符会被合并，换行符会被当作空白符来处理
• nowrap 连续的空白符会被合并，文本内的换行无效
• pre 连续的空白符会被保留，在遇到换行符或者
  元素时会换行
• pre-line 连续的空白符会被合并，遇到换行符或者
  时会换行
• break-spaces 与 pre-wrap 的行为相同，除了：
  1. 任何保留的空白序列总是占用空间，包括在行尾
  2. 每个保留的空格字符后都存在换行机会，包括空格字符之间
  3. 保留的空间占用空间不会挂起，从而影响盒子的固有尺寸

图片自适应

图片以 100% 的最大宽度适应其父容器的宽度，但图片不会拉伸得比原始宽度还宽

img {
  max-width: 100%;
  display: block;
  height: auto;
}

视窗单位

• vw：10v 即为视窗宽度的 10%；
• vh：3vh 为视窗高度的 3%；
• vmin：70vmin 即为视窗中较小尺寸的 70%(高度和宽度)；
• vmax: 100vmax 的即为视窗中较大尺寸的 100%(高度和宽度);

网格布局

网格容器

display: grid;
// 可设置的值
// fr： 设置行或列占剩余空间的一个比例
// auto：设置列宽或行高自动等于它的内容和宽度或高度
// %: 将列或行调整为它的容器宽度或高度的百分比
// 使用repeate（100， 50px）添加100行网格，每行高度为50px
// minmax 限制网格项的大小 如： 100px minmax(50px, 200px) 添加为两列， 第一列100px宽，第二列宽最小值是50px;最大值是200px
// repeate(auto-fill, minmax(60, 1fr))表示列的宽度会随容器大小改变，在可以插入一个 60px 宽的列之前，当前行的所有列会一直拉伸
grid-template-columns: 50px 50px; // 给网格布局中添加列数,属性值的个数表示网格的列数，而每个值表示对应列的宽度。
grid-template-rows: 50px; // 给网格布局中添加行数,属性值的个数表示网格的行数，而每个值表示对应列的高度。
grid-column-gap: 10px; // 设置列与列之间的间隙
grid-row-gap: 5px;// 设置行与行之间的间距
grid-gap： 10px；// grid-column-gap和grid-row-gap的缩写，两个值时第一个时行的间隙，第二个是列的
justify-items:  // 水平对齐所有项目
align-items： // 🔨对齐所有项目
grid-template-areas: // 划分区域模版
//

网格项

grid-column: 1 / 3; //定义网格项开始和结束的位置，进而控制每个网格项占用的列数。让网格项从左侧第一条线开始到第三条线结束，占用两列。
grid-row: 2/ 4; // 使网格项跨越多行。
// 可以取得值
// start: 内容在单元格左侧对齐；
// center：使内容在单元格居中对齐；
// end：使内容在单元格右侧对齐
justify-self: ; // 用来设置但单元项在框内的对齐方式
// 可设置名字
// 也可使用线号码： 起始水平线/起始垂直线/末尾水平线/终止垂直线
grid-area // 添加自定义名称将网格放入自定义区域