CSS 技巧和经验列表

1. 如何清除图片下方出现的几像素的空白

方法一:
img{display:block;} 方法二:
img{vertical-align:top;}
除了top值,还可以设置为text-top | middle | bottom | text-bottom,甚至特定的<length>和<percentage>值都可以 方法三:
#test{font-size:0;line-height:0;}
test为img的父元素

2. 设置滚动条的颜色

3. 文本溢出边界显示为省略号

#test{
width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
首先需设置将文本强制在一行内显示,然后将溢出的文本通过overflow:hidden截断,并以text-overflow:ellipsis方式将截断的文本显示为省略号。

4. 如何使连续的长字符串自动换行

方法:
#test{width:150px;word-wrap:break-word;}
word-wrap的break-word值允许在单词内换行

5. 清除浮动

方法一:
#test{clear:both;}
#test为浮动元素的下一个兄弟元素 方法二:
#test{display:block;zoom:1;overflow:hidden;}
#test为浮动元素的父元素。zoom:1也可以替换为固定的width或height 方法三:
#test{zoom:1;}
#test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}
#test为浮动元素的父元素

6. 如何让已知高度的容器在 页面 中水平垂直居中

#test{position:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;}

7. 在不知道自己高度和父元素高度的时候,实现子元素在父元素中的水平垂直居中

方法:
#parent{position: relative;}
#child{position: absolute;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);}

8. 在已知高度的父元素中垂直居中

方法:
#parent{height:xxx;}
#child {position: relative;top: 50%;transform: translateY(-50%);}

9. 去掉超链接的虚线框

方法:
a{outline:none;}
IE7及更早浏览器由于不支持outline属性,需要通过js的blur()方法来实现,如<a onfocus="this.blur();"...

10. 如何在点文字时也选中复选框或单选框?

方法一:
<input type="checkbox" id="chk1" name="chk" /><label for="chk1">选项一</label>
<input type="checkbox" id="chk2" name="chk" /><label for="chk2">选项二</label> <input type="radio" id="rad1" name="rad" /><label for="rad1">选项一</label>
<input type="radio" id="rad2" name="rad" /><label for="rad2">选项二</label>
所有的主流浏览器都支持 方法二:
<label><input type="checkbox" name="chk" />选项一</label>
<label><input type="checkbox" name="chk" />选项二</label> <label><input type="radio" name="rad" />选项一</label>
<label><input type="radio" name="rad" />选项二</label>
该方式相比方法1更简洁,但IE6及更早浏览器不支持

11.如何区别display:none与visibility:hidden?

相同的是display:none与visibility:hidden都可以用来隐藏某个元素; 不同的是display:none在隐藏元素的时候,将其占位空间也去掉;而visibility:hidden只是隐藏了内容而已,其占位空间仍然保留。

12.自动换行 word-break:break-all和word-wrap:break-word的区别

word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。

word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。

13 禁止用户选中文本

user-select:none

14 绘制三角形

CSS 技巧总结的更多相关文章

  1. CSS技巧-rgba函数的妙用

    先简单介绍一下: rgba()函数是平时开发中经常遇到的,这篇文章也做了一个比较详细的解读以及一系列的应用. 对它的工作原理做一番分析:就是具有一定透明度的盒子: 还比较了rgba()函数和不透明度属 ...

  2. 经验分享:多屏复杂动画CSS技巧三则

    当下CSS3应用已经相当广泛,其中重要成员之一就是CSS3动画.并且,随着CSS动画的逐渐深入与普及,更复杂与细腻的动画场景也如雨后春笋般破土而出.例如上个月做的「企业QQ-新年祝福」活动: 感谢sh ...

  3. 多屏复杂动画CSS技巧三则(转载)

    本文转载自: 经验分享:多屏复杂动画CSS技巧三则

  4. 网页设计师必备的10个CSS技巧

    CSS是网页设计师的基础,对CSS的了解能使他们能够设计出更加美观别致的网页.使用CSS技巧来巧妙地处理CSS是非常令设计师着迷的事情.在CSS的深海世界里有很多有意思的东西,你只需要找到最适合你的就 ...

  5. 应该知道的25个非常有用的CSS技巧

    在我们的前端CSS编码当中,经常要设置特殊的字体效果,边框圆角等等,还要考虑兼 容性的问题, CSS网页布局,说难,其实很简单.说它容易,往往有很多问题困扰着新 手,在中介绍了非常多的技巧,这些小技巧 ...

  6. 20个很有用的CSS技巧

    导语:下面这几个CSS技巧你可能不知道,1.彩色照片变黑白,2.所有元素垂直居中,3.禁用鼠标,4.模糊文字,小编学完能量满满的,觉得对CSS又充满了爱,你也来看看. 1. 黑白图像 这段代码会让你的 ...

  7. 50个CSS技巧

    这里我工作中收集了10个很不错的CSS技巧,你可以用在你的项目上.它可以帮你很好地整理你的元素并让他们看起来蛮酷的.下面开始我们的内容,希望你会喜欢它.下面是我收集的CSS技巧,希望能帮助到你,感觉收 ...

  8. 最全的CSS浏览器兼容问题【CSS技巧 】

    CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格 ...

  9. 10个网页设计师必备的CSS技巧(转)

    英文原文:10 Essential CSS Rules for Web Designers CSS是网页设计师的基础,对CSS的了解能使他们能够设计出更加美观别致的网页.使用CSS技巧来巧妙地处理CS ...

  10. 100个实用的CSS技巧,以及遇见的问题和解决方案。

    前言 本篇文章将会持续更新,我会将我遇见的一些问题,和我看到的实用的CSS技巧记录下来,本篇文章会以图文混排的方式写下去.具体什么时候写完我也不清楚,反正我的目标是写100个.  本案例都是经本人实测 ...

随机推荐

  1. POJ 3150 Cellular Automaton(矩阵快速幂)

    Cellular Automaton Time Limit: 12000MS Memory Limit: 65536K Total Submissions: 3504 Accepted: 1421 C ...

  2. mysql source 执行sql脚本,中文变量不显示问题或乱码问题

    执行脚本内容如下: SET @pre_version=2017080901; SET @cur_version=2017090401; SET @ver_desc = '测试脚本'; CALL pro ...

  3. 安装 oracle 11g 发行版 出现错误:由于以下错误,Enterprise Manager配置失败,启动Database Control时出错

    解决方案如下进入dos(1)查看dbconsole状态:emctl status dbconsole 显示:Environment variable ORACLE_SID not defined. P ...

  4. N多条短信,用什么算法从中找出相似内容的来?

    创建树,每个字符为一个节点,对于同一位置字符相同的共用一个节点.最后找出具有公共节点的短信.例如:MessageA "hello,world"MessageB "hell ...

  5. day3-python-文件操作(1)

    本文内容涉及python打开/创建文件对象,文件的读写.文件指针位置的移动.获取命令行参数. 1. open()open函数以指定模式返回一个file对象,如: file_object = open( ...

  6. 用python实现一个计算器

    import re def atom_cal(exp): # 计算乘除法 if '*' in exp: a,b = exp.split('*') return str(float(a) * float ...

  7. myelcipse中SVN进行代码更新和提交

    感谢博主(John的专栏)的奉献,http://blog.csdn.net/tangzenglei/article/details/50175639

  8. eclipse中自动加载源码的方法

    1.选中项目右键properties--java build path--Libraries--Add External class Folder 找到项目将项目添加进去 2.然后就是这样 3.OK

  9. 【leetcode刷题笔记】Find Minimum in Rotated Sorted Array

    Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 migh ...

  10. 一步一步教你读懂NET中IL

    .NET CLR 和 Java VM 都是堆叠式虚拟机器(Stack-Based VM),也就是说,它们的指令集(Instruction Set)都是采用堆叠运算的方式:执行时的资料都是先放在堆叠中, ...