div+css网页布局设计新开端(4)

黄舟
发布: 2016-12-29 14:23:11
原创
1585 人浏览过

首先我们定义个长度宽度为500px的div,你可以看做是一个大盒子,为了能清楚的看到它的存在我们把它的边框显示实线

     
登录后复制

里面将放很多div 你可以理解一个大盒子里装其他小盒子
先放一个把

     
登录后复制

你会看到

589.jpg

图没截完全 ,可以看到这个里面div紧紧贴着大div的左上角

加上

margin-top:5px; margin-left:5px
登录后复制


590.jpg


margin是设置外边距,如果这里设置

margin-right:5px; margin-bottom:5px
登录后复制

不会有效果
因为它的后边和下面没东西

下面看看内边距

     
hello
登录后复制

效果一试就看的出来,非常简单

发现一个问题,在ie6和360浏览器 在div设置了长度和高度的前提下,居然能够自适应,也就是内容无论有很多少,都不会胀破div,但原来的长度和高度改变了
其实这是不符合规范的。火狐浏览器是正常的

     
5555555555555555555555555555555555555555555555555555555555555555555555555


登录后复制

大家可以试试看看,这也算是浏览器兼容问题了

     



登录后复制

在火狐浏览下运行是591.jpg

正确的

在IE6浏览器是592.jpg

错误的


一个div的长度和高度是外边距(两个)+边框(两个)+内边距(两个)+内容长度

反正记住一点,div的长宽度绝对不是指内容的长宽度

以上就是div+css网页布局设计新开端(4)的内容,更多相关内容请关注PHP中文网(m.sbmmt.com)!


来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!