干货分享：Web前端入门知识点有哪些
推荐
在线提问>>
经过一个月的Web前端学习，我基本完成了千锋Web前端培训第一阶段的课程。接下来我就给大家分享一下Web前端入门知识点：
1、建站流程：注册域名->租用空间->网站推广->网站维护
2、HTML历史版本：HTML2.0、HTML3.2、HTML4.0、HTML4.0.1、HTML5
3、css层叠样式表的引用方式：内部样式表、内联样式表、外部样式表
4、网页布局方式：固定宽高布局(单位：px)、百分比布局(n%)、弹性盒布局
5、盒模型：网页布局的基石。
css盒模型：宽度：width+border+padding
怪异盒模型：宽度：width(包括了border和padding)
6、定位：
position：static/absolute/relative/fixed
(“子绝父相”的应用)
7、宽高自适应：
css：html，body{width：100%;height：100%;}
8、弹性盒特点和属性：
特点：
a、屏幕和浏览器窗口大小发生变化也可以灵活调整布局;
b、指定伸缩项目沿着主轴或侧轴按比例分配额外空间，从而调增伸缩项目的大小;
c、指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间;
d、指定如何将垂直于元素布局轴的额外空间分布到该元素的周围;
e、控制元素在页面上的布局方向;
f、按照不同于标准流所指定的排序方式对屏幕上的元素重新排序。
属性：
a、伸缩流方向 flex-direction 主要用来创建主轴，定义伸缩项目在伸缩容器中的方向
row：从左向右
row-reverse：与row相反;
column：从上到下
column-reverse：与column相反;
b、伸缩换行 flex-wrap：
nowrap 不换行 默认值，不管超出还是不超出都不会换行
wrap 换行 一旦伸缩项目超出伸缩容器，那么就会换行
wrap-reverse 换行反向 主轴水平时，上下反向，主轴垂直时，左右反向;
c、伸缩流方向与换行 flex-flow 缩写形式。
flex-flow：flex-direction flex-wrap;
两个值同时定义或者单独定义都生效
d、主轴对齐 justify-content 主要用来定义伸缩项目沿主轴线的对齐方式;
flex-start：伸缩项目向一行的起始位置靠齐;
flex-end：伸缩项目向一行的结束位置靠齐;
center：伸缩项目向一行的中间位置靠齐;
space-between：伸缩项目会平均的分布在行里;
space-around：伸缩项目会平均的分布在行里，两端保留一半的空间;
e、侧轴对齐 align-items 伸缩项目行在侧轴上的对齐方式
flex-start：伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边;
flex-end：伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边;
center：伸缩项目的外边距盒 在该行的侧轴上居中放置;
baseline：伸缩项目根据伸缩项目的基线对齐;
stretch：伸缩项目拉伸填充整个伸缩容器。
f、align-self(加在子元素上)：主要用来设置单独伸缩项目在侧轴的对齐方式，可以覆盖align-items。
flex-start：伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边;(元素位于容器的开头)
flex-end：伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边;(元素位于容器的结尾)
center：伸缩项目的外边距盒 在该行的侧轴上居中放置;(元素位于容器的中间)
stretch：伸缩项目拉伸填充整个伸缩容器。(元素被拉伸以适应容器)
注释：大多数是加在父元素上面的，flex、align-self是加在子元素上面的
g、堆栈伸缩行 align-content(行与行之间的对齐方式) 定义多个伸缩行的对齐方式; 往往要与换行同时应用，没有换行就不存在多行的情况。
flex-start：各行向伸缩容器的起点位置堆叠;(没有行距)
flex-end：各行向伸缩容器的结束位置堆叠;(底部对其没有行距)
center：各行向伸缩容器的中间位置堆叠;(居中没有行距)
space-between：各行在伸缩容器中平均分布;(两端对齐，中间自动分配)
space-around：各行在伸缩容器中平均分布，两端保留一半的空间;(自动分配距离)
伸缩项目属性：
显示顺序 order (加在子元素上)默认状态是按照标准流的顺序排列，在flexbox模型里，可以通过order改变伸缩项目的顺序。
不定义order的伸缩项目会排到前面。
order：1; 排第一
order：2; 排第二
9、媒体查询：
@media all and (min-width:320px) {
div{ background-color:blue;}
} 表示设备宽度小于320px时就不执行蓝色背景了。
@media only screen and (min-width: 300px) and (max-width: 640px) {
div{
background-color: orange;
}
} 表示设宽度到640px------300px之间显示桔色背景。
注释：screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型
and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)
(min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。
10、移动端vw布局：
vw = 元素所展示的大小(设计图固定大小)*100/设计稿宽度
总的来说，Web前端入门知识点多而杂，但只要你认真学习记忆，多练习实践，就可以轻松掌握。通过一些作业练习和测试考核，我发现自己的页面制作效率还是不够高，还得努力!努力!再努力!
