HTML/CSS 部分
垂直居中的九种写法
不一定有九种了，茴香豆还不一定有九种吃法。最好的一种是使用绝对定位来实现。
#container { position: absolute; left: 50%; top: 50%; background-color: #ccc; height: 200px; width: 400px; margin-left: -200px; margin-top: -100px;} top:50% 表示 container 左上角离浏览器窗口上边沿二分之一个浏览器高度的距离，然后使用二分之一容器高度的距离作为 margin-top 来修正，这样容器在浏览器中就垂直居中了。同理可得水平居中。效果见任务 4「 任务四：定位和居中问题」。
移动端布局和 WebView
在任务 11「 移动Web页面布局实践」中，使用 viewport 来控制网页在移动端高度和宽度的自适应显示。适配移动端的页面会加入下面这一行
css 中的距离大小要由原来的 px 更改为 rem。rem (font size of the root element) 作为移动端的基本单位，设置 html 中的 font-size 就可以同步控制网页中的大小样式。
微信的内嵌浏览器使用的是 WebView，当查看分享时打开的页面就是使用 WebView 呈现的。手机淘宝客户端也在页面中使用了 WebView。淘宝页面这种经常变化很大，对动画和流程性没要求的话，会优先使用 WebView。所以 App 的原则是经常变用 WebView，不经常变就 Native。
可以通过下列方式判断 APP 使用的哪种技术。打开开发者模式———显示布局边界。若是整块区域有边界，则是 WebView。如果每个元素都有边界，则不是。
Flex 布局
Flexbox 弹性布局的出现是为了解决复杂的web布局，这种布局方式很灵活。容器的子元素可以任意方向进行排列。
.flex-container { height: 100%; width: 100%; display: flex; justify-content: space-around; align-items: center;} 这样 flex-container 中的 div 就是在水平方向自动适应的。效果见任务 10「 Flexbox 布局练习」。
JavaScript 部分
事件代理机制
事件代理机制是指把事件处理器添加到父级元素，避免把事件处理器添加到多个子级元素上。现在有这样一种场景，页面初始化时子级元素还不存在，这时 DOM 树中只存在父级元素，但这些子级元素需要绑定点击事件。这时就可以使用事件代理。在任务 16「 事件代理机制和表单验证」中可以看到典型应用。
document.getElementById('aqi-table').addEventListener("click", function(e) { if(e.target && e.target.nodeName == "BUTTON") { var city = e.target.parentNode.parentNode.firstChild.firstChild.nodeValue; console.log("something"); }}) 用 $ 选取元素
选取元素时可以使用 document.querySelector()或者 document.getElementByID()。可以定义一个函数来简化这种写法，函数名取为 $，和 jQuery 的使用方法类似。在任务 35「 听指令的小方块-命令解析」中可以看到典型应用。
function $(id) { return document.querySelector(id);}$('#buildButton').onclick = function() { buildRandomWalls();} 排序可视化
任务 19「 基础练习」需要可视化基本排序算法的过程。
排序过程中的停顿使用 setInterval()来实现。动画中表示数字的 bar 使用 div 来模拟。不同高度的 bar 使用不同的 RGB 值。
function renderQueue() { content = "" for (var ele in queue) { content +=""; content += " "; content +="
查看更多关于百度前端学院总结_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did114752