CSS中box(盒模式)的分析
2023-06-13 09:13:41 时间
W3C定义的盒模式如下:
width和height定义的是Content部分的宽度和高度,paddingbordermargin的宽度依次加在外面。背景会填充padding和content部分。
但是由于浏览器设计上的问题,不同浏览器显示效果会有些不同。
左右Margin加倍的问题
当box为float时,IE6中box左右的margin会加倍
左面的inner的左面margin明显大于5px。
这时候,定义inner的display属性为inline。
外层box自动计算高度的问题
根据W3C定义,没有float属性的外层box不会自动计算高度,要计算高度,必须在内层最后一个box加入clear:both。
Opera、netscape、mozilla等不会计算外层box高度,但是微软ie6会自动计算外层高度。
上面的代码在ie中有黑色的背景,但是没有正确的计算上下的margin,在inner2下面加上一个包含clear:both属性的div后,可以正确计算margin。但是firefox中仍然没有黑色背景,通常的解决办法是定义一下clear:both这个div的高度,或者插入全角空格,这样就必须增加额外的高度。网上一种比较好的解决办法是在外层div中加入overflow属性,同时使用clear:both,这样就不会增加额外的高度了。
因此,外层css要定义overflow属性,内层最后要加上clear属性。
居中问题
需要定义元素的宽,并且定义横向的margin,如果你的布局包含在一个层(容器)中,就象这样:
你可以这样定义使它横向居中:
#wrap{
width:760px;/*修改为你的层的宽度*/
margin:0auto;
}
#outer{
text-align:center;
}
#wrap{
width:760px;/*修改为你的层的宽度*/
margin:0auto;
text-align:left;
} 第一个#outer的text-align:center;规则定义IE5/Win中#outer的所有元素居中(其他浏览器只是将文字居中),第二个text-align:left;是将#warp中的文字居左。
因此,在有居中元素的css中,外层css要定义text-align:center属性,内层居中用margin:xautoxauto定义,并重新定义text-align。
相关文章
- 使Edge浏览器打开仅支持IE兼容模式的网站
- css opacity属性_CSS中的opacity属性[通俗易懂]
- php 抽象工厂模式
- 代理模式二
- linux进入命令行模式_pycharm的terminal
- CSS媒体查询_css网页
- 混合式 App 开发模式下的热更新技术方案,你知道多少?
- python多种创建工厂模式场景
- 画图搞懂集群模式下zookeeper的ZAB协议如何保证数据一致性
- 设计模式-观察者模式
- Litespeed Cache https模式下css/js 加载失败
- 【CSS教程】简约渐变色登陆布局html+css代码
- 【CSS】标签显示模式 ① ( 标签显示模式 | 块级元素 )
- 【CSS】标签显示模式 ④ ( 标签显示模式示例 | 设置行内元素宽高 | 设置鼠标经过样式 | 设置文字水平居中 | 设置文字垂直居中 | 文本行高与盒子高度关系 )
- 代理模式:静态代理与动态代理详解程序员
- MySQL严格模式:优雅而安全的数据库管理方式(mysql严格模式)
- Java Connection.setAutoCommit()方法:设置数据库连接的提交模式
- Linux串口独占模式技术剖析(linux串口独占)
- 在Oracle中启用兼容模式运行(oracle兼容模式运行)
- CSS如何影响MySQL的使用(css影响MySQL)
- CSS与MySQL合力提升网页性能(css与mysql结合)
- 深入浅出ORACLE六大锁模式(ORACLE六大锁模式)
- 重新定义运行后端模式启动Redis(后端模式启动redis)
- Redis集群中模式不平衡的解决之道(redis集群模式不均衡)
- Redis集群事件模式浅析(redis集群事件)
- CSS规则层叠的应用css必须要注意的几点
- 简单的加密css地址防止别人下载你的CSS文件的方法