CSS布局需要掌握的8个你技巧

一剑无血123456

一剑无血123456

2016-02-19 13:39

今天给大家分享的是由图老师小编精心为您推荐的CSS布局需要掌握的8个你技巧,喜欢的朋友可以分享一下,也算是给小编一份支持,大家都不容易啊!
1.若有疑问立即检测

  在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS 都有检测工具可用,请见 http://validator.w3.org 。请注意,在文件开头的错误,可能因为不当的结构等因素造成更多错误;我们建议先修正一些最明显的错误之后重新检测,这样也许会让错误数量爆减。

2.使用浮动功能时记得适当清除指令 

  浮动是个危险的功能,未必会产生您所期望的结果。如果您遇到浮动元素延伸到外围容器的边框或者其他不正常情况,请先确定您的做法是正确的。请参阅Eric Meyer 在Complex Spiral Consulting Web 网站上的教学。

3.边界重合时利用padding或border来避免

  您可能会为了一点不应该出现的空间而焦头烂额,或者您需要一点点空间时,怎样都挤不出来。如果您有用到margin,那么很容易产生边界的重合;Andy Budd在他的网站上解释了可能的做法。

4.尝试避免同时对元素指定padding/border以及高度或宽度

  Windows版IE经常导致width与height的计算问题。有些方法可以解决此问题,但如果母元素需要指定高度与宽度时,最好能够在母元素之内的子元素套用margin,或者当子元素需要指定高度与宽度时,在母元素套用padding以达效果。

5.不要依赖min-width/min-height

  Windows版IE并不支援两种语法。但是在某种程度下,windows版IE可以达到相当于min-width/min-height的效果,所以只要对IE做点过滤功能,即可达到您想要的结果。

6.若有疑问,先减少百分比

  有时候某些错误会使50%+50%成为100.1%,使网页出现问题。这时请尝试将这些值改为49%,甚至49.9%。

7.记住“TRouBLed”写法

  Border,margin与padding的简写语法有特定顺序,从上方开始顺时针方向转动:top,right,bottom,left. 所以margin:0 1px 3px 5px;的结果是上方无边界,右边1像素,以此类推。记住“TRouBLe”,您就不会弄错次序了。

8.只要不是零的值,都要指定单位

  CSS需要您对每个font,Margin等各种值指定单位。(唯一的例外是line-height)
展开更多 50%)
分享

猜你喜欢

CSS布局需要掌握的8个你技巧

Web开发
CSS布局需要掌握的8个你技巧

必须掌握的8个CSS布局技巧

Web开发
必须掌握的8个CSS布局技巧

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

需要掌握的八个CSS布局技巧

Web开发
需要掌握的八个CSS布局技巧

Dreamweaver编写CSS需要掌握的技巧

Web开发
Dreamweaver编写CSS需要掌握的技巧

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

掌握CSS布局网页技巧的完全学习手册

Web开发
掌握CSS布局网页技巧的完全学习手册

完全掌握纯CSS布局网页

Web开发
完全掌握纯CSS布局网页

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Java RMI-IIOP 入门

Java RMI-IIOP 入门

Excel2010怎么插入单元格、行和列

Excel2010怎么插入单元格、行和列
下拉加载更多内容 ↓