6月18日实训总结

1.外边距应用的盒子居中

2.外边距的合并情况

3.盒子的计算方式

盒模型的分类（最重要的部分） 盒模型分为 ： W3C标准盒子 、IE盒子

1.W3C标准盒子（content-box）：

在这种盒模型下，我们所说的元素的 width ，实际上只包含 content

盒子总宽度 = margin + border + padding + width

2.IE盒子（border-box）：

又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型。

在这种盒模型下，我们所说的元素的 width ，实际上包含了 content + padding + border

盒子总宽度= margin + width

4.盒子阴影

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

注意:

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

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

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

5.溢出

6.浮动:

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

在CSS中，通过float属性来定义浮动，其基本语法格式如下：

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

1. 普通流（标准流）

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

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

2. 浮动

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

3. 定位

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

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