前端学习小计-CSS3和Flex

发表于 更新于 分类于 Disqus： 本文字数： 2.1k 阅读时长 ≈ 4 分钟

此篇承接上篇CSS和html5标签。写一些CSS3的新特性，flex布局和JS的基础知识。

CSS3

CSS3是较新的层叠样式表的规范，其中的一些特性并未得到现行浏览器的支持。需要在样式前面加上-ms-, -moz-或是-webkit-，才可获得最好的浏览器支持。

边框：CSS3支持设置圆角矩形（border-radius），边框阴影（box-shadow）甚至边框图片（border-image）.

背景：设置背景大小和重复方式（background-size，background-repeat），设置背景所属范围和绘制区域（background-origin，background-clip）

文本效果：文本阴影（text-shadow），断词方式（word-wrap），断句方式（word-break）

字体：支持从外部导入字体（font-face）

2D，3D变换：transform，有rotate，translate，scale，skew，translateX，translateY，rotateX，rotateY等属性。

渐变：transition，选择属性，时间和变换函数。一般结合伪类（如:hover）使用。

动画：keyframe（设置关键帧）+animation（决定动画的名称，持续时间，周期，方向等等）

多列：column-count，column-gap，column-rule，column-span等属性

用户界面：resize支持用户自己调整元素大小等等。

更多内容可以参考W3scool的CSS3讲解。

Flex布局

Flex是一种十分方面的布局方式，可以轻松实现居中对其等需求和响应式布局。目前在较新的浏览器中有支持。Flex需要在display属性中指定为flex。从而使得这个容器有了flex的特点。

flex-direction：指定伸缩容器的主轴方向，即子元素伸缩的方向。有row，row-reverse，column，column-reverse等值。其中row是常用且默认的。

flex-wrap：控制伸缩容器是单行或是多行，即侧轴新行的堆放方向。有no-wrap，wrap，wrap-reverse等值。默认值为no-wrap。

flex-flow：通常将flex-direction和flex-wrap结合起来用flex-flow统一表示。

align-items：控制容器内伸缩项目的侧轴对齐方式。有flex-start，flex-end，center，stretch，baseline等值。

justify-content：主轴上伸缩项目的对齐方式。有flex-start，flex-end，center，space-between，space-around等值。

align-content：多行间在伸缩容器里的对齐方式，有flex-start，flex-end，center，space-between，space-around，stretch等值。

order：通过css动态更改子元素的排列顺序。默认为0，值越大顺序越靠前，可以取负值。

flex-grow，flex-basis，flex-shrink等是更加复杂的用法。这里从略。结合@media screen and (max-width: xxxpx or min-width: xxxpx){ css code}会有很好的响应式布局效果。

更多内容和展示效果，可以在w3plus的flex讲解中找到。

JS与html经验小结

不成篇幅，这里用列表的形式给出。

  1. alert()弹出对话框，无返回值；confirm()弹出确认框，返回boolean；prompt()弹出信息框，返回用户输入。
  2. document，window，element等是html的js接口中的常用对象，具体可以MDN的技术文档。
  3. element代表了页面DOM结构的节点，有文本节点和元素节点的区别。
  4. document中的常用函数包括getElementById，getElementsByTagName， getElementsByClassName，createElement等，element中有innerHtml，style，classname等属性值。
  5. 添加元素，appendChild，insertBefore，都需要父元素调用，通过parentNode获得。反之，可以通过firstChild，lastChild，nextSibling等获知子元素情况。删除元素使用removeChild。
  6. parseInt()是JS的内建函数，用来将字符串转换为整型数，须开头为数字且遇到非数字为止。JS默认均用浮点数存储所有数据，通过isNaN判断是否为数字，isFinite判断是否为无穷。
  7. array是JS的基础数据类型之一，以键值对的形式存储，和hashtable很像，有push, reverse, sort, shift, unshift, push, pop, join，reduce等用法。
  8. 有foreach的用法
  9. 函数也是对象，有诸如arguments，length等属性。可以作为返回值或是输入值。甚至有制造函数的函数。

更多内容可见MDN的技术文档。