freecodecamp 前端html css3部分

1. html5 t添加输入框的必填检测  require 字段。

2. #main  标签  只能包含一个。标签规定文档的主要内容。 

CatPhotoApp

Click here to view more cat photos.

Things cats love:

• cat nip
• laser pointers
• lasagna

Top 3 things cats hate:

1. flea treatment
2. thunder
3. other cats

Submit

注释：在一个文档中，不能出现一个以上的

元素。

元素不能是以下元素的后代：

、

、

、

或

。

3. radio 多个单选组合。一般将input 的radio 类型嵌套在 label 标签中。label 中的for 属性名与 input 中的  id  一致时， 当点击label 中的text 即选中了单选框。同一组单选框input 标签中具有相同的name 属性。input 标签中 checked 属性表示默认选中。

Submit

indoor

outdoor

4. checkbox 复选框 与单选框相同，Input 标签嵌在label 标签中。 在一组选框中，input 的name 属性必须相同。input 标签中 checked 属性表示默认选中。

5. 对于a 链接可以设置opacity 透明度。

6. 媒体查询用于不同视口的调整。@media ( max-width: 100px)  ===> 当媒体宽度小于或等于100px时

@media (max-width: 100px)

{

           p { font-size: 20px;}

}

通过设置 vm(相对视口的百分比)， vmin（最小视口的百分比）

h2{

width:80vw;

}

p{

width:75vmin;

}

7. 弹性布局flex

在父元素中设置 display: flex; 设置弹性布局，使其子元素按一定规律排列

在父元素中 flex-direction: row : 默认按照行来排列。 决定主轴的方向。

在主轴线上如何分布元素。

align-items 定义子元素如何在崔志方向（交叉轴）分布。

排列在一行的子元素是否换行。flex-wrap: nowrap(默认不换行)

在一行或一列元素排列时，子元素的缩小比例。 flex-shrink: 0 为0 不缩小。

flex-grow 在行或列的子元素中定义排列的数字比例。

order: 子元素的显示顺序。1、2、3 数字大小比较。数字越小越靠前。

align-self: center 

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch