[翻译]标记语言和样式手册 Chapter 12 CSS布局（9）
作者：zhaozy 来源：3user.com 发布时间：2008-02-13 14:19:00
技巧延伸
现在我们经过了建立基本CSS布局的基础,该是讨论Windows版Internet Explorer 5与5.5版,以及它们错误解析CSS盒模型这个不幸问题的时候了.稍后也会分享一个通过平铺背景图片达成等高栏位布局的秘密技巧.
盒模型问题
本章开始的时候我们讨论了建立多栏CSS布局的方法,只用width属性定义每栏的宽度,当你开始为这些栏位加上补丁,边框的时候,事情就变得有些复杂了.为什么?
不幸的是,Internet Explorer 5 for Windows在加上内外补丁,边框的时候,无法正确计算外包元素的宽度.
举例来说,除了IE5 for Windows之外,所有支持CSS1的浏览器都会将外包元素的宽度计算为宽度,内补丁,边框三者相加,这是W3C希望所有浏览器处理CSS盒模型的方式.
但是IE5 for Windows会将边框和内补丁算在指定的宽度之内,搞混淆了?不用担心,直接看看问题会对你有所帮助.
眼见为实
比较一下图12-11和12-12,图12-11是个200像素宽的元素,两侧各有10像素的内补丁,以及5像素的边框,把水平部分的数值全加起来,就能知道实际宽度为230像素.
图12-11 盒模型的正确计算结果
图12-12 IE5 for Windows 错误的内补丁,边框,宽度计算结果
这是符合设计的盒模型:width属性总是定义元素的内容范围,而内补丁,边框则会加到这个数值上.因此,如果将侧边栏的宽度定义成200像素然后加上内补丁和边框,CSS的声明如下:
#sidebar {
width: 200px;
padding: 10px;
border: 5px solid black;
}
把宽度设定为200像素,但是侧边栏实际需要230像素的空间,除了IE5 for Windows以外. IE5 for Windows 里侧边栏总共会占用200像素,把内补丁和边框都算在里面.
图12-12 显示的是当width属性指定为200像素时,边框和内补丁会占用内容空间,而不是内容空间之外.
0
投稿猜你喜欢
- 认为整理的还比较详细的，亲们，就快点收藏起来吧！PHP系统类函数assert函数：检查assertion声明是否错误extension_lo
- declare @id
- 本文实例为大家分享了python实现银行系统的具体代码，供大家参考，具体内容如下1、admin.py 定义管理员信息和主界面显示#!/usr
- 写在之前这几天的阅读量蜜汁低，是什么原因我也没搞清楚，如果你们觉得我哪里写的有问题，或者是哪里不好，欢迎后台或者微信告知我，先行谢过。昨天的
进程进程是操作系统分配资源的基本单元，是程序隔离的边界。进程和程序程序只是一组指令的集合，它本身没有任何运行的含义，它是静态的。进程程序的执- 一、概论C4.5主要是在ID3的基础上改进，ID3选择（属性）树节点是选择信息增益值最大的属性作为节点。而C4.5引入了新概念“信息增益率”
- 1比如python提倡简单实用的思想，它就没有switch语句，如果要实现switch语句的效果 的话可以通过2个方法来写把 (1)通过if
- 引言“ 这是MySQL系列笔记的第八篇，文章内容均为本人通过实践及查阅资料相关整理所得，可用作新手入门指南，或
- 项目地址是：https://www.chenshiyang.com/dytk接下来我们分析下源码简要看下实现原理。实现原理该项目不需要使用模
- 本文实例讲述了js实现点击后将文字或图片复制到剪贴板的方法，代码非常简洁实用，具体功能代码如下所示：实现复制文字代码：<table w
- 项目中需要实现人脸登陆功能，实现思路为在前端检测人脸，把人脸照片发送到后端识别，返回用户token登陆成功前端调用摄像头使用tracking
- unittest是python的一个单元测试框架关于断言它是用于对一个确定结果和预测结果的一种判断，如果结果正确无任何返回效果，如果结果错误
- 本文实例为大家分享了python tkinter实现简单计算器的具体代码，供大家参考，具体内容如下效果图直接上代码import tkinte
- 1.连接查询作用:当查询结果的列来源于多张表时，需要将多张表连接成一个大的数据集，再选择合适的列返回2、连接类型内连接定义：内连接查询：查询
- PIL和PillowPIL（Python Image Library）是一个非常流行的Python图像处理库，但自从2011年以来就没有更新
- 我就废话不多说啦，大家还是直接看代码吧！import requests,randomfrom lxml import etreeimport
- 数据可视化是数据科学或机器学习项目中十分重要的一环。通常，你需要在项目初期进行探索性的数据分析（EDA），从而对数据有一定的了解，而且创建可
- 遇到两次mysql密码忘记了？最开始干了最傻的事，卸载了重装。现在有一个不用卸载也能把密码设置回来的办法。知识来源于网络，我这里稍加整理，遇
- having的用法 having子句可以让我们筛选成组后的各种数据，having子句在查询过程中慢于聚合语句(sum,min,max,avg
- 本文实例总结了php遍历目录方法。分享给大家供大家参考。具体如下：1. 方法1 <?p
