心灵咖啡

 找回密码
 注册加入
查看: 1230|回复: 0
收起左侧

[网络代码] 居中布局CSS+div

[复制链接]
发表于 2017-5-17 11:42:06 | 显示全部楼层 |阅读模式
定义和用法
margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

说明
这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心。

注释:允许使用负值。

实例
例子 1
margin:10px 5px 15px 20px;
上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px

例子 2
margin:10px 5px 15px;
上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px

例子 3
margin:10px 5px;
上外边距和下外边距是 10px
右外边距和左外边距是 5px

例子 4
margin:10px;
所有 4 个外边距都是 10px


默认值:        0
继承性:        no
版本:        CSS1
JavaScript 语法:        object.style.margin="10px 5px"

可能的值

值                       描述
auto                 浏览器计算外边距。
length         规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。
%                 规定基于父元素的宽度的百分比的外边距。
inherit         规定应该从父元素继承外边距



======================

如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢?
需要的主要css代码有两个,一个为text-align:center(内容居中),另外一个为margin:0 auto;其两个样式需要配合使用才能实现div盒子的居中显示排版。
首先我们对body设置text-align:center,再对需要居中的div盒子设置css样式margin:0 auto,这样即可让对应div水平居中。
实例讲解div居中代码应用,为了观察div居中效果,我们对div设置一个div命名为“.div”在html中div标签内使用class=“div”,设置其宽度为400px;高度为100px,边框为红色。以便我们观察效果。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>div居中 在线演示 www.divcss5.com</title>
  6. <style>
  7. body{ text-align:center}
  8. .div{ margin:0 auto; width:400px; height:100px; border:1px solid #F00}
  9. /* css注释:为了观察效果设置宽度 边框 高度等样式 */
  10. </style>
  11. </head>
  12. <body>
  13. <div class="div">
  14. DIVCSS5实例
  15. </div>
  16. </body>
  17. </html>
复制代码
参考资料:http://www.w3school.com.cn/cssref/pr_margin.asp
http://www.divcss5.com/rumen/r622.shtml

——论坛程序问题,请给 qq124627513(微信同步)留言。(系统默认签名,点击修改
您需要登录后才可以回帖 登录 | 注册加入

本版积分规则

广告
广告位
广告位
广告位
关闭

站长推荐上一条 /1 下一条

QQ|联系我们|手机版|小黑屋|Archiver|心灵咖啡 ( 粤ICP备16121829号-1 )

GMT+8, 2024-7-25 00:24 , Processed in 0.063842 second(s), 24 queries .

Powered by Discuz! and 心灵文学

Copyright © 2001-2021, Tencent Cloud.


本站文章为原创会员所有,未经许可禁止去版权转载,但欢迎分享本站文章链接!另,若有抄袭侵权,联系即删禁。
快速回复 返回顶部 返回列表