盒子模型是html+css中最核心的基础知识，理解了这个重要的概念才能更好的排版，进行页面布局。下面是自己积累和总结的关于css盒子模型的知识^_^，希望对初学者有用。

一、css盒子模型概念

CSS css盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如图：

图中最内部的框是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距padding，其次是边框（border），然后最外层是外边距（margin），整个构成了框模型。通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距margin是透明的，不会遮挡周边的其他元素。

那么，元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；

元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。

二、css 外边距合并（叠加）

两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值，如图：

比较容易理解，所以在页面中有时候遇到实际情况是需要考虑这个因素的。当然外边距合并其实也有存在的意义，如下图：

需要注意的是：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

css reset 中也会经常用到

  1. * {
  2.   margin :;
  3.   padding :;
  4. }

三、box-sizing属性介绍

box-sizing属性是用户界面属性里的一种，之所以介绍它，是因为这个属性跟盒子模型有关，而且在css reset中有可能会用到它。

box-sizing : content-box|border-box|inherit;

(1) content-box ,默认值，可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。

　　即总宽度=margin+border+padding+width

(2) border-box , 设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容

　　　　即总宽度=margin+width

很多CSS框架，都会对盒子模型的计算方法进行简化。

(3) inherit , 规定应从父元素继承 box-sizing 属性的值

关于border-box的使用：

1 一个box宽度为100%，又想要两边有内间距，这时候用就比较好
2 全局设置 border-box 很好，首先它符合直觉，其次它可以省去一次又一次的加加减减，它还有一个关键作用——让有边框的盒子正常使用百分比宽度。

四、实际开发中遇到的和框模型相关的应用及小问题。

1 margin越界（第一个子元素的margin-top和最后一个子元素的margin-bottom的越界问题）

以第一个子元素的margin-top 为例：

当父元素没有边框border时，设置第一个子元素的margin-top值的时候，会出现margin-top值加在父元素上的现象，解决方法有四个：

（1）给父元素加边框border （副作用）

（2）给父元素设置padding值  （副作用）

（3）父元素添加 overflow：hidden （副作用）

（4）父元素加前置内容生成。（推荐）

以第四种方法为例：

  1. .parent {
  2.      width : 500px;
  3.      height : 500px;
  4.      background-color : red;
  5. }
  6. .parent : before {
  7.      content : " ";
  8.      display : table;
  9. }
  10.  
  11. .child {
  12.      width : 200px;
  13.      height : 200px;
  14.      background-color : green;
  15.      margin-top : 50px;
  16. }
  1. <div class="parent">
  2.     <div class="child"></div>
  3. </div>

2 浏览器间的盒子模型。

（1）ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。

（2）标准盒子模型与IE模型之间的差异：

　　标准的盒子模型就是上述介绍的那种，而IE模型更像是 box-sizing : border-box; 其内容宽度还包含了border和padding。解决办法就是：在html模板中加doctype声明。

3 用盒子模型画三角形

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <style>
  5.         .triangle {
  6.             width : 0;
  7.             height: 0;
  8.             border : 100px solid transparent;
  9.             border-top : 100px solid blue; /*这里可以设置border的top、bottom、left、right四个方向的三角*/
  10.         }
  11.     </style>
  12.   </head>
  13.   <body>
  14.     <div class="triangle"></div>
  15.   </body>
  16. </html>

页面显示结果为：

end~~~ ^+^

2016.7.22

css 盒子模型理解的更多相关文章

  1. CSS盒子模型的理解

    标准的CSS盒子模型包括:内容(content).填充(padding).边框(border).边界(margin) 这些属性,可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子 ...

  2. 理解CSS盒子模型

    概述 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性. 这些属性我们可以把它转移到我 ...

  3. <转>HTML+CSS总结/深入理解CSS盒子模型

    原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...

  4. 深入理解CSS盒子模型

    在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...

  5. css盒子模型的深入理解，在块级、行内元素的区别和特性

    css盒子模型用于处理元素的内容.内边距.边框和外边距的方式简称.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的 ...

  6. 几个容易出错的css盒子模型细节

    css是前端必须掌握的技能之一.其中的box模型,如图所示: 大体就是border.margin.padding和content,概念挺好理解.但当盒子模型与其他属性一块使用时产生的现象,或许您还难以 ...

  7. 聊聊css盒子模型

    css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以 ...

  8. CSS盒子模型之详解

    前言:        盒子模型是css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.一.css盒子模型概念    CSS盒子模型 又称框模型 (Box Model) ,包含了元 ...

  9. 前端面试必备的css盒子模型

    今天同学发给了我一份前端基础的面试题,第一道便是对css盒子模型的理解,我看到的第一眼想到的是div,然后就...懵逼了,知其然不知其所以然.所以打算写一写盒子模型的概念理解啥的,如有写的不当的地方, ...

随机推荐

  1. jquery timepicker

    <div class="form-group row"> <div class="col-lg-2 control-label l-pd25" ...

  2. 如何创建一个有System用户权限的命令行

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:如何创建一个有System用户权限的命令行.

  3. iOS与HTML5交互方法总结（转）

    今天小编在找技术文章的时候,发现这样一个标题:iOS与HTML5交互方法总结,怎么看着这么熟悉呢?   还以为是刚哥用了别的文章,点进去一看,原来是刚哥自己写的文章,他们转载的,而且还上了Dev St ...

  4. SQLite使用教程4 创建数据库

    http://www.runoob.com/sqlite/sqlite-create-database.html SQLite 创建数据库 SQLite 的 sqlite3 命令被用来创建新的 SQL ...

  5. protocol buffer的简单使用

    protocol buffer是一个高效的结构化数据存储格式,用来结构化数据的序列化与反序列化.目前支持java.c++.Python 相对于json而言: 数据量跟小 其他的还没看出什么优势 下载地 ...

  6. 获取mp4文件信息

    计算电影长度 方法1 从mvhd - movie header atom中找到time scale和duration,duration除以time scale即是整部电影的长度. time scale ...

  7. 例3-12opencv设置ROI感兴趣区域

    前面说了一堆,也不知道啥用,感觉也没说清楚,可能确实需要一些例子来显性表示一下,或者他们在当初出版书籍针对的人群已经有了对图像的基本认识,然而自己还是没有建立起来,往后看看吧,希望能比较清楚的自己处理 ...

  8. C++第五章函数

    书上的点: 这次直接写写画画了,遇到的bug也就直接敲了,忘记记录了,好在都在书上,所以勾画一下,提一下.发现每一章后面的小结,都蛮有意思的.可以抄一遍. 1.返回值的函数成为返回值函数(value- ...

  9. div 块跟随 鼠标点击

    js: $(document).ready(function () { $(".company-contact ul li").click(function (ev) {      ...

  10. 远程通信Socket

    网络通信高性能的三个主题: 1) 传输:用什么样的通道将数据发送给对方,BIO.NIO或者AIO,IO模型在很大程度上决定了框架的性能: 2) 协议:采用什么样的通信协议,HTTP或者内部私有协议.协 ...