经过一个月的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前端入门知识点多而杂，但只要你认真学习记忆，多练习实践，就可以轻松掌握。通过一些作业练习和测试考核，我发现自己的页面制作效率还是不够高，还得努力!努力!再努力!

上一篇

千锋web前端培训学员总结JS与Java和C++的不同点

下一篇

0基础学Web前端你要了解这些知识点