-
- Flying Swing Layout
-` 标签。 -nowrap |文本不会换行，文本会在在同一行上继续，直到遇到 `
` 标签为止。 -pre-wrap |保留空白符序列，但是正常地进行换行。 -pre-line |合并空白符序列，但是保留换行符。 -inherit |规定应该从父元素继承 white-space 属性的值。 - - -### `@font-face` - -**CSS3 @font-face 规则** -在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。 -通过 CSS3，web 设计师可以使用他们喜欢的任意字体。 -当您您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。 -您“自己的”的字体是在 CSS3 @font-face 规则中定义的。 - -注释：Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。 - -**使用您需要的字体** -在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。 -如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)： - -**实例** - -```css -@font-face { - font-family: myFirstFont; - src: url('Sansation_Light.ttf'), - url('Sansation_Light.eot'); /* IE9+ */ -} -div { - font-family: myFirstFont; -} -``` - -**CSS3 字体描述符** - -下面的表格列出了能够在 @font-face 规则中定义的所有字体描述符： - -描述符 |值 |描述 -font-family |name |必需。规定字体的名称。 -src |URL |必需。定义字体文件的 URL。 -font-stretch |normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded|可选。定义如何拉伸字体。默认是 "normal"。 -font-style|ormal
italic
oblique|可选。定义字体的样式。默认是 "normal"。 -font-weight|normal
bold
100
200
300
400
500
600
700
800
900|选。定义字体的粗细。默认是 "normal"。 -unicode-range |unicode-range |可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。 - - -## 深入了解行高属性 - -[参考：深入了解css的行高Line Height属性](http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html) - -一般来说，设置行高为`值：纯数字`是最理想的方式，因为其会随着对应的 `font-size` 而缩放。 - - -## 盒模型及定位 - -### 已知宽度的div居中 - -* 用两种方法来实现一个背景色为红色、宽度为960px的在浏览器中居中 - -我的方法一： - -使用 `margin：0 auto;` - -html文件 - -```html - - - - -Document - - - -aaa- - -``` - -css文件 - -```css -.center { - width: 960px; - margin: 0 auto; - background-color: red; -} -``` - -方法二： - -绝对定位，左边距离 body 50%，`margin-left: -480px` - -```css -.center { - width: 960px; - background-color: red; - position: absolute; - left: 50%; - margin-left: -480px; -} -``` - -[Demo](http://gaohaoyang.github.io/baidu-ife-practice/task0001/task0001-2.html) - -#### 对于居中的补充 - -参考自 [学习CSS布局](http://zh.learnlayout.com/)。 - -像下面这样写css代码，使用 `max-width` 替代 `width` 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要。 - -有效的避免了如下问题： -当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。 - -```css -#main { - max-width: 600px; - margin: 0 auto; -} -``` - -* [CSS布局奇淫技巧之--各种居中](http://www.cnblogs.com/2050/p/3392803.html) - - -### 早期css滑动门 - -* 有的圆角矩形是复杂图案，无法直接用border-radius，请在不使用 border-radius 的情况下实现一个可复用的高度和宽度都自适应的圆角矩形 -示例  - -这道题我一开始不会做，查阅了资料，发现这就是所谓的 css 滑动门的应用。[妙味云课堂之css：滑动门、圆角、css精灵](http://www.bkjia.com/webzh/759711.html) -使用三层嵌套，或者四层嵌套的 `div`，通过背景图定位等方式可以实现。 - - -### 左侧固定右侧自适应宽度的两列布局 - -* 用两种不同的方法来实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化  - -我的方法一： - -不使用浮动，使用绝对定位，将左上角的块放好位置，右边的块设置`margin-left` - -html 文件： - -```html - - - - -layout - - - ---DIV-A-DIV-B-DIV-C- - -``` - -css 文件： - -```css -.row { - position: relative; -} -.left { - width: 100px; - height: 100px; - background-color: red; - position: absolute; - top: 0; - left: 0; -} -.right { - height: 100px; - background-color: blue; - margin-left: 100px; -} -.bottom { - height: 100px; - background-color: yellow; -} -``` - -方法二： - -使用浮动，左边的块使用浮动，右边的块使用`margin-left` - -```css -.left { - width: 100px; - height: 100px; - background-color: red; - float: left; -} -.right { - height: 100px; - background-color: blue; - margin-left: 100px; -} -.bottom { - height: 100px; - background-color: yellow; -} -``` - -[Demo](http://gaohaoyang.github.io/baidu-ife-practice/task0001/task0001-6-3.html) - - -**补充：** - -看完了后面的 BFC 之后，本题和下一题都可以用另一种方法了 -总之我已经震惊了！太爽了！有没有！ - -html - -```html - - - - -使用 BFC 进行两列布局 - - - -DIV-A-DIV-B-DIV-C- - -``` - -css - -```css -.left{ - width: 100px; - height: 100px; - background-color: blue; - float: left; -} -.right{ - height: 100px; - background-color: yellow; - overflow: hidden; -} -.bottom{ - height: 100px; - background-color: red; -} -``` - -[Demo](http://gaohaoyang.github.io/baidu-ife-practice/task0001/two-col-layout-with-BFC.html) - - -### 双飞翼布局 - -* 用两种不同的方式来实现一个三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化 - -原题中参考资料 [双飞翼布局](http://www.imooc.com/wenda/detail/254035) - -```html - - - - -Flying Swing Layout - - - --- - -``` - -css - -```css -.bd { - - /*padding: 0 190px;*/ -} -.main { - float: left; - width: 100%; - background-color: #aaa; -} -.main-wrap { - margin: 0 190px; -} -.sub { - float: left; - width: 190px; - margin-left: -100%; - background-color: blue; - /*position: relative; - left: -190px;*/ -} -.extra { - float: left; - width: 190px; - margin-left: -190px; - background-color: yellow; - /*position: relative; - right: -190px;*/ -} -``` - -[Demo](http://gaohaoyang.github.io/baidu-ife-practice/task0001/task0001-6-4.html) - - -**补充：** - -使用 BFC 的另一种方法，我再一次震惊！ - -代码超级简单！ - -html - -```html - - - - -----Flying Swing Layout
---Flying Swing Layout
- left ---Flying Swing Layout
- right -flying-Swing-BFC - - - -left-right-- flying-Swing-BFC.htmlflying-Swing-BFC.htmlflying-Swing-BFC.htmlflying-Swing-BFC.htmlflying-Swing-BFC.htmlflying-Swing-BFC.htmlflying-Swing-BFC.htmlflying-Swing-BFC.htmlflying-Swing-BFC.htmlflying-Swing-BFC.htmlflying-Swing-BFC.html -- - - -``` - -css - -```css -.left{ - width: 100px; - background-color: red; - float: left; -} -.right{ - width: 200px; - background-color: blue; - float: right; -} -.main{ - background-color: #eee; - overflow: hidden; -} -``` -[Demo](http://gaohaoyang.github.io/baidu-ife-practice/task0001/flying-Swing-BFC.html) - - -### 浮动布局 - -* 实现一个浮动布局，红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化  - -这个题我觉的直接将每一个块浮动起来就好了，不知我理解的对不对。 - -html文件 - -```html - - - - -Document - - - - - - - - - - - - - - -``` - -css文件 - -```css -body { - background-color: red; -} -div { - width: 150px; - height: 100px; - margin: 10px; - float: left; - background-color: blue; -} -``` - -[Demo](file:///E:/GitWorkSpace/baidu-ife-practice/task0001/task0001-6-5.html) - - -### 清除浮动/闭合浮动 - -参考自 [那些年我们一起清除过的浮动 by 一丝冰凉](http://www.iyunlu.com/view/css-xhtml/55.html) - -1. 清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left \| right \| both \| none； -2. 闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。 - -我们想要达到的效果更确切地说是闭合浮动，而不是单纯的清除浮动，设置clear：both清除浮动并不能解决warp高度塌陷的问题。 - -正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（**高度塌陷**）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。 - -最后一丝姐给了两个精益求精方案，我觉得方案一更易于理解，这里实践一下： - -[闭合浮动的Demo](http://gaohaoyang.github.io/baidu-ife-practice/task0001/close-float.html) - -下面是源码 - -html - -```html - - - - -Document - - - -----left
-Content or Something-right-Row2- - -``` - -css - -```css -.row { - border: 1px solid red; -} -.clearfix:after { - content: "\200B"; - display: block; - height: 0; - clear: both; -} -.clearfix { - *zoom: 1; -} -.left { - width: 200px; - float: left; - background-color: #eee; -} -.right { - width: 200px; - float: right; - background-color: #eee; -} -.row2 { - width: 600px; - height: 50px; - background-color: #aaa; -} -``` - -其中`*zoom: 1`是为了触发`hasLayout` - - -还有另一种解决方案！ - -参考自：[清除浮动（clearfix hack）](http://zh.learnlayout.com/clearfix.html) - -直接使用，如下代码即可 - -```css -.clearfix{ - overflow: auto; - zoom: 1; -} -``` - -[Demo](http://gaohaoyang.github.io/baidu-ife-practice/task0001/close-float-2.html) - -(实际上，我看完后面的资料，再翻到这里就明白了！正是使用了BFC原理！！！！！！！) - - -**但是今天遇到一个坑！** - -如果使用了 `over-flow`，在后面如果有元素要绝对布局在父元素的外面的，意思就是出现 `top`, `bottom`, `left`, `right` 的值为负值时，就会出现看不到，或者滚动条的问题！ - -若是有这种要求，我觉得还是用一丝姐姐的解决方案比较好。 - -**参考** - -* [清除浮动的几种方法](http://zfengqi.me/?p=87) - - -### `box-sizing` - -当你设置一个元素为 `box-sizing: border-box;` 时，此元素的内边距和边框不再会增加它的宽度。 - -他们的内边距和边框都是向内的挤压的。支持IE8+，需要加浏览器内核。 - -```css -.simple { - width: 500px; - margin: 20px auto; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -``` - - -### 响应式布局 - -媒体查询 - -* [MDN CSS媒体查询](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries) -* [媒体查询-学习CSS布局](http://zh.learnlayout.com/media-queries.html) - - `@media screen and (min-width: 500px) and (max-width: 800px) { ... }` - -* [An Introduction to Meta Viewport and @viewport](https://dev.opera.com/articles/an-introduction-to-meta-viewport-and-viewport/) - - -### 多列布局 - -* [column](http://zh.learnlayout.com/column.html) - - -### BFC 和 IE 的 hasLayout - -* [BFC和IE的hasLayout](http://www.cnblogs.com/pigtail/archive/2013/01/23/2871627.html) -* [Block Formatting Context 的几大用处](http://outofmemory.cn/wr/?u=http%3A%2F%2Fkkeys.me%2Fpost%2F68547473290) - -看完这个资料后我震惊了！竟然可以这么玩儿！ -我将本文之前提到的两列布局，双飞翼布局又重新写了一遍！太爽了！代码超级简洁！ - -**Block Formatting Context 的几大用处：** - -1. 防止 margin 折叠 -1. 清除float -1. 不会环绕float元素 - -相关资料 - -* [视觉格式化模型(visual formatting model)](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Visual_formatting_model) -* [块格式化上下文(block formatting context)](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Block_formatting_context) - - -### `div` 三列等高 - -[纯CSS实现三列DIV等高布局](http://show.sysu.edu.cn/?action-blogdetail-uid-2383-id-5040) - -最关键的地方有3句： - -最外层div设置一个溢出隐藏 - -```css -#wrap { - overflow:hidden; -} -``` - -每一个子块设置 padding 和 margin - -```css -#left,#center,#right{ - margin-bottom:-10000px; - padding-bottom:10000px; -} -``` - -overflow:hidden; '隐藏溢出。如果内容溢出wrap层，则不显示。 - -margin-bottom:-10000px; '底部边距-10000px。 -padding-bottom:10000px; '底部填充10000px。 -上面这两句能够实现的效果就是，产生10000px的填充，然后用负的边距把它给抵销掉。 - - -### 去除inline-block元素间间距 - -一开始我不知道是因为使用了 `display: inline-block` 会有间距。后来查找资料找到了相关的方案。 - -* [去除inline-block元素间间距的N种方法](http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/) -* [Fighting the Space Between Inline Block Elements](https://css-tricks.com/fighting-the-space-between-inline-block-elements/) - -真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距。 -这种表现是符合规范的应该有的表现。 - -解决方法有很多，上述博文中提到的有： - -1. 移除空格 -2. 使用 `margin` 负值 -3. 取消闭合标签 -4. 使用 `font-size: 0` -5. 使用 `letter-spacing` -6. 使用 `word-spacing` -7. 其他 - -我觉得使用 4 `font-size: 0` 比较好，对别的元素影响最小。代码如下：在 `a` 的外层将字体尺寸设为 0，载对内层的 `a` 重新设置字体大小，即可。 - -```css -nav { - font-size: 0; -} -nav a { - font-size: 16px; -} -``` - - -## 最终作品 - -* [在线Demo](http://gaohaoyang.github.io/ife/task/task0001/work/Gaohaoyang/index.html) -* [源代码](https://github.com/Gaohaoyang/ife/tree/master/task/task0001/work/Gaohaoyang) - - -## 参考资料 - -* [HTML、CSS的代码规范](https://github.com/ecomfe/spec) 自己要试着改变一些代码风格了，规范化！ -* [顾轶灵:Web语义化](http://www.zhihu.com/question/20455165) -我看他回答最后的举例的Sildes做的非常好，可以经常看看。[Semantic HTML](http://justineo.github.io/slideshows/semantic-html/)。他的其他Slides也做的非常好，很喜欢这种风格！ -* [CSS命名规范@W3C Funs](http://www.w3cfuns.com/blog-5445898-5398950.html) 起名不再困难！ -* [点击阅读: CSS浏览器兼容性列表-维基百科](点击阅读: CSS浏览器兼容性列表) 类似的我想到了 [Can I Use](http://caniuse.com/)，Can I Use 包含的更多，包括 HTML5, CSS SVG, JS API 等。 - - -* [学习CSS布局](http://zh.learnlayout.com/) -* [Media Queries](http://mediaqueri.es/) -* [使用CSS渐变](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients) -* [CSS3 Gradient](http://www.w3cplus.com/content/css3-gradient) -* [CSS渐变生成器](http://www.colorzilla.com/gradient-editor/) diff --git a/_posts/2015-04-22-baidu-ife-2-javascript.md b/_posts/2015-04-22-baidu-ife-2-javascript.md deleted file mode 100644 index 5f50a9826eb..00000000000 --- a/_posts/2015-04-22-baidu-ife-2-javascript.md +++ /dev/null @@ -1,1586 +0,0 @@ ---- -layout: post -title: "百度Web前端技术学院(2)-JavaScript 基础" -date: 2015-04-22 19:06:05 -categories: JavaScript -tags: Baidu ife JavaScript 正则 Regular ---- - -* content -{:toc} - -百度前端学院的第二次任务笔记，JavaScript 基础。主要有JavaScript的定义，数据类型，对象，数组，字符串，正则表达式，DOM，事件，BOM，Ajax 等知识。 - - - - - -## 任务 - -掌握JavaScript基础知识，能够使用JavaScript编写一些复杂度不大的交互功能。 - -**任务：** [JavaScript基础](https://github.com/Gaohaoyang/ife/tree/master/task/task0002) - -做完任务一的时候深深地感觉到自己的基础非常的薄弱，在这里再次感谢一下百度前端技术学院，做任务的时候深刻理解了自己平时掌握不牢固的内容，比如浮动、BFC、等高布局等。继续加油吧！ - - -像上一篇文章一样，写些东西记录一下。 - - -## 第一个页面交互 - -按照任务中的代码，在IE8下提示：`对象不支持“addEventListener”属性或方法` -我猜是IE8浏览器没有这个方法吧。 - -参考资料：[JavaScript 指南-MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide) - -### 了解JavaScript是什么 - -[来自MDN的解释](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/JavaScript_Overview#What_is_JavaScript.3F) - -> JavaScript 是一种跨平台，面向对象的脚本语言。作为一种小巧且轻量级的语言，JavaScript 无意于独立运行，而是被设计为可以轻易嵌入到其它的产品和应用中，比如 Web 浏览器。在宿主环境中，JavaScript 可以被连接到环境中的对象之上，以提供对其的编程控制。 -> -> 核心的 JavaScript 中包含有一组核心的对象，包括 Array，Date 和 Math，以及一组核心的语言要素，包括操作符，控制结构和语句。出于多种目的，可以通过为其增补附加的对象，对核心 JavaScript 加以扩展；例如： -> -> * 客户端 JavaScript 提供了用于控制浏览器（Navigator 或者其它浏览器）以及其中的文档对象模型（DOM）的对象，从而扩展了核心 JavaScript。例如，客户端扩展允许应用程序在 HTML 的表单中加入元素，以便响应用户事件，比如鼠标点击，表单输入和页面导航。 -> * 服务器端 JavaScript 提供了服务于在服务器上运行 JavaScript 的对象，从而扩展了核心 JavaScript。例如，服务器端扩展可以允许应用程序访问关系型数据库，在应用程序的不同调用间提供信息的连续性，甚至于处理服务器之上的文件。 -> ->借由 JavaScript 的 LiveConnect 功能，您可以让 Java 和 JavaScript 间实现通讯。从 JavaScript 中，您可以创建 Java 对象并访问它们的公共方法和域。从 Java 中，也可以访问 JavaScript 的对象，属性和方法。 -> ->Netscape 发明了 JavaScript 并将 JavaScript 首先用于 Netscape 浏览器中。 - - -### 如何在 HTML 页面加载 JavaScript 代码 - -使用 ` - - -