-
IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding，即width和height的计算会包含这三个部分。
在网页的顶部加上DOCTYPE声明的话，所有浏览器都会按照W3C的标准来判定盒子模型。 -
共有三种方法：
- 知道块级元素本身的宽度和高度，先用margin向下向右挤50%，再向中间移回位置：
.div{ width:200px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -100px } - 利用CSS的margin设置为auto让浏览器自己帮我们水平和垂直居中：
.div{ position: absolute; left: 0px; right: 0; top: 0; bottom: 0; margin: auto; height: 200px; width: 200px; } - 使用transform：
.div{ width: 100px; height: 100px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
- 知道块级元素本身的宽度和高度，先用margin向下向右挤50%，再向中间移回位置：
| display: none | visibility: hidden |
|---|---|
| 隐藏元素及元素内的所有内容，并且该元素的位置、宽高等其他属性值一并“消失 | 隐藏元素及元素内的所有内容，并且该元素的位置、宽高等其他属性值一并“消失 |
| 是彻底消失，不在文档流中占位，浏览器也不会解析该元素 | 是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素 |
| 切换显示时页面产生回流 | 切换是否显示时则不会引起回流。 |
第一个
<head>
<style>
.left{
position:fixed;
float:left;
width:30%;
height:100%;
background-color: blue;
}
.right{
margin-left:30%;
position:absolute;
width: 70%;
height:100%;
background-color: red;
}
</style>
</head>
<body>
<div class="total">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
<head>
<style>
.total{
width:1200px;
height:800px;
}
.left{
float:left;
width:30%;
height:100%;
background-color: blue;
}
.right{
margin-left:30%;
width: 70%;
height:100%;
background-color: red;
}
</style>
</head>
<body>
<div class="total">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
第二个
<head>
<style>
.total{
width: 1200px;
height: 800px;
}
.left{
float:left;
width:100px;
height:100%;
background-color: blue;
}
.right{
float:right;
width: 100px;
height:100%;
background-color: red;
}
.mid{
margin-left:100px;
margin-right:100px;
height:100%;
background-color: burlywood;
}
</style>
</head>
<body>
<div class="total">
<div class="left"></div>
<div class="right"></div>
<div class="mid"></div>
</div>
</body>
- visible： 不剪切内容。
- hidden： 将超出对象尺寸的内容进行裁剪，将不出现滚动条。
- scroll： 将超出对象尺寸的内容进行裁剪，并以滚动条的方式显示超出的内容。
- auto： 在需要时剪切内容并添加滚动条，此为body对象和textarea的默认值。
网友评论