第3章深入理解盒子模型

一.盒子模型

三个名词：

border：边框
padding：内边距
margin：外边距

padding-border-margin模型是一个极其通用的描述矩形对象布局形式的方法。这些矩形对象可以被统称为“盒子”，英文为“Box”；
在CSS中一个独立的盒子模型由content(内容)、border(边框)、padding(内边距)和margin(外边距)4个部分组成。
一个盒子实际所占有的宽度（或高度）是由“内容+内边距+边框+外边距”组成的。在CSS中可以通过设定width和height的值来控制内容所占的矩形的大小，并且对于任何一个盒子，都可以分别设定4条边各自的border、padding和margin。因此只要利用好这些属性，就能够实现各种各样的排版效果。

并不仅仅是用div定义的网页元素才是一个盒子，事实上所有的网页元素本质都是以盒子的形式存在的。在人的眼中，一个网页上有各种内容，包括文本、图像等，而在浏览器看来，就是许多盒子排列在一起或者相互嵌套。

二.分别论述（border、padding、margin）

1.边框（border）
border一般用于分隔不同元素，border的外围即为元素的最外围，因此计算元素实际的宽和高时，就要将border纳入。换句话说，border会占据空间，所以在计算精细的版面时，一定要把border的影响考虑进去。

border的属性主要有3个，分别是color，width和style。

     可以给四个边框设置同一种样式，也可以分别设置，如：
          1.如果给出1个属性值，即上右下左都为这种样式。
          2.如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性
          3.如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，最后一个数值表示下边框的属性。
          4.如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针顺序。border-color、border-width、border-style还可以简写成border："width"，"color"，"style"。

     在设置边框时，还有一点值得注意，在给元素设置background-color背景色时，IE作用的区域为content+padding，而Firefox则是content+padding+border。这在border设置为粗虚线是表现得特别明显。

2.内边距（padding）

是指border距里面元素的距离，记住“上右下左的原则”.

padding，又称为内边距，用于控制内容与边距之间的距离。

3.外边距（margin）

是指border距外面元素的距离，记住“上右下左的原则”.

margin指的是元素与元素之间的距离。

三.标准文档流

CSS规范的思路是，首先确定一种标准的排版模式，这样可以保证设置的简单化，各种网页元素构成的盒子按照这种标准呢的方式排列布局。这种方式就是接下来要详细介绍的“标准流”方式。
但是仅通过标准流方式，很多版式是无法实现的，限制了布局的灵活性，因此CSS规范中，又给出了另外若干种对盒子进行布局的手段，包括"浮动"属性和"定位"属性等。

所谓标准流，就是指在不使用其他的与排列和定位相关的特殊CSS规则时，各种元素的排列规则。

四.行内元素和块级元素

标准文档流中的元素可以分为以下两类：
     （1）块级元素
          所谓块级元素就是指自己占据着一行矩形区域，与不包含在它里面的其他元素不排列在同一行中。因此，这类元素称为"块级元素"，即他们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。例如<div><table>等标记
     （2）行内元素
          所谓行内元素，即不占有独立区域，仅仅在其他元素的基础上指出了一定的范围。例如常用的<a>标记<span>标记等

1.行内元素之间的水平margin
即两个元素margin之和。

2.块级元素之间的竖直margin
即取最大的。

3.嵌套盒子之间的margin
即父元素的padding+子元素的margin

4.margin可以设置为负值

转载于:https://www.cnblogs.com/jiajiayouba/archive/2011/11/03/2234786.html

第3章深入理解盒子模型相关推荐

两个相邻盒子的边框怎么只显示一个_一篇文章带你快速理解盒子模型「经典案例」...
今天带大家快速理解盒子模型,直接上代码: css盒子我的css盒子测试模型上面代码没有任何难度,只是写了一个div标签,大家已经知道,div标签是块级元素,所以会占满一行: 但是我们也注意到了图片 ...
陈力：传智播客古代珍宝币泡泡龙游戏开发第十讲：深入理解盒子模型
陈力:传智播客古代珍宝币泡泡龙游戏开发第十讲:深入理解盒子模型摘要:通过前节<第九讲:块元素.行内元素.标准流.盒子模型>学习了前节介绍了贵阳网站建设中的DIV+CSS中类选择器.i ...
一篇文章带你实操代码理解盒子模型
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 目录一.盒子模型 ...
深入理解盒子模型——CSS视觉格式化模型|盒模型|定位方案|BFC
视觉格式化模型页面(文档树)可以想象成是由一个个的Box组合而成的,而视觉格式化模型(Visual formatting model)是一套规则,将这些框布局成访问者看到的样子. 哪些因素控制了这些 ...
html中怎么让盒子模型居中,通过box盒子模型给元素内容设置居中
老版本语法 div{ display: -webkit-box; -webkit-box-align:center; //垂直居中 -webkit-box-pack:center;//水平居中 } 新 ...
HTML盒子模型制作个人名片,网页设计基础 CSS盒子模型第4章 CSS盒子模型_教学设计.doc...
博学谷--让IT教学更简单,让IT学习更有效 PAGE 12 PAGE 1 <HTML+CSS+JavaScript网页制作案例教程> 教学设计课程名称: HTML+CSS+JavaSc ...
创建一个水平盒子java_盒子模型理解
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面理解盒子模型实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
WEB入门.六盒子模型
学习内容 CSS盒子模型盒子之间的关系页面元素定位能力目标理解盒子模型理解内容与表现分离的优点理解并掌握盒子之间的关系理解并掌握绝对定位与相对定位的用法本章简介上一章节中已经讲解了页 ...
html盒子代码div6,WEB入门.六盒子模型
学习内容 CSS盒子模型盒子之间的关系页面元素定位能力目标理解盒子模型理解内容与表现分离的优点理解并掌握盒子之间的关系理解并掌握绝对定位与相对定位的用法本章简介上一章节中已经讲解了页 ...

第3章深入理解盒子模型

第3章深入理解盒子模型相关推荐

最新文章

热门文章

第3章 深入理解盒子模型

第3章 深入理解盒子模型相关推荐

最新文章

热门文章

第3章深入理解盒子模型

第3章深入理解盒子模型相关推荐