css中的盒模型是css的基础，盒模型的理解可以帮助我们进行对样式进行修改。废话不多说，进入正题：

在w3c中，CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边框、边框 和 外边框 ，一个盒模型如图：

其中包含了两种盒子:

  • 标准模式：盒子的宽高只有内容的宽高

此时的css设置为：

box-sizing：content-box

  • 另外一种是ie模式：盒子的宽高=内容（content）+填充（padding）+边框（border）的总宽高
  • 此时的css设置为：

box-sizing：border-box

另外提一句border-width：10px 1px 5px 20px      （分别设置的是上，右，下，左）是按照顺时针方向

在js中获取宽高最推荐的方法是：

dom.offsetWidth/offsetHeight

在盒模型中有一个不得不提的现象，那就是外边距合并

所谓外边距合并，简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

在w3c中有一些简单的小例子帮助理解：

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并：

这种情况的html是:

<div></div>

<div></div>

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

这种情况的html是:

<div><div></div></div>

为了解决这个问题，我们可以采用BFC方法

其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文”

bfc的布局规则：

  1. 内部的box会在垂直方向，一个接一个放置（垂直方向可以理解为y轴方向
  2. box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box会发生重叠
  3. 每个元素的margin box的左边，与包含块border box的左边相接触（从左到右）
  4. bfc区域不会与浮动区域的box重叠
  5. bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来里面的元素也不会影响外面的元素
  6. 计算bfc高度的时候，浮动元素也会参与计算

怎么创建bfc：

  1. float不为none
  2. position为absolute或者fixed
  3. display为inline-block，table-cell，table-caption
  4. overflow不为visible

应用场景：

  1. 自适应两栏布局
  2. 清除内部浮动
  3. 防止垂直margin重叠

下面分别举例子说明上述情况：

自适应两栏布局：

<!DOCTYPE html>

<html lang="en">

<head>

    <style>

     body {

    width: 300px;

        position: relative;

    }

    .aside {

       width: 100px;

        height: 150px;

        float: left;

        background:yellow;

        border: 1px solid black;

    }

    .main {

        height: 200px;

        background: pink;

       /* overflow: hidden;*/

    }

    </style>

    </head>

    <body>

            <div class="aside"></div>

            <div class="main"></div>

        </body>

</html>

通过将注释的星号处去掉可以触发bfc，实现自适应

清除内部浮动：

<!DOCTYPE html>

<html lang="en">

<head>

    <style>

    .container{

            border: 10px solid pink;

        width: 550px;

       /*overflow: hidden;*/

    }

  .clear{

      border: 10px solid yellow;

      width: 250px;

      height: 250px;

      float: left;

  }

         </style>

    </head>

    <body>

      <div class="container">

            <div class="clear"></div>

            <div class="clear"></div>

      </div>

        </body>

</html>
通过将注释的星号处去掉可以触发bfc，实现浮动清除

说到浮动清除：

这里谈一种在开发中经常使用的浮动清除方式：使用伪类





<!DOCTYPE html>


<html lang="en">


<head>


<style>


p{


float: left;


width: 50%;


height: 200px;


border: 1px solid yellow;


}


.clearfix{


*zoom:1;


}


.clearfix:after{


content:"";


display:block;


clear:both;


}


</style>


</head>


<body>


<div class="clearfix">


<p></p>


</div>


</body>


</html>




 




防止垂直margin重叠：


<style>


    p {


        color: #f55;


        background: #fcc;


        width: 200px;


        line-height: 100px;


        text-align:center;


        margin: 100px;


    }


</style>


<body>


    <p>我是1</p>


    <p>我是2</p>


</body>


在第二个p外加上一个容器：


<style>


    .wrap {


        overflow: hidden;


    }


    p {


        color: #f55;


        background: #fcc;


        width: 200px;


        line-height: 100px;


        text-align:center;


        margin: 100px;


    }


</style>


<body>


    <p>我是1</p>


    <div class="wrap">


        <p>我是2</p>


    </div>


</body>


												


											
浅谈css中的盒模型（框模型）的更多相关文章
	

    
								
  1. css中的定位和框模型问题
		
    和定位有关的元素属性如下 position  元素的定位类型   绝对定位会相对于最近定位的祖先元素的位置来定位,而不会影响其他框的位置 固定定位 相对定位 z-index   元素的堆叠顺序 值越大 ...
    
		
    2. 
						
  2. 浅谈css中浮动和清除浮动带来的影响
		
    有很多时候,我们都会用到浮动,而我们有时候对浮动只是一知半解,却不是太清楚它到底是怎么回事,不知道各位有没有和我一样的感觉,只知道用它,却不知道它到底是怎么回事,所以,在学习的过程中,就要把一个概念不 ...
    
		
    3. 
						
  3. 浅谈css中的position
		
    什么是position,根据css 2.1中的描述,position和float的值决定了浏览器要采用那种定位算法来计算元素盒子的具体位置.先避开float不谈,本文主要介绍position属性的不同 ...
    
		
    4. 
						
  4. 浅谈css中一个元素如何在其父元素居中显示
		
    css如何垂直居中一个元素的问题已经是一个老生常谈的问题了.不管对于一个新手或者老手,在面试过程中是经常被问到的.前两天在看一个flex的视频教程,当中提到了有关元素的居中问题,所以今天小编就来扒一扒 ...
    
		
    5. 
						
  5. 浅谈博弈论中的两个基本模型——Bash Game&&Nim Game
		
    最近在数学这一块搞了蛮多题目,已经解决了数论基础,线性代数(只有矩阵,行列式待坑),组合数学中的一些简单问题.所以接下来不可避免的对博弈论这一哲学大坑开工. 当然,由于我很菜,所以也只能从最基础最容易 ...
    
		
    6. 
						
  6. 浅谈CSS中的定位知识
		
    1,静态定位(static) 表示按照正常定位方案,元素盒按照在文档流中出现的顺序依次格式化: 2,相对定位(relative) 将移动元素盒,但是它在文档流中的原始空间会保留下来: 相对定位元素有如 ...
    
		
    7. 
						
  7. 浅谈css中的position属性
		
    我觉得吧,css如果不考虑浏览器的兼容问题的话,最让人头疼的应该就是position了,反正我是这么觉得的,为了能基本上搞清楚position的几种情况,我找了一些资料,做了一个小实验,下面是实验的过 ...
    
		
    8. 
						
  8. 浅谈CSS中的百分比
		
    结论: 标准流中的元素,看其属性有没有继承性.对于width和margin-left,它是可以继承的,它会参照父元素或者祖先元素(其实是包含块):对于height,它没有继承性,父元素或者祖先元素会自 ...
    
		
    9. 
						
  9. 浅谈css中单位px和em，rem的区别-转载
		
    px是你屏幕设备物理上能显示出的最小的一个点,这个点不是固定宽度的,不同设备上点的长宽.比例有可能会不同.假设:你现在用的显示器上1px宽=1毫米,但我用的显示器1px宽=两毫米,那么你定义一个div ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 微信APP支付，支付宝APP支付demo
			
    最近公司新开发的APP中,需要集成微信支付和支付宝支付,2个平台申请的都是APP支付.这是个人第一次单独的,完整的做完2个平台的支付. 这里我主要用到了2个接口:支付接口,订单查询接口,虽然2个平台的 ...
    
			
    2. 
						
  2. 【app】adb连接问题整理
			
    如果使用adb devices进行检测,发现没有任何设备信息,我们就需要检查是否有手机/模拟器连接上 如果是手机进行连接,windows右下角有出来如下提示的话,需要检查你的手机驱动是否有安装好 如果 ...
    
			
    3. 
						
  3. 【app】自动化环境搭建（Appium）for java
			
    Appium来做app自动化相信大家都很熟悉了吧,就不再赘述他的概念和作用了,我们接下来着重介绍怎么来搭建整个app自动化环境,整个环境包括如下几个步骤: 1.安装jdk和eclipse及配置jdk的 ...
    
			
    4. 
						
  4. H5在WebView上开发小结
			
    背景 来自我司业务方要求,需开发一款APP.但由于时间限制,只能采取套壳app方式,即原生app内嵌webview展示前端页面.本文主要记述JavaScript与原生app间通信,以及内嵌webvie ...
    
			
    5. 
						
  5. ExternalException (0x80004005): 无法执行程序
			
    今天更新系统上传到阿里云服务器,报错如下: “/”应用程序中的服务器错误. 组策略阻止了这个程序.要获取详细信息,请与系统管理员联系. 说明: 执行当前 Web 请求期间,出现未经处理的异常.请检查堆 ...
    
			
    6. 
						
  6. 移动端Web开发,ios下 input为圆角
			
    在处理input的问题时,一般不想要input的原来的样式,一般就直接处理 border: none; outline: none; background: transparent; 这样之后,一般就 ...
    
			
    7. 
						
  7. vue 关于图片路径的问题
			
    在vue 中,当我们想加载assets中的图片,本人按照多年的开发经验会这样写,那是没问题的 <img src="../assets.1.jpg"/> 如果我要用v-b ...
    
			
    8. 
						
  8. CDlinux系统破解无线wifi
			
    CDlinux是破解无线wifi信号的很好用的系统.它就像一个PE,不过它是基于Linux内核的微型系统.里面的破解工具很齐全,既有传统的抓包工具,也有最新的PIN码破解软件,而且针对windows用 ...
    
			
    9. 
						
  9. Java线程之 InterruptedException 异常
			
    Java线程之 InterruptedException 异常   当一个方法后面声明可能会抛出InterruptedException 异常时,说明该方法是可能会花一点时间,但是可以取消的方法. 抛 ...
    
			
    10. 
						
  10. [Java 泥水匠] Java Components 之一：Java String （肯定有你不懂的）
			
    作者:泥沙砖瓦浆木匠网站:http://blog.csdn.net/jeffli1993个人签名:打算起手不凡写出鸿篇巨作的人,往往坚持不了完成第一章节. 1.1 前言 说起String,大家最熟悉不 ...
    
			
    11.