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

2016-02-19 17:22 3 1 收藏

最近很多朋友喜欢上设计,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。

【 tulaoshi.com - Web开发 】

  1.若有疑问立即检测

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

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

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

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

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

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

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

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

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

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

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

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

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

  7.记住TRouBLed写法

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

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

  CSS需要您对每个font,Margin等各种值指定单位。(唯一的例外是line-height)

来源:http://www.tulaoshi.com/n/20160219/1615031.html

延伸阅读
1、让宝宝紧贴左胸 因为胎儿在母体内听惯了母亲的心跳,出生后让他再听到这样熟悉的声音会产生一种亲切感,也更容易适应这种情境,从而使情绪平复下来。所以抱宝宝时,要将他的头部放在左侧贴近心脏的位置,让他能听到大人心跳的节律,这样会让他有安全感。 国外曾有人做过实验:当宝宝哭吵时,父母抱起他们,...
标签: Web开发
CSS布局与传统表格(table)布局最大的区别在于:原来的定位都是采用表格,通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距;而现在则采用层(div)来定位,通过层的margin,padding,border等属性来控制版块的间距。 1.定义DIV 分析一个典型的定义div例子: #sample{ MARGIN: 10px 10px 10px 10px;PADDING:20px 10px 10px 20...
标签: Web开发
上一篇 CSS教程 文章:CSS高级技巧:文字环绕图片 布局 CSS至关重要的作用, CSS的设计初衷. CSS布局和几年前table横行时的布局又不太一样, 在结构化语义化的HTML文档后面, CSS在格式化文档的渲染效果, 把结构化文档用表现化语言来描述. 简而言之, 就是CSS不需要表现性标签! CSS布局技术依赖于三个基本概念: 定位, 浮动, margin操纵. 布局...
标签: 婴儿
如何让你的宝宝在同伴中受欢迎 现在有越来越多的研究指出,儿童在0到6岁,就是说6岁前与同伴关系的建立是非常重要的时期。如果在6岁之前建立好良好的同伴关系,对于以后的社会交往是非常有帮助的。所以,今天我想在这里和大家讨论、分享一下这个话题,“如何使我们的宝宝在同伴中更受欢迎”,让他良好的社会关系...
标签: Web开发
    CSS网页布局,说难,其实很简单。说它容易,往往有很多问题困扰着新手,在http://www.knowsky.com/article.asp?typeid=38中介绍了非常多的技巧,这些小技巧与知识能事半功倍的给大家以帮助。然而更多的时候,我们往往被一些小问题缠着不能轻松。今天向大家介绍八个技巧,这些技巧显得很有用。 一、若有疑问立即检测 ...

经验教程

291

收藏

83
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部