css 盒子模型及其理解

盒子模型：如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css">.parent{width: 1000px;height: 400px;background-color: yellow;border: 2px solid blue;}.red{width: 500px;height: 300px;border: 2px solid red;padding:5px;margin:10px;float: left;}.black{width: 400px;height: 300px;border: 2px solid black;padding:10px;margin:10px;float: right;}</style>
</head>
<body><div class="parent"><div class="red"></div><div class="black"></div></div>
</body>
</html>

蓝色边距的盒子：width:1000px

红色边距的盒子：width:500px,border:2px,margin:10px,padding:5px

它的总宽度为=width+border(左右)+margin(左右)+padding(左右)=534px

黑色边距的盒子：width:400px;border:2px,margin:10px,padding:10px;

它的总宽度为=width+border(左右)+margin(左右)+padding(左右)=444px

蓝盒子width>=红盒子+黑盒子

ps：里面所有的值加到一起一定不能大于父盒子的内容区的宽度width

总的宽度=内容区的宽度width+border(左右)+padding（左右）+margin(左右)

如果设置了浮动，不是正常的文档流，设置了一个margin-right:10px;另一个设置了margin-left:40px;要把所有的margin值相加，之间的距离是10+40=50px

如果不设置浮动，而是正常的文档流，设置了一个margin-bottom:10px，另一个设置了margin-top:40px;如果有叠加取叠加部分的最大值40

如图，下面那个盒子的margin-top会覆盖掉上方盒子的margin-bottom,代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css">.red{width: 500px;height: 300px;border: 2px solid red;margin-bottom: 10px;}.black{width: 400px;height: 300px;border: 2px solid black;margin-top: 40px;}</style>
</head>
<body><div class="parent"><div class="red"></div><div class="black"></div></div>
</body>
</html>

浏览器的兼容问题：

根据w3c的规范，元素内同占据的空间是由width属性设置的，而内容周围的padding和border是另外计算的。

但IE5.X和6在怪异模式下使用自己的非标准模式，这些浏览器的width属性不是内容的宽度，而是内同、内边距和边框的宽度的总和。

解决方法：不要给元素添加具体制定宽度的内边距，而尝试将内边距或外边距添加到元素的父元素和子元素。

IE8及更早IE版本不支持设置填充的框和边框的宽度属性。解决IE8和更早IE版本不兼容问题可在HTML页面设置<!DOCTYPE html>即可

css 盒子模型及其理解相关推荐

[css] 说说你对css盒子模型的理解
[css] 说说你对css盒子模型的理解 css盒模型由两个盒子组成,外在的控制是否换行的盒子,以及内在的控制元素内容的盒子.比如:display: inline-block, 则它的外在的盒子就是i ...
简述对css盒子模型的理解_css 盒子模型理解
盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...
简述对css盒子模型的理解_CSS盒子模型的理解
一 css盒模型由两个盒子组成,外在的控制是否换行的盒子,以及内在的控制元素内容的盒子. 比如:display: inline-block, 则它的外在的盒子就是inline也就是不占据一行,而blo ...
转HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
[css] 说说你对低版本IE的盒子模型的理解
[css] 说说你对低版本IE的盒子模型的理解一个CSS盒子由四部分组成,由内到外依次是:content.padding.border.margin.所谓盒子模型定义的是盒子宽高的计算方法,IE盒子 ...
CSS盒子模型之CSS3可伸缩框属性（Flexible Box）
CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...
[HTML/CSS]盒子模型，块级元素和行内元素
目录概述盒子模型块级元素行内元素可变元素总结概述在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...
php盒子模型,CSS盒子模型介绍
什么是CSS盒子模型?CSS盒子模型是为了让我们充分理解p+css模型的定位功能,盒子模型在学习p+css布局方式中必须要学习的一个模型一.什么是CSS? CSS(Cascading Style S ...
CSS盒子模型之详解
前言: 盒子模型是css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局. 一.css盒子模型概念 CSS盒子模型又称框模型 (Box Model) ,包 ...

css 盒子模型及其理解

css 盒子模型及其理解相关推荐

最新文章

热门文章