永不止步的“重构”

“ ”
Kejun / @kejunz / blog.hikejun.com

Friday, November 11, 2011

05/14/2003


05/14/2003 - 05/2004


7 让们 ......

HTML 结
CSS 实现视觉
Javascript 实现户为


应 HTML / CSS / Javascript
稳扩


术术应

论术规规则


过 hack
仅仅问题远远 ......
满


1. 转过观
2. 术视

3. 观


HTML 结结 UI +10086


....................................................


1. 现发设计HTML结

<span class=”dotline”></span>, <span class=”blank12”></span>

2. 样彻

<div class=”lay_col bg4 clearﬁx”>, <li class=”MIB_linedot_l”>, <div class=”feed_att MIB_linkbl MIB_txtbl”>

3.

<div id=”QM_Container_11” class=”collet_box fn_myLike”>

4. ! !

http://www.bhwdj.com/14/89.html


http://site.douban.com/106371/likers/

1. 结
2. 读
3.
4. 稳


HTML “ ” “对 ”

<div id=”db-tribe-members” class=”mod”>...</div>
<ul class=”list member-list”>...</div>

div.mod, ul.list, ul.member-list
对 div#db-tribe-members 页块


ﬂoat:left; ﬂoat:left;
width:66px; width:316px;


position:absolute;
margin-left:132px

padding-left:132px


block (block formatting context)

满 block
1. float 为none
2. overflow 为visible (IE6 )
3. display设为‘table-cell’, ‘table-caption’, ‘inline-block’
4. position static relative
5. IE hasLayout block formatting context

block formatting context
1. collapsing margins问题
2. 边缘 float box
overflow:hidden;
zoom:1;

float:left;


<div class=”list”> .list .pic {
<ul> ﬂoat: left;
<li> margin-right:10px;
<div class=”pic”> }
<a...><img...></a>
</div> .list .content {
<div class=”content”>...</div> overﬂow: hidden;
</li> zoom: 1;
... }
</ul>
</div>


.list .pic { ﬂoat:left; }


.list .pic { .list .content {
float:left; float:right;
.list .pic { float:left; } width:160px; width:300px; /* Bad */
} }

寻


.list .pic { .list .content {
float:left; float:right;
.list .pic { float:left; } width:160px; width:300px; /* Bad */
} }

寻

发BFC
.list .content {
overflow: hidden;
zoom: 1; /* for IE6/7*/
}


1 宽现

2 ﬂoats suck. CSSLint warning: ﬂoats>10


inline-block ﬂoat

.list {
letter-spacing:-0.31em;
1 inline box 问题
*letter-spacing:normal;
word-spacing-0.43em;
}

.list li {
display: inline-block; 2 IE6/7 inline-block
*display: inline;
zoom: 1;
vertical-align: top;
letter-spacing: normal;
word-spacing: normal;
}


.more-events li { display:inline-block;*display:inline;zoom:1;margin:0 -2px 0 .5ex;padding:0
1ex 0 1ex;border-left:1px solid #aaa;line-height:10px;_margin-bottom:10px;letter-
spacing:normal;word-spacing:normal; }
.more-events li a { _position:relative; } /* hack for IE6 */
.more-events ul { margin-left:-1ex;letter-spacing:-0.31em;*letter-spacing:normal;word-
spacing-0.43em; }


Floats Suck
ﬂoat box 总烦......


Incorrect Float Shrink-Wrap Bug

Float Squeeze Weird Gap Bug

Float Squeeze Duplicate Last Character Bug

Image Float Bullet Chaos Bug

Staircase Bug

Double Margin Bug

Italics Float Bug

3px Jog Bug

Scared of Floats Bug

Escaping Floats Bug

IE6 Peekaboo Bug

......
www.positioniseverything.net
haslayout.net/css/


问题
时风险


“ 议”

http://hikejun.com/blog/2011/10/26/ 试 /
http://hikejun.com/blog/2010/03/19/ html吗/

http://www.ﬂickr.com/photos/kejun/6332927507/in/photostream


发论热对

http://www.slideshare.net/kejun/ss-9015786

http://www.ﬂickr.com/photos/kejun/6332927507/in/photostream


为术术为
统术术
术术
术术


说们 ......
HTML5 / CSS 3


OOCSS
块 HTML/CSS


预编译
CSS/CSS3渐渐变级语 ......


应发
础 ......


“
顺 ”
顺
http://site.douban.com/shengyinsuipian/?s=2629


永不止步的“重构”

Recommended

Recommended

More Related Content

Similar to 永不止步的“重构”

Similar to 永不止步的“重构” (9)

More from Kejun Zhang

More from Kejun Zhang (6)

Recently uploaded

Recently uploaded (20)

永不止步的“重构”