CSS网页布局非常有用的八个技巧

花一样的年纪05

花一样的年纪05

2016-02-19 18:54

下面是个CSS网页布局非常有用的八个技巧教程,撑握了其技术要点,学起来就简单多了。赶紧跟着图老师小编一起来看看吧!

    CSS网页布局,说难,其实很简单。说它容易,往往有很多问题困扰着新手,在http://www.knowsky.com/article.asp?typeid=38中介绍了非常多的技巧,这些小技巧与知识能事半功倍的给大家以帮助。然而更多的时候,我们往往被一些小问题缠着不能轻松。今天向大家介绍八个技巧,这些技巧显得很有用。

一、若有疑问立即检测

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

二、使用浮动功能时记得适当清除指令

  浮动是个危险的功能,未必会产生您所期望的结果。如果您遇到浮动元素延伸到外围容器的边框或者其他不正常情况,请先确定您的做法是正确的。

三、边界重合时利用padding或border来避免

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

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

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

五、不要依赖min-width/min-height

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

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

六、若有疑问,先减少百分比

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

七、记住“TRBL”写法

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

八、只要不是零的值,都要指定单位

  这需要特别注意,很多新手朋友往往忽视这个问题。

展开更多 50%)
分享

猜你喜欢

CSS网页布局非常有用的八个技巧

Web开发
CSS网页布局非常有用的八个技巧

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

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

s8lol主宰符文怎么配

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

css网页设计非常有用的解决办法

Web开发
css网页设计非常有用的解决办法

分享16个非常有用的前端CSS框架

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
分享16个非常有用的前端CSS框架

lol偷钱流符文搭配推荐

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

CSS高级技巧:网页布局

Web开发
CSS高级技巧:网页布局

实用的CSS网页布局25个小技巧

Web开发
实用的CSS网页布局25个小技巧

lolAD刺客新符文搭配推荐

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

css和javascript在IE和Firefox中二十三个不同点

css和javascript在IE和Firefox中二十三个不同点

双生姐妹花 互争吵互相爱

双生姐妹花 互争吵互相爱
下拉加载更多内容 ↓