CSS盒子模型

盒子模型

概念：

	所谓盒子模型就是把HTML页面中的元素（标签）看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。		

看透网页布局的本质

​ 我们之前说过，行内元素比如文字，也需要一个盒子把他们装起来，我们前面学过的双标签都是一个盒子。有了盒子，我们就可以随意的，自由的，摆放位置了。

网页布局的本质：

把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。

盒子模型（Box Model）

所有的文档元素（标签）都会生成一个矩形框，我们称为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。

盒子模型总尺寸=border-width（边框）+padding+margin+内容宽度

1、盒子内容（content）

可以给盒子内容设置大小

div {
    width:100px;
	height:100px;
}

	宽度	width:像素值/百分比    
	高度	height：像素值/百分比

2、盒子边框（border）

边框就是那层皮，橘子皮，柚子皮，橙子皮。

1.边框宽度：
		border-width：像素值	
		border-位置（top,bottom,left,right）-width:
2.边框样式：
		border-style：

		border-top-style:
		border-bottom-style:
		border-left-style:
		border-right-style:
		常见的solid（实线）、dashed（虚线）、dotted（点线）、none 默认值 、double（双线）
		如果没有设置这个属性，所有边框效果不显示
3.边框颜色：
	border-color:

综合语法：

border : border-width   border-style  border-color 

例如：
	border（顶，底，左，右）: 1px solid red;
	
	border-top（顶部边框）: 1px solid red; /*上边框*/
	border-bottom（底部边框）: 2px solid green; /*下边框*/
	border-left（左边边框）: 1px solid blue;
	border-right（右边边框）: 5px solid pink;
	

3、内边距（padding）

padding属性用于设置内边距。 是指 边框与内容之间的距离。

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left: 左内边距

值的个数	表达意思
1个值	padding：上下左右边距	比如padding: 3px; 表示上下左右都是3像素
2个值	padding: 上下边距 左右边距	比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
3个值	padding：上边距 左右边距 下边距	比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
4个值	padding:上内边距 右内边距 下内边距 左内边距	比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针

4、外边距（margin）

margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:左外边距

margin:上外边距 右外边距 下外边距 左外边

取值顺序跟内边距相同。

宽度: 内容 + 内边距(左右) + 外边距（左右）+ 边框（左右）

外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

1. 必须是块级元素。
2. 盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

实际工作中常用这种方式进行网页布局，示例代码如下：

div{ 
    width:1000px; 
    margin:10px auto;
 }

外边距折叠(上下)

元素的上边距和下边距有时会发生折叠现象（与相邻的margin折叠，折叠后的值为折叠前两个值中较大的那一个）

外边距嵌套塌陷

在网页布局中，经常遇到一个div盒子嵌套另一个div盒子的情况，如果给子盒子设置一个上外边距，你会发现外边距会掉下来，此时，这是外边距塌陷的问题。

解决办法：

1、给父盒子设置边框。

2、给父盒子设置内边距（padding）。

3、给父元素添加overflow:hidden。

盒子模型的扩充

文字内容和盒子居中

1. 盒子里的内容（行元素）水平居中是 text-align: center
2. 盒子整体水平居中 margin: 0px auto;

text-align: center; /*  文字水平居中 */
margin: 10px auto;  /* 盒子水平居中  左右margin 改为 auto 就OK了 */

清除元素的默认内外边距

为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

注意： 行内元素是只有左右外边距的，是没有上下外边距的。

content宽度和高度

使用宽度属性width和高度属性height可以对盒子的大小进行控制。

width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。

圆角边框(CSS3)（扩展）

从此以后，我们的世界不只有矩形。radius 半径（距离）

语法格式：

border-radius: 50%;   让一个正方形变成圆圈

盒子阴影(CSS3)（扩展）

语法格式：

box-shadow:水平阴影（10px） 垂直阴影(10px) 模糊距离（虚实）(10px)  阴影尺寸（影子大小）(10px)  阴影颜色  内/外阴影(inset)；

值	描述
h-shadow	必需。水平阴影的位置，允许负值
v-shadow	必需。垂直阴影的位置，允许负值
blur	可选。模糊距离
spread	可选。阴影的尺寸
color	可选。阴影的颜色。
inset/outset	可选。将外部阴影（outset）改为内部阴影

前两个属性是必须写的。其余的可以省略。

div {
			width: 200px;
			height: 200px;
			border: 10px solid red;
			/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
			/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
			box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
			
}

盒模型的分类和区别

标准盒模型和IE盒模型：

标准盒模型是w3c标准的盒模型，其包含：
盒子占用宽度：margin(左右) + border(左右) + padding(左右) + content(width)

IE盒模型，在IE中content的宽度包括padding和border这两个属性
盒子占用宽度：margin(左右) + content(width,padding,border)

总结：标准盒模型：设置边框和内边距时，会扩大盒子的宽度或高度

​ IE盒模型：设置边框和内边距时，不会扩大盒子的宽度或高度

w3c标准盒模型和IE盒模型（怪异模型）之间的转换：

css3的box-sizing属性

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

当为content-box时，将采取标准模式进行解析计算
当为border-box时，将采取IE模式解析计算
当为inherit时，将从父元素来继承box-sizing属性的值

使用box-sizing: border-box;就是为了在设置有padding值和border值的时候不把宽度撑开。

块元素和行内元素（display）

我们网页的标签非常多，在不同地方会用到不同类型的标签，以便更好的完成我们的网页。

标签的类型(显示模式)

HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。具体如下：

1、块级元素(block-level)

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

块级元素的特点：

（1）总是从新行开始，独占一行。

（2）设置宽度和高度，行高、外边距以及内边距都可以控制。

（3）宽度默认是容器的100%

（4）可以容纳内联（行内元素）元素和其他块元素。

2、行内元素(inline-level)

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

行内元素的特点：

（1）和相邻行内元素在一行上。

（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素。

注意：

1. 只有文字才能组成段落，因此p里面不能放块级元素，

   同理还有这些标签h1,h2,h3,h4,h5,h6他们都是文字类块级标签，里面不能放其他块级元素。

2. 链接里面不能再放链接。

3. a里面可以放块级元素

块级元素和行内元素区别

块级元素的特点：
（1）独占一行。
（2）可以设置宽度，高度，行高和外边距以及内边距。
（3）宽度默认是容器的100%。
（4）可以容纳行内元素和其他块元素。

行内元素的特点：
（1）不能独占一行，和相邻行内元素在一行上。
（2）不能设置宽和高，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。

3、行内块元素（inline-block）

在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，它们被称为行内块元素。

行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上（但是之间会有空白缝隙）。
（2）可以设置宽，高，行高，外边距以及内边距。
（3）默认宽度就是它本身内容的宽度。

标签显示模式转换属性 display

块转行内：display:inline;

行内转块：display:block;

块、行内元素转换为行内块： display: inline-block;

此阶段，我们只需关心这三个。