html盒子模型代码_css盒模型

目录

普通盒模型
一个盒子模型包括以下东西
怪异盒模型
ie6兼容性问题
什么是css hack
盒子高度不能低于默认字体高度

普通盒模型

CSS 盒子模型(Box Model)，所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

一个盒子模型包括以下东西

content(内容区)、border(边框)、padding(内边距)、margin(外边距)

#box{
	width: 200px;
	height: 200px;
	background-color: red;
	padding: 50px;
	border: 10px solid green;
	margin: 50px 0 0 50px;
}

<div id="box"></div>

示意图：

谷歌浏览器下的盒模型效果

• margin（外边距）： 清除边框区域。margin没有背景颜色，它是完全透明
• border（边框）：边框周围的填充和内容。边框是受到盒子的背景颜色影响
• padding（内边距）： 清除内容周围的区域。会受到框中填充的背景颜色影响
• content（内容）：盒子的内容，显示文本和图像

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距 

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距 

怪异盒模型

标准模式是指，浏览器按W3C标准解析执行代码。怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。目前几乎所有主流浏览器都是使用的是普通盒模型。而在ie6以下则都是怪异盒模型。

ie6兼容性问题

浏览器解析CSS的两种模式：正常模式和怪异模式。

正常模式：宽高确定后，添加内边距，border盒子集体外扩。
怪异模式：宽高确定后，添加内边距，border盒子会向内自减，实际书写内容区域变小。

正常状态下显示效果

怪异状态下显示效果

那遇到这种情况怎么解决呢？这才是重点，我之前对于这个问题百度了一下，发现大多数的答案那是要加文档dtd，而我测试的结果则是失败。所以我又想了一个方案，可以解决这个问题。那就是利用css hack的方式去改变元素的width和height。

.box{
    width: 200px;
    height: 200px;
    padding: 50px;
    background-color: red;
    _width: 300px;
    _height: 300px
}  

这种方法的思路很简单，在ie6以下，给它在padding它是内减的，所以我们直接把它减去的宽高直接又加到该元素宽高上，使用css hack，_width和_height这两句样式只有在ie6下才会起作用，把这两句放在最后，根据后者覆盖前的特点，就能解决这个问题。如果项目要兼容ie6就用这种方式，不然少用为妙，css hack本来就是针对一些老浏览器而存在的。

解决方案：如果项目要兼容ie5、6,则需要使用css hack

什么是css hack

CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

我之前也写过关于css hack的东西，有兴趣可以参考一下：

路奇：HTML之判断IE版本​zhuanlan.zhihu.com

盒子高度不能低于默认字体高度

ie5、6默认是18px，也就是你元素设置的高度最少也要是18px，如果低于18px就以18px显示。其它浏览器照常显示。解决方案也是有的：就是在元素上加上_font-size。这个也是只有在ie6以下才会显示 ，和font-size的效果是一样的。

解决方案：要设置高度的盒子单独设置一个字号属性，属性值小于或者等于要设置的盒子高度