总结包含以下内容：CSS hack、清除浮动(clearfix hack)、CSS伪类和伪元素、Box-Sizing、水平居中和垂直居中、em和rem的区别、max-width、@media媒体查询、columns、@import加载CSS文件和link的区别、使用CDN、Flex布局

Study CSS Layout
Study CSS Layout

CSS hack

因为不同浏览器对CSS的兼容不同，所以需要hack来对CSS做一些兼容。常用的有四种方法：

  • 条件注释法

    在使用Bootstrap时，经常可以在<head></head>中看到有以下这段：

    1
    2
    3
    4
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    这就是条件注释法，把其中的内容换成link链接即可。条件注释法还有兼容其它IE浏览器的写法：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!--[if !IE]> 除IE外都可识别<![endif]-->
    <!--[if IE]> 所有的IE可识别 <![endif]-->
    <!--[if IE 6]> 仅IE6可识别 <![endif]-->
    <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
    <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
    <!--[if IE 7]> 仅IE7可识别 <![endif]-->
    <!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
    <!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
    <!--[if IE 8]> 仅IE8可识别 <![endif]-->
    <!--[if IE 9]> 仅IE9可识别 <![endif]-->

    正确的CSS hack的一种写法是：

    1
    2
    <link rel="stylesheet" type="text/css" href="css1.css" />
    <!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="css2.css" /><![endif]-->

    解释一下最上方的Bootstrap代码：

    • html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的
    • 引入respond.js，让低浏览器支持css3的新属性，比如@media媒体查询的使用。使用respond.js注意以下几点：
      • Respond.js 与 跨域（cross-domain） CSS 的问题，解决方法：样式文件跨域导致Respond.js插件在IE浏览器失效的问题
      • Respond.js 与 file:// 协议，由于浏览器的安全机制，Respond.js 不能在通过 file:// 协议（打开本地HTML文件所用的协议）访问的页面上发挥正常的功能。如果需要测试 IE8 下面的响应式特性，务必通过 http 协议访问页面（例如搭建 apache、nginx 等）。
      • Respond.js 与 @import 指令，Respond.js不支持通过 @import指令所引入的 CSS 文件。

  • 类内属性前缀法
    在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果
    比如：

    1
    background-color:blue !important;/* All browsers but IE6 */

  • 选择器前缀法
    比如\*html， \*前缀只对IE6生效

  • CSS3选择器结合JavaScript的Hack

以上更详细的解释，请点击史上最全的CSS hack方式一览

参考资料

清除浮动(clearfix hack)

以下是Bootsrap下的写法

1
2
3
4
5
6
7
8
9
10
11
12
.clearfix { 
	zoom: 1; 
} 
.clearfix:before, 
.clearfix:after { 
	display: table; 
	line-height: 0; 
	content: ""; 
} 
.clearfix:after { 
	clear: both; 
}

奇舞团的老师在慕课网上讲课时，使用的是以下的方法

1
2
3
4
5
6
7
8
9
10
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

更详细的clearfix hack，请点击What methods of ‘clearfix’ can I use?。但肯定的是，为了不破坏HTML的文档结构，clearfix hack要使用CSS的伪元素:before和:after

参考资料

CSS伪类和伪元素

1.:after/::after和:before/::before都是CSS伪元素，与:hover/:active等伪类不一样。
2.:before/:after伪元素是在CSS2中提出来的，所以兼容性到IE8了。
3.::before/::after是CSS3中的写法，为了将伪类和伪元素区分开。但是平时为了兼容性，还是会用一个冒号的写法

想了解更多，请点击CSS 伪元素和CSS 伪类

  • 关于伪类:before和:after中content的内容

    • [String]，使用引号包括一段字符串，将会向元素内容中添加字符串。示例： 

      1
      a:after { content: "↗"; }

    • attr()，调用当前元素的属性，可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。示例：

      1
      2
      3
      a:after { 
      	content:"(" attr(href) ")"; 
      }

    • url()或uri()，用于引用媒体文件。示例：

      1
      2
      3
      h1:before { 
      	content: url(logo.png); 
      }

    • counter()，调用计数器，可以不使用列表元素实现序号功能。具体请参见 counter-increment 和 counter-reset 属性的用法。示例： 

      1
      2
      3
      4
      h2:before { 
      	counter-increment: chapter; 
      	content: "Chapter " counter(chapter) ". " 
      }

  • 伪类元素:nth-child() 和:nth-of-type()

    • :nth-child():做手机网站的时候，由于手机网站对浏览器兼容要求相对较低，手机浏览器大部分都支持css3，这就大大提高了开发效率。可以随意使用CSS3:nth-child()伪类选择器。IE9及以上版本，火狐，谷歌，Safari ，Opera都支持:nth-child()
    • :nth-child(n)与:nth-of-type(n)的区别
    • ele:nth-child(n) 选择器匹配属于其父元素的第n个子元素，不论元素的类型。n 可以是数字、关键词或公式。比如ele:nth-child(odd),即匹配序号为奇数的元素
    • ele:nth-of-type(n) 选择器的意思是“规定属于其父元素的第n个ele元素”

参考资料

Box-Sizing

  • box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box
    content-box，border和padding不计算入width之内
    padding-box，padding计算入width内
    border-box，border和padding计算入width之内，其实就是怪异模式了

  • ie8+浏览器支持content-box和border-box，ff则支持全部三个值

  • 个人推荐使用border-box，因为padding-box只能在ff中得到支持

参考资料

水平居中和垂直居中

水平居中和垂直居中要分三种情况来分析，一是display类型，二是单行还是多行居中，三是是否事先知道对象的宽高。更加详细请戳参考资料

参考资料

em和rem的区别

  • em的参考对象是父级元素
    • 任意浏览器的默认字体高都是16px，为了简化font-size的换算，需要在css中的body选择器中声明 Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了
  • rem是CSS3新增的一个相对对象，参考对象是HTML对象的根元素
    • 除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小
    • 使用 rem 单位的主要目的应该是确保无论用户如何设置自己的浏览器，我们的布局都能调整到合适大小。
  • 注意不要在多列布局中使用em或rem,改用%。什么时候使用em和rem可以戳一下参考资料链接

    参考资料

  • 何时使用 Em 与 Rem

max-width

使用max-width替代width可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要，调整下浏览器窗口大小可以检查一下。
顺便提下， 所有的主流浏览器包括IE7+在内都支持max-width所以放心大胆的用吧

@media媒体查询

基本格式如以下说示

1
2
3
@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }

1
2
3
@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }

注意大小的顺序，另外也可以这么使用，如以下

1
2
3
@media screen and (min-width: 960px) and (max-width: 1199px) {
    #page{ width: 960px; }#content,.div1{width: 650px;}#secondary{width:250px}select{max-width:200px}
}

使用@media就能做出自适应的布局了

参考资料

columns

  • columns是CSS3的新属性，Internet Explorer 9 以及更早版本的浏览器不支持 column 属性。
  • 属性有Column-count(列的数目)、Column-gap(列的间隔)、Column-width(列的宽度)和Column-rule
  • 前缀 -webkit-,-moz-

参考资料

@import加载CSS文件和link的区别

个人觉得比较重要的五个不同如以下所示：

  • 引用的方式不同
    link(外部引用):

    1
    <link rel="stylesheet" href="xxx.css"  type="text/css"   /  >

    @import(导入式):@import url(xxx.css);

  • 放置的位置不同
    link一般放在head标签中

    @import必须放在<style type="text/css">标签中

  • 加载内容不同
    link可以加载除了css文件外，还可以加载MIME类型的文件
  • 当使用 Javascript 控制 DOM 去改变样式的时候，只能使用 link 方式，因为@import眼里只有CSS，不是 DOM 可以控制的；
  • 加载方式不同
    link会和dom结构一同加载渲染
    @import只能等dom结构加载完成以后才能渲染页面

参考资料

使用CDN

  • 什么是CDN
    CDN的全称是Content Delivery Network，即内容分发网络。是通过在现有的 Internet 中增加一层新的网络架构，将网站的内容发布到最接近用户的网络 “ 边缘 “ ，使用户可以就近取得所需的内容，解决 Internet 网络拥塞状况，提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等原因，造成的用户访问网站的响应速度慢的问题
  • 使用CDN有利有弊

参考资料

Flex布局

Flex布局可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。兼容IE10+。了解更多请看下阮一峰老师的教程。

参考资料