关于CSS的只言片语

 

　　这段时间作了一个简单的页面，借机又重温了一下CSS的相关知识，现总结一下：

• 工欲善其事必先利其器，让咱们先作一点准备工做
  
  1.在页面添加：

<meta http-equiv="x-ua-compatible" content="ie=edge"> 

　　指定IE利用标准模式渲染页面，而不是兼容模式

<meta name="viewport" content="width=device-width,initial-scale=1"> 

　　viewport的属性
　　width：控制 viewport 的大小，能够指定的一个值，若是 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
　　height：和 width 相对应，指定高度
　　initial-scale：初始缩放比例，也便是当页面第一次 load 的时候缩放比例
　　maximum-scale：容许用户缩放到的最大比例
　　minimum-scale：容许用户缩放到的最小比例
　　user-scalable：用户是否能够手动缩放，默认为yes

　　2.引入normalize.css

　　　　多数时候咱们都用reset.css来去除或规范一些浏览器的默认样式，normallize.css 较之 reset.css 提供了更好的样式跨浏览器一致性体验。

　　　　normalize.css   

　　　　来，让咱们谈一谈 Normalize.css   微吐槽：实际项目中normalize没有去除ul的padding等相似的值，谁能告诉我为何？

　　3.利用BrowserSync来调整编辑页面

　　　　这个工具真的很强大，支持sass和less的实时编辑预览，不再用担忧save & F5了。(下载页面)

　　4.多用Can I Use（http://caniuse.com/）

　　　　不只列出各浏览器的支持程度，还能提供一些issues文档，多查查你确定会收获更多。

• 项目实践中的一点经验总结

　　1.固定背景

　　　　视差效果是愈来愈流行了，其实我以为设置一个固定背景就能实现一个最简单的视差效果，提高你的网站bigger。

　　　　　　background-attachment: fixed 使背景图不随页面的滚动而滚动
　　　　　　background-size: cover 使背景图始终填满整个屏幕
　　　　　　background-position: center; 使背景图居中
　　　　　　更多background属性参考

　　2.关于Collapsing Margins
　　　　常见的相邻两个块级元素垂直margin合并、子元素margin传递到父级margin其实都是Collapsing Margin 惹的祸。详细介绍能够参考collapsing-margins.其中针对margin传递问题可用设置border或padding处理。

　　3.关于overflow:hidden的两个实现原理

　　　　当文字和图片同级且同时设置浮动时：

　　　　

　　　　有时咱们并不想让文字全包围图片，而是这样

 　　　　

 　　　　没有设置overflow：hidden时，文字内容的容器与外部容器左边界是重合的, 修改后，这个容器内的内容（context）属性变为了block formating contexts(参考block-formatting  以及 bfc-next-to-float)，直接效果就是图片和文字各自的容器在同时浮动时再也不有重合的部分。　　

　　　　更多内容可参考：CSS 101: Block Formatting Contexts

　　　　　　　　　　　　How does the CSS Block Formatting Context work?

　　　　另外常见到用overflow:hidden来清除浮动，其原理是：容器在计算自身高度的时候必需要有足够的高度包围全部的子元素。但 float 的元素 （还有绝对定位的元素）并不包含在这个计算里面，设置overflow就能够改变容器计算高度的方式让容器 float 元素包含在高度计算内。（参考： bfc-next-to-float）

　　4.简化布局的border-box
　　　　盒模型（content-box）在计算宽度（width）时是不包括border\padding的，因此若是用width:25%设置一排四个均匀分布的span时，极可能得不到想要的效果。这时将其转化为border-　　　　box（width=content+padding+border）模型就能很好的完成需求.参考box-sizing

　　5.绝对定位（absolute）
　　　　经常使用的绝对定位的场景是：针对正常布局的主要页面元素（设置参考  position:relative）将其辅助的页面组件设置为position:absolute，列入下拉菜单，弹出的菜单选项就是辅助组件。

　　　　

　　　　这里须要注意的是，辅助组件必定要设置宽度（百分比或指定宽度皆可），不然器宽度会变得不肯定。

　　6.一些关于语义化实现的细节
　　　　标题文字下装饰性的下划线、指示用的小三角符号以及清除浮动均可以借助伪元素（:after和:before）来实现，更好遵循样式和内容分离的原则。
　　　　此外在页面引入nav/section/header/article等标签能更好遵照语义化（Semantic）规范。语义化Semantic参考 另外 normalize.css帮咱们处理好了IE8-浏览器对新标签元素的支持问题。

　　7.怎能忘记响应式
　　　　响应式的页面不单单是包括了能够解决因屏幕大小而产生布局问题的Media Query，还要考虑到因带宽小和高延迟带来的资源加载、用户体验等问题。可参考Resposive Disgn

　　　　先说到这里，有可吐槽的地方，欢迎拍砖。