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

巴特西

CSS 技巧总结

CSS 技巧和经验列表

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

2. 设置滚动条的颜色

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

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

5. 清除浮动

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

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

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

9. 去掉超链接的虚线框

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

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

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

13 禁止用户选中文本

14 绘制三角形

最新文章

热门文章

巴特西

CSS 技巧总结

CSS 技巧和经验列表

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

2. 设置滚动条的颜色

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

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

5. 清除浮动

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

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

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

9. 去掉超链接的虚线框

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

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

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

13 禁止用户选中文本

14 绘制三角形

最新文章

热门文章

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