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 */
}

注: clip:rect矩形裁剪只能作用于position:absolute的元素上

10、 contenteditable–让元素标签处于可编辑状态

用处Ⅰ:可实时修改css并显示样式

1
body style { display: block;}
1
2
<style contenteditable>.wrapper { background: orange; padding: 10px;}</style>
<div class="wrapper">上述style可直接在页面编辑,实时显示修改样式</div>

11、 宽度分离

所谓“宽度分离”,就是CSS中的width属性不与影响宽度的border/padding(有时候包括margin)属性共存。看似牺牲一层标签,将width属性放在外层标签,其余的放在内层标签,其实好处很大。
注: box-sizing只能解决width/padding,不能解决margin

12、修复连续单词字符换行

Ⅰ: 对于一般元素,如下

1
word-wrap: break-word; //允许长单词换行到下一行

Ⅱ: 对于pre标签

1
white-space: pre-wrap; // 保留空白符序列,但是正常的进行换行

Ⅲ: 对于td / display:table-cell
注: (不能是应用了display:table-cell的元素)

1
2
3
4
display: table;
width: 100%;
table-layout: fixed; //列宽由表格宽度和列宽度设定
word-wrap: break-word;

word-wrapwhite-spaceword-break的区别

word-wrap: break-word
 在长单词或URL地址内部进行换行(仅用于块元素,内联元素用的话必须设定widthheight or display:block; or position: absolute;

white-space属性设置如何处理元素的空白符(字面意思)
 语法如下:
值             | 描述
normal     | 默认(空白会被浏览器忽略)
pre           | 空白会被浏览器保留。(其行为方式类似于HTML中的pre标签)
nowrap    | 文本不会换行,会在同一行上继续,直到遇到br标签为止
pre-wrap | 保留空白符序列,但正常进行换行
pre-line   | 合并空白符序列,但保留换行符
inherit     | 规定应从父元素继承white-space属性的值

word-break: break-all;
 用于处理单词折断(允许在单词内换行)

13、display:nonevisibility: hidden的区别
① 空间占据
display:none隐藏后的元素不占据空间;
visibility: hidden隐藏后的元素占据空间

display:none隐藏会产生回流和重绘(reflow和repaint);
visibility: hidden隐藏没有影响

display:none隐藏后,子元素不再会显示;
visibility: hidden隐藏后,子元素可通过设置visibility: visible;

-
-
-
-
-
-
-
-
-

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