CSS 盒子模型
来源:互联网 发布:sql 每小时统计 编辑:程序博客网 时间:2024/06/10 23:53
前端页面布局设计,盒子模型是基础中的基础。盒子模型不复杂,一张图就能说明问题。
1.盒子模型示意图
可以看出,倒霉IE的width=cssWidth+padding+borderWidth,这就是为啥在IE下和firefox、chrome下尺寸经常不一致。
2.既然如此怎么解决呢?
方法一:padding设成0,border设成0,用margin调整边距。但这种方法有一定问题,见3。
方法二:用jQuery调整,jQuery的width ,innerWidth,outerWidth能获得比较精确的尺寸,然后进行调整。
其中width=cssWidth;innerWidth=cssWidth+paddingLeft+paddingRight。
outerWidth()有一个bool参数,表示是否加margin进去。如果不加margin,就是在innerWidth基础上加borderLeft+borderRight,否则还要加上marginLeft+marginRight
方法三:针对IE设计另一套CSS,或使用CSS hack
3. background(-color|-image)指的是padding部分。在IE6里面,content总是白的,后来就变成透明了。因此,2中的方法一,在IE6里面,基本上能丑到爆。
0 0
- 理解CSS盒子模型
- 盒子模型 css
- css盒子模型
- CSS盒子模型
- CSS核心--盒子模型
- CSS核心--盒子模型
- CSS盒子模型
- CSS盒子模型
- DIV+CSS盒子模型
- CSS盒子模型
- css盒子模型
- CSS盒子模型介绍
- CSS+DIV 盒子模型
- CSS盒子模型
- CSS 盒子模型
- CSS盒子模型
- CSS盒子模型详解 .
- css中的盒子模型
- oralce中的5种约束
- Java复习-并发编程之lock
- 统计列表中各个元素的个数并输出
- java 获取 hbase数据 springdatahadoop -- hbasetemplate
- laravel DB类SQL语句操作(CURD)
- CSS 盒子模型
- 并发编程--互斥锁ReentrantLock
- stderr和stdout详细解说
- 加载指定文件的方式,使用getResourceAsStream("fileName")
- GUI_对四则运算案例加入校验和提示
- freemarker中使用shiro标签
- tensorflow实战系列(四)基于TensorFlow构建AlexNet代码解析
- 关于Xfermode中src和dsc的问题
- Java 获取前端页面代码段中img标签的src属性值,即获取图片Url