本文共 4087 字，大约阅读时间需要 13 分钟。

目录

---

前言：以下技巧的具体原理和解释请支持张老师的《CSS世界》，在这里不做展开。

           一部分没录入的技巧原因是部分属性将被标准废弃，如：clip。还有一部分是因为个人觉得兼容性不好，而且CSS3的一些特性可以弥补，比如text-align:justify;完全可以用flex布局实现。

1.清除浮动

主要用于子元素浮动（float）之后，父元素无法撑起高度和宽度。

2.文字少时居中，多时靠左

因为div嵌套着p，所以p的尺寸并不会超过Div。但是要注意，当p的内容为英文单词组成的时候，如果单词过长，比如“pppppppppppppppppppppppp”这种甚至更长，会被现为一个单位而造成超出div的尺寸。

如果你想要英文字符也有中文字符的效果的话，在p使用“work-break:break-all”。

3.凹凸man

目的在于制造一个凹或者凸的形状，利用了“2”中英文单词不换行的特性。

4.让padding、border不影响盒模型的大小

相信这点大部分人都知道，但是有一些奇怪的行为，比如说width<content+padding会怎样？事实上当padding+border>width时，元素的渲染大小（Chrome）下为padding+border；而padding+border<width时，会将剩余空间分配给content。

5.height:100%占屏效果

6.任意高度元素展开

缺点是，如果高度太大会造成展开过快和收回延迟，所以这个足够大的值尽量适当。

7.优雅的图片未加载或加载失败效果

需要注意的是，图片显示完毕后，img会成为“替换元素”，而替换元素是无法设置伪元素的，因为content内容被图片替换掉了；还需要注意attr里面的变量不能加双引号。

8.CSS的悬浮图片替换效果

需要注意的是，如果右键保存图片，保存的是src内的图片，而不是替换之后的。

9.利于SEO的“替换元素”标题logo

用h1的原因主要是因为SEO，语义化的问题。

   
Weisman's blog
   

10.高兼容、自动等宽、底部对齐的柱状图

需要注意的是，第一个i不能换行，换行后会产生后移的结果。

 11.高兼容性的加载效果

在IE6-IE9下是...，其他都是动态的；使用dot的目的是语义化和低版本游览器的兼容。

   正在加载
   
    ...
   
   

12.增大点击区域

第一种主要利用了内联元素的padding只会影响外观和不影响布局的特点；第二种针对其他属性会改变背景图定位的一种方式。

   demo
   
   

13.不适用伪元素的“三道杠”和“圆点”效果

14. 导航栏去除右边多余尺寸

利用margin来改变尺寸，需要注意，改变尺寸的元素水平方向的尺寸不能是确定的。

15.正确的滚动底部留白方式

如果使用padding留白，在Firefox和IE不会显示。

16.高兼容的多栏等高

注意container高度不能是确定值，缺点是如果在内部使用锚点定位会出现问题。

   
   
    
    
       
     
正方观点
       
     
观点1
       
     
观点1
    
    
    
    
        
     
反方观点
        
     
观点1
    
    
   
   

17.正确的块级元素右对齐

auto值对于margin来讲是占用剩余的空间。

18.图片上传增加框

此技巧主要说明border的颜色默认是继承自color的。

19.不影响背景图片位置设置边距

和增加点击区第二种方式一样

20.border制作梯形，各种三角形

21.高兼容双栏，一边等宽一边自适应，等高布局

缺点是border不支持百分比，最多2-3栏。

   
   
    
        
    
        
     
      1234
     
    
    
   
   

22.内联元素“近似”垂直居中

至于为什么说“近似”，一句话说不清楚，请看开头。

<！--css-->

23.多行内容“近似”垂直居中

   
   
    
    
     基于行高实现的...
    
   
   

24.容器内图片的垂直方向间隙问题

产生的问题和“幽灵空白节点”和x-height有关，你可以尝试在img前加入x字符观察一下。

25.图标文字对齐

特点是文字大小的改变不会影响对齐。ex代表的是x-height的高度，根据x字形的不同（如font-family）而不同。

   
   
   
    
    
        拉拉    
   
   
   
   
文字
   

26.永远居中的弹框

特点是内容和游览器尺寸变化都是自动变换大小和位置，可以通过伪元素的height控制上下位置。

   
   
    
    
     demo
    
   
   

27.文字环绕图片

float的真正用途。

   
   
    
    
        
         
    
    
    
demo,demo,demo,demo,demo,demo,demo,demo
   
   

28.利用overflow:hidden自定义滚动条

事实上overflow:hidden是可以滚动的，可以通过锚点focus、scroTop滚动。滚动条的实现请自行发挥。

29.通过label实现的选项卡效果

与锚点不同的是不会触发由内到外（多层滚动造成的类似于事件冒泡的效果）的页面跳动（元素上边与窗体上边对齐），还支持Tab选项的效果；缺点是需要js支持选中效果。

   
   
    
    
     1
    
    
    
     2
    
    
    
     3
    
    
    
     4
    
   
   
    
    1    
    2    
    3    
    4
   
   

 30.“包含块”的绝对定位元素“一柱擎天”问题

   
   
    
    
     拉拉
    
   
   

31."无依赖绝对定位"的表单验证应用

一个元素上如果单用（父元素的position属性均是默认）“position:absolute”，事实上元素将原地不动，最终会产生BFC。

   
   
    
    *邮箱    
    
        
             
     邮箱格式不准确（示意）    
    
   
   
        ...
   
   

32.主体页面侧边栏

利用text-align和fixed的组合；height置0和overflow隐藏目的是为了不影响主体的体验，而之所以绝对定位元素没有被隐藏的原因是“如果overflow不是定位元素，同时绝对定位元素和overflow容器之间也没有定位元素，则overflow无法对绝对定位元素进行剪裁。”——《CSS世界》。

33.不通过width和height设置窗体全占用？

利用top和bottom或left和right同时设置的时候回触发流体特性的特点；与通过“top:0;left:0;width:100%;height:100%;”相比，在设置margin、border、padding的时候，不会溢出到窗体的外面（就算你想到box-sizing，那margin呢？）；而之所以用span的原因是想说明绝对定位会将元素的display置为block。

34.margin:auto水平垂直居中

35.纸张卷边阴影

主要利用“position:relative;z-index:0;”创建层叠上下文与z-index的负值将阴影置于"container"和"page"之间。

你可以尝试将关键CSS去掉查看效果。

   
   
    
    
       
     
demo
       
     
demo
    
    
   
   

36.隐藏文字

    说这个主要是为了说明，Chrome游览器如果字体设置12px以下的大小，会被自动处理成12px，但有一个值除外，0。

37.解决text-decoration下划线和文本重叠

因为是内联元素，所以完全不用担心会影响元素高度的问题。

38.自动将输入的小写字母转换大写

39.价格场景下的首个符号选择器

特点是可以让html结构显得干净

   
¥399
   

40.元素隐藏同时资源不加载

后续可通过script.innerHTML访问。

41.头像剪裁矩形镂空效果

主要利用outline。

42.自定义光标

需要注意IE只支持cur文件。

43.修改水平流到垂直流

兼容到IE7；此应用涉及较多东西，所有水平流的特性都可以应用到垂直流中（比如水平居中变成了垂直居中）。

参考博客：   

 

 

 

 

 

转载地址：http://tlcnn.baihongyu.com/