freeCodeCamp刷题笔记（二）

了解 Alt 文本留空的情景

对于有标题的图片，依然需要添加 alt 文本，因为这样有助于搜索引擎记录图片内容。

使用标题显示内容的层次关系

语义化的意思是，标签名能准确地表达它所含内容的信息类型。

figure 标签

使用 label 元素提高表单的可访问性

label 标签的 for 属性与表单组件的name绑定。

使用fieldset 标签包裹整组单选按钮

  

    
Choose one of these three items:
    
    Choice One

    
    Choice Two

    
    Choice Three
  

给元素添加 accesskey 属性来让用户可以在链接之间快速导航

Important Button

媒体查询

它可以根据不同的视口大小调整内容的布局。

小于或等于：@media (max-width: 100px) { /* CSS Rules */ }

大于或等于：@media (min-height: 350px) { /* CSS Rules */ }

使图片自适应设备尺寸

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

针对高分辨率屏幕应使用视网膜图片

让图像正确出现在高分辨率显示器（例如 MacBook Pros “Revistina display”）上的最简单方式， 是定义它们的 width 和 height 值为原始值的一半。

flex-wrap

使用 flex-wrap 属性可以使项目换行展示。 这意味着多出来的子元素会被移到新的行或列。 换行发生的断点由子元素和容器的大小决定。

flex-shrink

flex-shrink 会在容器太小时对子元素作出调整。数值越大，则该元素与其他元素相比会被压缩得更厉害。

flex-grow

相应地，会在容器太大时对子元素作出调整。数值越大，则该元素与其他元素相比会被扩大得更厉害。

创建网格

display: grid;// 设置网格
grid-template-columns: 100px 100px 100px;// 设置列数
grid-template-rows:50px 50px 50px 50px;// 设置行数

还可以使用绝对单位（如 px）或相对单位（如 em）来定义行或列的大小。 下面的单位也可以使用：fr：设置列或行占剩余空间的比例，auto：设置列宽或行高自动等于它的内容的宽度或高度，%：将列或行调整为它的容器宽度或高度的百分比。这段代码添加了五个列。 第一列的宽与它的内容宽度相等；第二列宽 50px；第三列宽是它容器的 10%；最后两列，将剩余的宽度平均分成三份，第四列占两份，第五列占一份：

grid-template-columns: auto 50px 10% 2fr 1fr;

为网格添加间距：

grid-gap 属性是前两个挑战中出现的 grid-row-gap 和 grid-column-gap 的简写属性。

占据网格空间：

使用 grid-row 来占据多行，使用 grid-column 来占据多列，定义一个网格项开始和结束的水平线。语法：grid-column：1 / 3。

创建区域模板：

语法：grid-area: 1/1/2/4。示例中的网格项将占用第 1 条水平网格线（起始）和第 2 条水平网格线（终止）之间的行，及第 1 条垂直网格线（起始）和第 4 条垂直网格线（终止）之间的列。

使用 minmax 函数限制项目大小：

  display: grid;
  grid-template-columns: repeat(3,minmax(90px,1fr));
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;

使用 auto-fill 创建弹性布局：

grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));