`
- 浏览:
161147 次
- 性别:
- 来自:
成都
-
margin-left , margin-right ,width 三者都可以设置成atuo而其它的如:margin-top ,margin-bottom ,padding不能够设置成auto到,并且只有边界可以为负值,其它的都不能够为负值
对于前三者,如果内补白为0,外边框内容宽度为:400px
情况一:margin-left:100px width:100px margin-right:auto(只设置两者)
则:margin-right:200px
注意:如果前三者中只有一个被设置为auto,而其它两者都设置具体的值,那么设置为auto属性的值为使元素框宽度等于父元素宽度所需要的值
情况二:margin-left:100px width:100px margin-right:100px (三者都设置)
则margin-right:200px ;(之前设置的100px不起作用)
注意:如果三者都设置具体的值,没有一个属性设置为auto,那么margin-right被强制设置成auto
情况三:margin-left:100px width:auto margin-right:100px
等价于 margin-left:100px margin-right:100px
注意:将宽度设置为auto,而其它两者均有值,那么width将会设置为达到父边框内容宽度的值
情况四:margin-left:auto width:100px margin-right:auto
结果将会是width居中,margin-left与margin-right设置成一样的值,这样就可以起到将元素居中的效果 (有的浏览器不支持)
情况五:三者中有两个边界元素之一与宽度设置成auto,那么设置成auto的边界值将自动降为0 如:
margin-left:auto width:auto margin-right:100px ;
情况六:三者均设置为auto,那么边界全为0,这种情况与不设置边界与宽度的默认值一样
如:margin-left:auto margin-right:auto width:auto
结果将会是width的值等于外边框内容的宽度,而对应的内容边界水平值全为0
另外的例子:
li{margin-bottom:20px;}
ul{maring-bottom:-15px;}
h1{margin-top:-18px;}
这样最后得到的结果为:20 + (-18px) = 2px 说明最终ul的底部与h1的顶部之间只有2px的距离
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与...
div+css布局大全 B/S项目表现层也很重要!
清新的CSS表单布局.rar清新的CSS表单布局.rar清新的CSS表单布局.rar清新的CSS表单布局.rar清新的CSS表单布局.rar清新的CSS表单布局.rar清新的CSS表单布局.rar清新的CSS表单布局.rar清新的CSS表单布局.rar清新的CSS...
CSS网站布局实录:基于Web标准的网站设计指南(第2版)》内容提要: 本书是一本讲述基于Web标准的应用CSS进行网站布局设计与重构的典范之作。 本书以实例为主,一步步地告诉大家如何进行符合Web 2.0标准的CSS布局设计。...
内容很实际,如果你做过网页的话,会发现很多你想了很久但做不出来的东西,或者你做出来了,但他告诉你更简单的方法最主要的是你不仅会知道做,还知道原理。
css css布局 css参考 css介绍 最全的css布局 css css布局 css参考 css介绍 最全的css布局 css css布局 css参考 css介绍 最全的css布局
CSS网站布局复习题 CSS网站布局复习题
第二版书籍,一些布局,盒模型,圆角实现,一些兼容性
CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法CSS网页布局DIV水平居中的各种方法
03-00-CSS布局入门 04-01-多级下拉导航 04-01-横向导航传统表格HTML代码 04-01-横向导航系统_CSS布局 04-01-纵向导航系统 04-02-背景高级控制 04-03-表单 04-04-列表元素 04-05-字体样式 04-06-图片样式设计 04-07-...
DIVCSS完美布局
高效学习CSS布局之道:通过244个范例掌握网页样式与布局技术
DIV+CSS网站布局从入门到精通 源代码 朱印宏 邓艳超 编著 北京希望电子出版社 2011年1月 本教程介绍了商业类型的网页设计,以及目前流行的DIV+CSS标准布局方法和实战技法。通过对十个经典案例进行分析,分别从不同...
网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C提出了一...
DIV CSS网页布局经典
div css 网站布局实录,有各种布局的实例demo!
css版式布局 网页布局 层布局 50种网页布局
《CSS网站布局实战》——实例源码包《CSS网站布局实战《CSS网站布局实战》——实例源码包》——实例源码包