1、 图片与文字对齐问题

图片与文字默认是居底对齐,所以当图片与文字在一起的时候往往都不对齐。

解决办法1:

1
img { vertical-align: text-bottom;}

解决办法2:

1
img { margin-bottom: -3px;}

2、 列表间距边框重叠问题

如果您要用四个div实现5条1像素的左右边框,就像表格一样的效果,就可以使用让每个div都有左右1像素的边框,然后margin-left: -1px; 或者margin-right: -1px; 让之间的边框重叠。

3、 line-height实现多行文字的垂直居中

要实现高度不固定的文字垂直居中使用padding就好了。对于高度固定的div,里面文字单行或多行显示,字体有大有小,方法之一就是借助line-height

解决办法1:

1
2
.line_wrapper { line-height: 150px; font-size: 12px; border: 1px solid #ddd;}
.line { display: inline-block; line-height: 1.5em; vertical-align: middle;}

1
2
3
4
5
6
<div class="line_wrapper">
<div class="line">
<p>这里是高度为150像素的标签内的多行文字,文字大小为12像素。</p>
<p>这里是高度为150像素的标签内的多行文字,文字大小为12像素。</p>
</div>
</div>

附line-height:
line-height

4、 outline

解决办法1:

1
:active { outline: none;} /* 对残疾人士或者键盘用户友好 */

5、 absolute

无定位值的absolute是个连实际宽度都没有的float浮动元素

如果一个absolute的元素的祖先元素中没有非static定位的元素,就按其“初始包含块定位”即根元素htmlbody的包含块,浏览器一般默认设置为视窗大小的一个区域为”初始包含块“。

6、 css样式(reset)

Ⅰ 与默认样式一致

1
2
body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{margin:0;}
ol,liul{margin:0; padding:0;}

① div标签、li标签无marginpadding值;
② dt标签默认marginpadding值就是0;
③ h1标签有默认的margin-topmargin-bottom

Ⅱ 不起作用的单样式

① inline水平的元素对很多CSS样式都不起作用(eg: width/heightclearmargin-top/margin-bottomvertical-alignoverflow
② block水平的元素or设置了浮动属性orabsolute的元素对vertical-align属性不起作用

Ⅲ 组合样式中多余的CSS代码

1
a { display: block; float: left;} /* 对于a/span而言,display属性完全没必要,因为float所产生的“包裹”作用已经让元素如同一个inline-block水平的元素 */


1
div { height: 20px; line-height: 20px;} /* 对于单行文字,设置的line-height多大,其占据的垂直高度就多大,与height无关 */

7、 content内容生成应用

Ⅰ 生成内容(最基本)

1
.content:after { content: attr(href);}

1
<a class="content" href="http://www.baidu.com">此标签的href值是:</a>

Ⅱ 使用计数器创建一系列递增值

1
2
3
4
body { counter-reset: section;}
h1 {counter-reset: subsection;}
h1:before { counter-increment: section; content: "No." counter(section) ": ";}
h2:before { counter-increment: subsection; content: counter(section) "." counter(subsection) " ";}

1
2
3
4
5
6
7
8
<body>
<h1>HTML标题</h1>
<h2>HTML基本应用</h2>
<h2>HTML深入学习</h2>
<h1>JS标题</h1>
<h2>JS基本应用</h2>
<h2>JS深入学习</h2>
</body>

Ⅲ 显示相对应的链接图标

1
2
a[href $= ".pdf"]:after { content: url(img/icon_pdf.png);}
a[rel = date"]:after { content: url(img/icon_date.png);}

1
2
<a href="../book.pdf">pdf文字下载</a>
<a href="http://www.baidu.com" rel="date">日期</a>

8、CSS的渲染方式是–从右向左!!

eg: #test ul
css下: 先渲染页面上所有ul标签,再寻找id为test的元素;渲染速度最慢。
js下获取DOM元素: 先获取ID-test,再获取ul;渲染速度最快。

9、 position隐藏元素

1、 可用性隐藏:
display:none/blcok;visibility:hidden和jquery的show()/hide()/toggle()对于盲人这种借助屏幕阅读器的用户无法阅读隐藏信息。
2、 回流与渲染
使用absolue隐藏于显示元素是会产生重绘而不会产生回流,而使用display:none;不仅会重绘还会回流,DOM影响范围越广,回流越强烈。
3、 配合JS的控制
显示元素(原本非定位元素)的时候只要设置

1
dom.style.position = "static";

下面是方法:

1
.hidden { position: absolute; top: -9999em;}

1
2
3
4
5
6
.hidden {
position: absolute;
clip: rect(1px, 1px, 1px, 1px); /* left = right, bottom = top */
/*clip: rect(10px 10px 10px 100px);*/ /* left > right */
/*clip: rect(100px 10px 10px 10px);*/ /* bottom < top */
}

参考链接:
1、css margin的相关属性,问题及应用 – 张鑫旭
3、css行高line-height的一些深入理解及应用 – 张鑫旭
5、 absolute绝对定位的非绝对定位用法 – 张鑫旭
6、 去除冗余 – 精简您的CSS样式代码 – 张鑫旭
7、 CSS content内容生成技术以及应用 – 张鑫旭