分栏布局

  • column-count:分栏的个数

  • column-width:分栏的宽度

  • column-gap:分栏的间距

  • column-rule:分栏的边线

  • column-span:合并分栏

  • ps:column-countcolumn-width不要一起设置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>分栏布局 By ToDo Blog</title>
    <style>
        .box {
            width: 600px;
            height: 400px;
            border: 1px solid black;
            column-count: 2;
            column-gap: 40px;
            column-rule: 1px dashed green;
        }
        .box h2 {
            column-span: all;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>column分栏布局</h2>
        <p>Multiple-column布局,也称多列布局、多栏布局,我自己喜欢叫做分栏布局,这种布局可以讲内容布局到一组列框,类似于报纸上的排版。</p>
        <p>分栏布局非常特殊,有别于传统布局方法,它将包括包括所有子元素在内的所有内容拆分为列,这与我们打印网页时候时页面内容分割成不同的页面的方式类似。</p>
        <p>分栏布局IE10+都可以使用,API稳定,移动端兼容性比flex布局要好,虽然设计初衷不一样,但很多布局都可以实现。甚至某些场景下,只能使用分栏布局才能实现。很有学习的必要。</p>
    </div>
</body>
</html>

伪类和伪元素

在CSS2.1中对伪类和伪元素的区别比较模糊。CSS3中对这两个概念做了相对较清晰地解释,并且在语法上也做了很明显的区分。

CSS3中规定伪类由一个冒号开始,然后为伪类的名称;伪元素由两个冒号开始,然后为伪元素的名称。

伪类的概念

伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息。通常表示获取不存在与DOM树中的信息,或获取不能被常规CSS选择器获取的信息。

伪元素的概念

伪元素本质上是创建了一个有内容的虚拟容器。这个容器不包含任何DOM元素,但是可以包含内容。另外,开发者还可以为伪元素定制样式。

CSS Hack

CSS Hack用来解决浏览器的兼容性问题,为不同版本的浏览器定制编写不同的CSS效果,使用每个浏览器单独识别的样式代码,控制浏览器的显示样式。

Hack分类

CSS属性前缀法:CSS属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀,以达到预期的页面展示效果。

前缀标识兼容浏览器
_IE6
+、*IE6、IE7
\9IE6、IE7、IE8、IE9
\0IE8、IE9、IE10、IE11

选择器前缀法:选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器,在CSS选择器前加上一些只有某些特性浏览器才能识别的前缀进行hack。

前缀标识兼容浏览器
*htmlIE6
*+htmlIE7
:rootIE9以上以及现代浏览器

IE条件注释法:IE条件注释法是IE浏览器专有的Hack方式,微软官方推荐使用的hack方式。

前缀标识兼容浏览器
<!--[if IE]>...<![endif]-->IE
<!--[if IE 7]>...<![endif]-->IE7
<!--[if lte IE 7]>...<![endif]-->IE7及以下
<!--[if gte IE 7]>...<![endif]-->IE7及以上
<!--[if ! IE 7]>...<![endif]-->非IE7

IE低版本BUG

由于旧浏览器在设计上有很多缺陷,导致一些BUG的产生,所以针对这些问题需要做出兼容处理。

渐进增强与优雅降级

渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

不起眼的小广告

do淘客