freecodecamp--Responsive Web Design300道题目练习

Lynn98
414 阅读12分钟

复习一下html,css的知识，以下是一些做题过程中备忘的知识点

HTML

a标签：

  1. 可以被其他标签包裹，对特定的内容操作
  2. 页面内跳转：href="#id" 跳转到对应id的标签处
  3. dead link：href="#"
  4. 包裹img标签

self -closing tag

  1. img
  2. input
  3. hr

表单

  1. <form>标签的action属性:submit data to a server
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
    <input type="text" placeholder="cat photo URL" >
    <button type="submit">Submit</button>
</form>
  1. required 表单元素必填设置
  2. input type="radio"单选：
  • label的for属性绑定input的id,radio的name保持一致组成一个radio group
  • value是提交给后台的值 ：indoor-outdoor=indoor
<label for="indoor">
  <input id="indoor" value="indoor" type="radio" name="indoor-outdoor">indoor</input>
</label>
<label for="outdoor">
  <input id="outdoor" value="indoor" type="radio" name="indoor-outdoor">outdoor</input>
</label>
  1. input type="checkbox"多选：
  • label包裹每个input，for属性绑定input的id
  • name保持一致 为radio和checkbox设置默认选项：input中加入checked

CSS

  1. 图片变成圆形：border-radius:50%;
  2. id选择器优点： 可以使用id设置单个元素的样式，可以使用它们通过JavaScript选择和修改特定元素。
  3. margin:给margin一个负数的值，对应元素会变大
  4. margin和padding用顺时针表示法可以同时对每个边做设定
  5. 相对单位和绝对单位 绝对长度单位近似于屏幕上的实际测量值，但是根据屏幕的分辨率会有一些差异。
    相对单位：相对于其他的长度 待补充
  • em: 取决于当前元素使用的字体大小。 如果未设置，此字体大小从父元素继承。
  • rem:基于页面根元素的字体大小，即html元素的字体大小来决定。例如，根元素的字体大小 16px，10rem 将等同于 160px，即 10 x 16 = 160。html 元素的字体大小虽然是直接确定 rem 值，但字体大小可能首先来自浏览器设置。
  • rem和em的区别于使用：www.jianshu.com/p/da3844ced…

  1. body的样式会被所有元素继承

  2. 特定度：
    !important>inline style>id>class>element selector
    !important使用场景：
    在许多情况下，您将使用CSS库。这些可能会意外覆盖您自己的CSS。因此，当您绝对需要确保某个元素具有特定的CSS时，可以使用！important

  3. 颜色：

  • hex:十六进制 #000000 每两位一次代表R,G,B，可以简写为三位#000
  • rgb:rgb(0,0,0) 每位有16*16选择
  • rgba:rgba(0,0,0,0) 第四位是透明度，0~1
  • hsl:css3引入 hsl(色相，饱和度，亮度) 线性渐变： background: linear-gradient(gradient_direction, color 1, color 2,……)
    注意是在background属性上而不是background-color
  1. CSS变量
  • 定义变量skin:gray; 一般定义在:root element
  • 选择器中样式引用：background-color:var(skin)
  • 备用颜色：var(--penguin-skin, black)
  • 为了提高浏览器的兼容性，使用变量时最好在前面加上通用的样式：
background: red;
background: var(--red-color);
  • 可以在后续样式设置中进行覆盖

Applied Visual Design

主要涉及到布局、

text样式

  1. text-align：text-align: justify;使除了最后一行的文本和外层边框贴近
  2. text-transform:统一页面中的英文文本

image.png 标签：

  1. strong标签包裹文本相当于 font-weight:bold;
  2. u标签：下划线 相当于 text-decoration:underline;
  3. em标签：斜体 相当于 font-style: italic;
  4. s标签：删除线 text-decoration: line-through; 以上几个标签直接用于包裹对应文本，避免包裹其他标签

其他样式

  1. hr tag：水平线
  2. box-shadow:
  • offset-x (how far to push the shadow horizontally from the element),
  • offset-y (how far to push the shadow vertically from the element),
  • blur-radius,
  • spread-radius
  • color, in that order.
  1. opacity: 给定的值将应用于整个元素，无论是具有一定透明度的图像，还是一块文本的前景色和背景色。

布局

position:
文档的默认布局/默认文档流：块级元素占新行，行内元素和其它内容并排

  • relative:以当前位置为参考，可设置上下左右
  • absolute:以最近的设置过position:relative的父级位置为参考，从文档流中删除
  • fixed: 类似于absolute, 相对于浏览器视窗锁定
  • absolute和fixed区别：固定位置和绝对位置之间的一个关键区别是，当用户滚动时，具有固定位置的元素不会移动。
    float:
    不使用position，而是设置元素的float属性。浮动元素会被从文档的常规流程中移除，并被推到其包含父元素的左侧或右侧。通常与width属性一起使用，以指定浮动元素需要多少水平空间

z-index:
当元素的位置重叠时（例如，使用position：absolute | relative | fixed | sticky），默认情况下，HTML标记中后面出现的元素将默认显示在其他元素的顶部。z-index值越大越向顶层

使用margin属性将元素水平居中：
前提该元素是block margin=auto; 对于图像可以先将图像的display=block然后设置margin为auto实现居中

样式变换

使用CSS变换比例属性更改元素的大小：
transform: scale(2); 将元素大小变为两倍
transform: skewX(); 会使所选元素沿其X（水平）轴倾斜给定度。skewY()同理
transform: retote();旋转给定度

使用CSS画图：

  1. 画月亮：
background-color:transparent;
border-radius: 50%;
box-shadow: 25px 10px 0px 0px blue;
  1. 画爱心： 首先关于伪元素：必须定义content属性，当画形状的时候通常赋值为''
<div class="heart></div>
.heart{
  position:relative;
  width:50px;
  height:50px;
  background-color:pink;
  margin:auto;
  top: 50px;
  transform: rotate(-45deg);
}
.heart::after {
  content: "";
  background-color: pink;
  border-radius: 50%;
  position: absolute;
  height: 50px;
  width: 50px;
  top: 0px;
  left: 25px;
}
.heart::before{
  content:"";
  background-color: pink;
  border-radius: 50%;
  position: absolute;
  height: 50px;
  width: 50px;
  top: -25px;
  left: 0px;
}

css动画属性：

  • animation-name设置动画的名称，该名称后来用于告诉 CSS 哪些规则与哪些动画一起使用。@keyframes
  • animation-duration设置动画的时间长度。
  • @keyframes是如何准确指定动画中持续时间内发生的情况。这是通过在动画过程中为特定的"帧"提供CSS属性来完成的，百分比从0%到100%不等。
#anim {
  animation-name: colorful;
  animation-duration: 3s;
}

@keyframes colorful {
  0% {
    background-color: blue;
  }
  100% {
    background-color: yellow;
  }
  • animation-fill-mode: forwards; 保持改变后的属性
  • animation-iteration-count: 3; 动画遍历次数
  • 可以通过改变百分比或是duration改变动画的速率
  • animation-timing-function：控制动画元素在动画持续时间内变化的速度
    • ease:从慢到快再到慢
    • ease-out 从快到慢
    • ease-in 从慢到快
    • linear: 均匀速度
    • 贝塞尔曲线：

Applied Accessibility

1. img标签中的alt属性：

  • 图片搜索的依据
  • 同时屏幕阅读器可以访问alt属性并读取其内容以提供关键信息
  • 对于背景图片或已经用文字解释过的图片可以将alt=''

2. 使用标题划分阅读层次

3. html5语义标签

main, header, footer, nav, article, and section

  • <div> groups content
  • <section> groups related content
  • <article> groups independent, self-contained content

4. audio标签

包裹音视频元素
controls 显示了浏览器的默认播放，暂停和其他控件 是布尔类型的属性

  <audio controls>
    <source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg">
  </audio>

5. figure标签

包裹视觉表示形式（图标、图像等
<figcaption>提供解释性信息 提高访问性

<figure>
  <img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
  <br>
  <figcaption>
    Master Camper Cat demonstrates proper form of a roundhouse kick.
  </figcaption>
</figure>

6. label标签

label标签用于包装特定表单控件项的文本，通常是选项的名称或标签。
这将含义与项目联系起来，并使表格更具可读性
for属性的值必须与表单控件的id属性的值相同。

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
</form>

7. fieldset,legend标签

<form>
  <fieldset>
    <legend>Choose one of these three items:</legend>
    <input id="one" type="radio" name="items" value="one">
    <label for="one">Choice One</label><br>
    <input id="two" type="radio" name="items" value="two">
    <label for="two">Choice Two</label><br>
    <input id="three" type="radio" name="items" value="three">
    <label for="three">Choice Three</label>
  </fieldset>
</form>

8. 日期相关

  1. date类型input标签
<label for="input1">Enter a date:</label>
<input type="date" id="input1" name="input1">
  1. time标签
  • 有datetime属性：这是辅助设备访问的值
  • 包裹页面中时间相关的信息

9. css隐藏部分内容

  .sr-only {
    position:absolute ;
    left:-10000px ;
    width:1px ;
    height:1px ;
    top: auto;
    overflow: hidden;
  }

10. 文字可读性：颜色对比规定

web内容可访问性指南（WCAG）建议普通文本的对比度至少为4.5：1。 通过比较两种颜色的相对亮度值来计算该比率。

11.accesskey属性： 指定快捷键

  • 一般多用于按钮、链接
  • 使用alt键+设置的accesskey实现交互

12. tabindex属性：实现使用tab键在元素之间切换

设置tabindex ="1"会将键盘焦点首先移至该元素。 然后，它将遍历指定的tabindex值（2、3等）的序列，然后移至默认值和tabindex =“ 0”项。

Responsive Web Design Principles

1. media query

当页面宽度小于或等于100px时： @media (max-width: 100px) { /* CSS Rules */ }

2. 使图片响应视窗

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

100％的最大宽度将确保图像不会比其所在的容器宽，而auto的高度将使图像保持其原始纵横比。

3.使用视网膜图像进行高分辨率显示

由于“视网膜”和“非视网膜”显示器之间的像素密度不同，因此某些未考虑高分辨率显示器的图像在高分辨率显示器上渲染时可能看起来“像素化”。
使图像正确显示在高分辨率显示器（例如MacBook Pro“视网膜显示器”）上的最简单方法是将其宽度和高度值定义为原始文件的一半

4. 版式具有响应性

  • vw（视口宽度）：10vw是视口宽度的10％。
  • vh（视口高度）：3vh是视口高度的3％。
  • vmin（最小视口）：70vmin是视口较小尺寸（高度或宽度）的70％。
  • vmax（最大视口）：100vmax是视口较大尺寸（高度或宽度）的100％。

CSS Flexbox

参考：www.ruanyifeng.com/blog/2015/0…
添加display:flex到一个元素会把它变成一个flex容器。
flex-container：

dispaly:flex;
六个属性：
flex-wrap:wrap;
flex-direction:row;
flex-flow: <flex-direction> || <flex-wrap>;  /*简写形式*/
justify-content:center/flex-start/flex-end/space-between/space-around/space-evenly;
align-items:center/flex-start/flex-end/strech/baseline;
align-content:center;

父标签使用display:flex;子元素如果没有设置高度或设为auto会默认strech，占满整个容器的高度

flex-items:

  • flex-shrink:1; 当父容器的宽度小于其内所有flex项的总宽度时收缩,与容器中的其他项目相比，数字越高，收缩的幅度就越大。
  • flex-grow:1;
  • flex-basis:10em; 指定CSS在使用flex-shrink或flex-grow进行调整之前的项目的初始大小。默认auto
  • 以上三个属性可以直接用flex: flex-grow flex-shrink flex-basis;
    • 快捷键：auto (1 1 auto) 和 none (0 0 auto)。
  • order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
  • align=self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性,默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

flex下的width原则： zhuanlan.zhihu.com/p/269899480

默认情况下，flex-basis 是用于设定元素的基本宽度，flex-shrink 用于设定元素的宽度缩小， flex-grow 用于设定元素的宽度的扩张。当两个元素同时设置flex-grow的值时， 会根据其值的比例来分配宽度值，flex-shrink 同理。container设置为flex之后， 其子元素已经不是简单的block了， 可以理解为一个flex-block的元素，其表现为非块级元素， 不具有主动换行的特性，其宽度遵从自己的一套宽度原则，具体如下表显示：
子元素需要固定大小的在子元素设置width, 默认为auto，父子起码要有一个width或者flex-basis，同时设置flex失效

CSS Grid

阮一峰：www.ruanyifeng.com/blog/2019/0…

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

父元素设置display:grid称为container，其子元素称为items。 注意：items只能是容器的顶层子元素，不包含items的子元素
container:

display:grid/inline-grid;
grid-template-columns:repeat(2,300px);
grid-template-rows:repeat(2,300px);  
grid-column-gap:10px;
grid-row-gap:10px;
grid-gap:<grid-row-gap>|| <grid-column-gap>;
justify-items:center|start|end;
align-items:center|start|end;
/*自定义区域名称：*/
grid-template-areas:
      "header header header"
      "advert content content"
      "footer footer footer";
  • 容器指定了网格布局以后，接着就要划分行和列。 grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。
  • fr关键字：如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。fr可以与绝对长度的单位结合使用:150px 1fr 2fr; 第二列75px,第三列150px
  • auto自动将列或行设置为其内容的宽度或高度
  • build-in function for行列宽度设置：
    • repeat
      • auto-fill可以作为repeat函数的第一个参数，表示可以根据容器的大小自动插入尽可能多的所需大小的行或列
      • auto-fit
      • minmax(min-width,max-width)
      • flexible layout:repeat(auto-fill, minmax(60px, 1fr));
  • justify-items,align-itemscontainer设置其中所有items的布局

items: item所在的box称为cell

image.png
grid-column 占据几列，从开始网格线到结束网格线

grid-column: <start-line> / <end-line>;
grid-row: <start-line> / <end-line>;

自定义区域名称与引用：

  • 在item中定义grid-area:footer,此元素会占据footer行 因为container中定义第三行整行为footer area
  • 如果container中没有定义grid-template-areas,可以在item中自定义grid-area:horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;

cell:

/*cell中内容的布局 单独调整*/
justify-self:center|start|end;
align-self:center|start|end;

圣杯布局：

image.png
grid实现： www.freecodecamp.org/learn/respo…
flex实现：www.ruanyifeng.com/blog/2015/0…

avatar
文章
阅读
粉丝