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

2016-02-19 13:39 4 1 收藏

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

【 tulaoshi.com - Web开发 】

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)

来源:https://www.tulaoshi.com/n/20160219/1604873.html

延伸阅读
标签: Web开发
div css表单布局的五个小技巧可以帮助你更灵活的控制表单,使页面更加满意。 1、表单文本输入的移动选择: 在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息。其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到 textarea 中,一切就会变得简单多了,如:  Example ...
标签: Web开发
对CSS网页布局的技巧,可谓是名目繁多。这里将适合新手的CSS网页布局的小技巧总结出来,或许对您更有实际的参考价值: 1、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。 2、同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次;对一个标签同时使用class和id进行CSS定义,如果定义有重复,id选...
标签: 减肥 黑茶 瘦身
喝黑茶的功效与作用        黑茶作为六大茗茶之一,因为颜色外观深黑,茶香醇厚浓重,非常适合饮用调和身体。特别是生产自四川、重庆、云南等地的原茶更是广受品茶爱好者的欢迎。       因为黑茶主要是将粗糙的新鲜茶叶,通过杀青、碾压、堆握、沥干等工序将其制作成干燥清香的发酵茶。因为这种产品在制...
标签: Web开发
CSS布局与传统表格(table)布局最大的区别在于:原来的定位都是采用表格,通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距;而现在则采用层(div)来定位,通过层的margin,padding,border等属性来控制版块的间距。 1.定义DIV 分析一个典型的定义div例子: #sample{ MARGIN: 10px 10px 10px 10px;PADDING:20px 10px 10px 20...
标签: Web开发
如果想熟练掌握DIV和CSS的布局方法,首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin),如图1所示。 图1 盒模型图解 填充、边框和边界都分为上右下左四个方向,既可以分别定义...

经验教程

647

收藏

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