8.CSS之盒子模型

最新推荐文章于 2018-08-08 12:02:57 发布

专注的老咪

最新推荐文章于 2018-08-08 12:02:57 发布

阅读量200

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_28501393/article/details/54983226

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、盒子模型的理解

CSS中， Box Model叫盒子模型（或框模型），即定义了内容(content)、填充(padding)、边框(border)、边界(margin)。在HTML文档中，每个元素（element）都有盒子模型。

日常生活中的盒子(箱子)上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。

特点: 每个盒子都有：边界、边框、填充、内容四个属性；

每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。

内容（CONTENT）就是盒子里装的东西；

而填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；

边框(BORDER)就是盒子本身了；至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。

填充只有宽度属性，可以理解为生活中盒子每个HTML标记都可看作一个盒子；

说明：上图中，由内而外依次是
元素内容（content）、
内边矩（padding-top、padding-right、padding-bottom、padding-left）、
边框（border-top、border-right、border-bottom、border-left）、
外边距（marging-top、margin-right、margin-bottom、margin-left）。

那应该选择哪中盒子模型呢？当然是“标准 w3c 盒子模型”了。怎么样才算是选择了“标准 w3c 盒子模型”呢？很简单，就是在网页的顶部加上 doctype 声明。假如不加 doctype 声明，那么各个浏览器会根据自己的行为去理解网页，即 ie 浏览器会采用 ie 盒子模型去解释你的盒子，而 ff 会采用标准 w3c 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。反之，假如加上了 doctype 声明，那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。

------------------------------------------------------------------------------------------------------------------

二、外边距(margin)全面理解和注意事项:

1.全写分别为；margin-top(上边距)、margin-left(左边距)、margin-right(右边距)、margin-bottom(下边距),但通常在我们做具体项目的时候要注意尽量减少这种全写的情况，因为会增加代码，我们应该学会使用下面的简写方式。

2.简写取值如下(取值之间要用空格隔开)：

<1>.取一个值时，代表四个方向例如: margin:5px; 上下左右都是5px；

<2>.取两个值时，第一个值代表上下，第二值代表左右例如:margin:5px 10px 代表上下的margin值为5px，左右的margin值为10px；

注意:通常让一个块级元素(div)居中,我们利用margin进行，margin:0 auto；代表的意思是上下0，auto含义是自动-->左右为auto就是让左右的margin值相等即达到一个居中。但不是所有的居中理解为 margin:0 auto；前提是在正常的文档流中，块级元素在父元素内且子元素的宽度小于父元素的宽度，此时margin的取值中，margin的左右为auto就可以达到居中，例如：margin:auto；margin:5px auto; margin: 5px auto 10px; （三个值的理解详见3）、margin: 5px auto 10px auto; （四个值的理解详见3）。

<3>.取三个值时,例如:margin：5px 10px 20px; 第一个值代表上(margin-top),第二值代表左右(margin-left和margin-right)，第三个值代表下(margin-bottom);

<4>.取四个值时，例如: margin:5px 10px 15px 20px; 取值分别代表为: 上边距右边距下边距左边距；

简单理解为：从上开始顺时针。

3.margin和padding的取值单位解读:

<1> auto ：浏览器计算外边距。

<2>length：规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。

<3> % ：规定基于父元素的宽度的百分比的外边距。

<4>inherit：规定应该从父元素继承外边距。

4.margin重合后存在情况：

由于IE浏览器和非IE浏览器两大阵营对处理margin重叠问题上有较大差异，所以解决margin重叠问题一般是没有什么兼容性的好方法的。一般而言，想这里同向重叠异向重叠的情况同时出现还是比较少见的。在实际项目中遇到重叠只是一部分的重叠。重叠有利有弊，关键是你要了解什么情况下会发生margin重叠，深刻理解它，这样当你不希望发生重叠的时候可以避免出现重叠，希望利用这种重叠属性的就利用它，正所谓，知己知彼，百战百胜。

<1>父子之间margin传递现象：

----在正常的文档流中，父元素的第一个子元素的margin-top会发生传递现象,。

<head>

----对于没有设置高度的父元素而言，其最后一个子元素的margin-bottom也会发生这种现象。

<2>兄弟元素之间重叠现象：

某个元素的margin-bottom和它相邻的下个元素的margin-top会重合后，其会选择大的值作为他们之间的留白区域。

下面提出了些margin重叠的解决方案，但是这些方案都是有缺陷了，在IE浏览器和非IE浏览器下的表现是不一致的。这里仅供参考，拓展思路和理解，您可以想想更加好的解决方法。我个人观点认为最好的解决margin重叠的方法就是认识它，避免它！

<3>解决方案:

单个方块重叠的解决方法：1.浮动。在IE浏览器下（IE8未测过），浮动可以解决margin-top以及margin-bottom重叠的问题。而在Firefox火狐浏览器或是chrome谷歌浏览器下以及opera浏览器下，浮动只能解决同方向上的margin重叠问题。不同方向上的margin重叠的问题依旧存在。

同方向margin重叠的解决方法：1.与清除浮动的方法一致，给外部的box添加清除浮动相同的样式即可。常用的样式代码为：overflow:hidden; zoom:1;但是有问题的是，在IE浏览器下（未测试IE8），应用zoom属性后，似乎发生了水平方向上margin失效的情况。其他表现均一致。

同方向margin重叠的解决方法：2.增加些边缘属性。例如padding值，padding:1px;或是border属性，border:1px solid #cacbcc。此方法在非IE浏览器下效果良好，但是在IE浏览器下，表现很糟糕。

三、padding的取值方式了margin类似，即padding-left:0; padding:10px 10px;

四、border的解读：

<1>border全写：

例如顶部：border-top-width:length;

border-top-style:样式; solid(实线)|dashed(虚线)|dotted(点线)....详见(http://www.w3school.com.cn/cssref/pr_border-style.asp)

border-top-color:颜色取值;

<2>简写:

2.1 border-top:1px solid red;---------->具体的某一个边 (left |right | top| bottom)

2.2 border:4px solid #000;--------->指的是四个边都有

********注意：以上适用块级元素，针对行级元素加入margin-top margin-bottom 不会起作用************