盒子模型(css重点)

其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要 学的非常精通。

---

1、内边距（padding）

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

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

1.1、属性值设置

值的个数	表达意思
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 顺时针

1.2、外盒子和内盒尺寸计算（元素实际大小）

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

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

大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高 度的计算原则是：

/*外盒尺寸计算（元素空间尺寸）*/
Element空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin
/*内盒尺寸计算（元素实际大小）*/
Element Height = content height + padding + border
Element Width = content width + padding + border

 注意：

1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input行内块除 外）。

2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。

3、如果一个盒子没有给定宽度或者说是继承了父亲的宽度，则padding 不会影响本盒子大小。

2、外边距

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

margin-top:上外边距 margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

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

取值顺序跟内边距相同。

2.1、外边距实现盒子居中

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

        1. 必须是块级元素。

        2. 盒子必须指定了宽度（width）

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

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

.header{ width:960px; margin:0 auto;}

 2.2、文字(行内元素)居中

1. 文字水平居中是 text-align: center

2. 盒子水平居中:左右margin 改为 auto

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

 2.3、清除元素的默认内外边距

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

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

 注意： 行内元素是只有左右外边距的，是没有上下外边距的。 内边距，在ie6等低版本浏览器也会有问 题。 我们尽量不要给行内元素指定上下的内外边距就好了。

2.4 外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

2.4.1、相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距 margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这 种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

2.4.2、嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外 边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

解决方案：

1. 可以为父元素定义1像素的上边框或上内边距。

2. 可以为父元素添加overflow:hidden(overflow 属性规定当内容溢出元素框时发生的事情）。

3、盒子阴影

语法格式：

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；

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

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

2. 默认是外阴影 (outset) ，不用设置， 想要内阴影设为 inset 。

3. X轴与Y轴如果有值，就改变了（正值 向右 向下）

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);
}

 4、浮动(float)

4.1、CSS 布局的三种机制

网页布局的核心——就是用 CSS 来摆放盒子。CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通 流（标准流）、浮动和定位，其中：

1. 普通流（标准流）

• 块级元素会独占一行，从上向下顺序排列；

                常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

• 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；

                常用元素：span、a、i、em等

2. 浮动:让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。

3. 定位：将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。

总结：html当中有一个相当重要的概念，标准流或者普通流。普通流实际上就是一个网页内标签元素正 常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列； 按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。

4.2 为什么需要浮动？

 4.3 什么是浮动？

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。 在CSS中，通过float属性来定义浮动，其基本语法格式如下：

选择器{float:属性值;}

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认值