盒模型

谈到盒模型，有经验的小伙伴一定滚瓜烂熟，无非就是 内容(content)、填充(padding)、边框(border)、边界(margin)；

这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。

先上图：

上图清晰的表明了盒模型的具体表现样式； margin外边距+border边框+padding内边距+content内容；

既然盒模型叫做盒模型~那么我们可以把它比作一个 液晶屏幕包装盒子（楼主刚刚买了一台，所以拿它来比喻了，大家都知道的 这玩意儿快递的时候padding可不少啊）  拆快递的时候，里面的显示屏就是内容（content） 而泡沫呢？就是内边距（padding）  外面的壳子就是（border）  然后呢 就是盒子与其他盒子之间的距离（margin） 这就组成了我们css中的盒模型；

css中盒模型有很多种表现形式：其中 block（块状）、inline（行内）、（inline-block以块状形式表现的行内元素） 设置css display可以改变盒子的表现形式 下面会详细介绍

个人觉得css可以这么去理解：它规定了盒子的包装样式，盒子的摆放位置，盒子的长宽高等等等等，浏览器就像是一个房子，等待人们用箱子填满它；

下面呢，楼主简单介绍一下 内容(content)、填充(padding)、边框(border)、边界(margin)在css中的具体表现，以及他们所带的看似bug的另类属性。

1.内容(content)

　　内容包括了文本，块状盒子，图片，内容盒子的盒模型等等......栗子：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8"/>

    <title>demohtml</title>

</head>

    <body>

        <style type="text/css">

            .div1{ background: red;}

        </style>

        <div class="div1">

            div标签默认是一个块状（block）盒子

        </div>

    </body>

</html>

上图代码得到的结果是：（楼主直接敲在编辑器里了）

div标签默认是一个块状（block）盒子

div标签其默认的表现形式是block，通过观察我们可以得到 block块状盒子默认的宽度是100%，而高度右文字撑开，文字就是它的（content内容）；如果没有文字，并且没有规定高度，那么它的高度为0；

看图 文字的高度是21  边框 内边距 外边距 都为0 宽度为100% （楼主屏幕14寸的 小啊）；

block（块状），它通常是一个外部容器 用来承载需要的内容 常用的块级元素有  div，p，h1 ， header，footer，nav 等等......

inline（行内）

行内元素，顾名思义，一行内的元素，块状里面的元素，常见的有a标签，i（倾斜标签），em，span，s（删除线），strong（加粗），b等等等等

行内元素的表现形式主要在于填充内容，它默认是没有上下外边距的，只可以左右；

<div class="div1">

            div标签默认是一个块状（block）盒子

           <a href="#">这是一个超级链接</a>

   </div>

上图与代码表示了行内元素的表现形式  其宽高等于内容的宽高  且，不可以直接设置它的宽度和高度，设置宽度和高度并没有什么卵用；

我们可以使用 display：block；来让它变成块状。block也可以使用display：inline；来让块状变成行内；

这里由于篇幅过长，楼主点到即止，关于block与inline  传送门：block，inline和inline-block概念和区别

2.内边距(padding)

内边距规定了内容与边框之间的填充距离，栗子：

　　

<style type="text/css">

            .div2{  padding: 20px; border: 1px solid #000099;}

            .div2 a{ background: red;}

        </style>

        <div class="div2">

            <a href="#">div标签默认是一个块状（block）盒子</a>

        </div>

楼主将div2的内边距设为上下左右各20px，需要注意的是 现在div2的高度是 padding+content+边框，20x2+2= 42px 这在某些时候会产生一些令人疑惑的问题，但是以盒模型的概念，它是正确的；

即 盒子的高度包括内边距 但 css属性设置的是content的高度  比如div3高度设为100px，注意这个时候 div3的实际高度等于 100+40+2=142px

<style type="text/css">

            .div3{  padding: 20px; border: 1px solid #000099; height:100px;}/*注意这个时候 div1的实际高度等于  100+40+2=142px*/

            .div3 a{ background: red;}

        </style>

        <div class="div3">

            <a href="#">div标签默认是一个块状（block）盒子</a>

        </div>

3.边框(border)

border默认为0；你可以随意指定它的某一个边的边框；其属性楼主也就不一一介绍了，再来一个传送门：CSS border边框属性教程(color style)

4.外边距(margin)

外边距规定了盒子与盒子之间的距离，因此它不会被计算到盒子的总体宽高之中，盒子内的盒子的外边距则会影响父级元素的宽度和高度；

margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。  这里也是直接给一个传送门吧，写起来这篇博文可就太长了......  css外边距详解

浮动

w3shool对浮动的解释：

　　浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

　　由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

以推箱子游戏为例，将箱子往左推 直到它碰到边界 或者另外一个箱子就会停止下来 看图：

　　

蓝色盒子往左浮动 （float:left） 红色箱子紧跟着往左浮动（float:left;） 橙色箱子往右浮动(float:right;)  蓝色在遇到边界之后，停止在左上角。红色紧跟着左浮动，它遇到了同样是左浮动元素的蓝色，所以它停止在蓝色的结尾。 而橙色方块向右浮动直到遇到边界或者同样右浮动的元素则停止；

浮动元素会脱离当前文档流，以一种特殊的形式存在，因为它不再处于文档流中，所以它不占据空间；

框1向左浮动，因为框1不再存在文档流中，框2被框1遮盖，图2当三个框同时向左浮动时，它们同是float元素，成列状排列；

另外一个特性是：如果包含框宽度小于内部浮动元素的总宽度，浮动元素会向下移动，直到有足够的空间；

如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

行框和清理

浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。

因此，创建浮动框可以使文本围绕图像：

<style type="text/css">

            .div1{height:200px; width: 100px; float: left; background: #ff9000;}

            .div1 a{ background: red;}

            .div2{height:200px; width: 100px; float: left; background: red;}

            .div3{height:200px; width: 100px; float: right; background: #002A80;}

        </style>

        <div class="div1">

        </div>

        <div class="div2">

        </div>

        <div class="div3">

        </div>

        <div class="text">

            这是文本

        </div>

如果要想文本另换一行，与浮动框互不干扰，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

<style type="text/css">

            .div1{height:200px; width: 100px; float: left; background: #ff9000;}

            .div1 a{ background: red;}

            .div2{height:200px; width: 100px; float: left; background: red;}

            .div3{height:200px; width: 100px; float: right; background: #002A80;}

        </style>

        <div class="div1">

        </div>

        <div class="div2">

        </div>

        <div class="div3">

        </div>

        <div style="clear: both;"></div>  //清除上面浮动元素的影响

        <div class="text">

            这是文本

        </div>


												


											
CSS基础之盒子模型及浮动布局的更多相关文章
	

    
								
  1. [19/06/06-星期四] CSS基础_盒子模型
		
    一.盒子模型(框模型.盒模型) CSS处理网页时,它认为每个元素都在一个不可见的矩形盒子里. 为什么想象成盒子模型?因为把所有元素想象成盒子,那么我们对网页的布局就相当于摆放盒子.我们只需要把相应的盒 ...
    
		
    2. 
						
  2. IT兄弟连 HTML5教程 使用盒子模型的浮动布局
		
    虽然使用绝对定位可以实现页面布局,但由于调整某个盒子模型时其他盒子模型的位置并不会跟着改变,所以并不是布局的首选方式.而使用浮动的盒子模型可以向左或向右移动,直到它的外边缘碰到包含它的盒子模型边框或另 ...
    
		
    3. 
						
  3. CSS 基础 例子 盒子模型及外边距塌陷
		
    我们通常设置的宽度和高度,是指盒子模型中内容(content)的宽度和高度.元素的高度,还要加上上下padding和上下border,元素整个盒子的高度还要加上上下margin:宽度类似计算. 注意: ...
    
		
    4. 
						
  4. CSS基础-7 盒子模型大小
		
    在盒子模型当中,有些元素是影响盒子大小的. 首先border就会影响盒子的大小. 其次padding也会影响盒子的大小. 例子: .one { width:100px; height:100px; b ...
    
		
    5. 
						
  5. 前端开发：css基础知识之盒模型以及浮动布局。
		
    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...
    
		
    6. 
						
  6. [CSS属性设置，盒子模型，网页布局]
		
    [CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...
    
		
    7. 
						
  7. 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）
		
    这些HTML.CSS知识点,面试和平时开发都需要 No1-No4   系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局)  ...
    
		
    8. 
						
  8. CSS Flexbox 弹性盒子模型
		
    CSS Flexbox 弹性盒子模型 设置元素样式为 display: flex 或 display: inline-flex, 让元素变成flex容器, 从而可以通过flex模式布局它的子元素. f ...
    
		
    9. 
						
  9. css中的盒子模型
		
    css中的盒子模型 css中的盒子模型,有两种,一种是“标准 W3C 盒子模型”,另外一种是IE盒子模型.   1.w3c盒子模型 从图中可以看出:w3c盒子模型的范围包括了:margin,borde ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Python 项目实践二（生成数据）第一篇
			
    上面那个小游戏教程写不下去了,以后再写吧,今天学点新东西,了解的越多,发现python越强大啊! 数据可视化指的是通过可视化表示来探索数据,它与数据挖掘紧密相关,而数据挖掘指的是使用代码来探索数据集的 ...
    
			
    2. 
						
  2. iOS 内存泄漏排查以及处理
			
    使用Xcode7的Instruments检测解决iOS内存泄露   文/笨笨的糯糯(简书作者)原文链接:http://www.jianshu.com/p/0837331875f0作为一名iOS开发攻城 ...
    
			
    3. 
						
  3. Qt之移动硬盘热插拔监控
			
    最近在做一个通用对话框,类似于windows的资源管理器,当然了没有windwos资源管理器那么强大.用户报了一个bug,说通用对话框打开之后不能实时监控U盘插入,随手在百度上搜索了一圈,这个问题还是 ...
    
			
    4. 
						
  4. nginx编译参数的内容
			
    最近公司安排我安装几台云服务器环境 采用nginx做反向代理: 查了一下官方文档,参数比较多,很多在上线后 可能才知道注意一下的. 编译安装nginx的话 需要安装一些前置组件: 1.gcc环境:用于 ...
    
			
    5. 
						
  5. ArcGIS API for JavaScript 4.2学习笔记[17] 官方第七章Searching（空间查询）概览与解释
			
    空间分析和空间查询是WebGIS有别于其他Web平台的特点.到这一章,就开始步入空间分析的内容了. [Search widget] 介绍空间查询的核心小部件"Search". [S ...
    
			
    6. 
						
  6. ArcGIS API for JavaScript 4.2学习笔记[22] 使用【QueryTask类】进行空间查询 / 弹窗样式
			
    上一篇写道,使用Query类进行查询featureLayer图层的要素,也简单介绍了QueryTask类的使用. 这一篇博文继续推进,使用Query类和QueryTask类进行空间查询,查询USA的著 ...
    
			
    7. 
						
  7. STM32基础分析——USART的DMA模式
			
    有关USART的DMA传输模式,其基本的概念和配置,网上有很多博客和教程都有,这里不再赘述,只是记录一下比较容易忽视而造成调试不通的问题. 1. 串口发送和接收分属两个DMA通道 一般方式操作串口时, ...
    
			
    8. 
						
  8. 使用line-height来垂直居中在安卓设备并不居中，利用ji调整
			
    先判断智能机浏览器的版本信息:方法有两种,但是第一种兼容性更好,但是使用了device插件 第一种: if (device.android()){ } 第二种: var ua = navigator. ...
    
			
    9. 
						
  9. 一个IC软件工程师的2017年终工作总结
			
    相比2016年的波澜起伏,2017多了一份平静和清淡.不过,平静的生活下,总有一颗飞向远方的心. 在这一年将近结束的时候,总结一下自己的工作,生活和学习.也顺便展望一下未来的2018,看看有哪些 美好 ...
    
			
    10. 
						
  10. C程序设计语言（第二版）--- 习题选
			
    1. 解: 2. 解: 3. (分析的好有条理啊!) 4. 解:
    
			
    11.