盒子阴影和网页布局

• 盒子阴影

• box-shadow: 10px 10px 10px 4px rgba(0,0,0,.3);//最后一个是透明度

• 

  传统网页布局的三种方式

  标准流

• 就是按照规定好的默认方式排列

• 1.块级元素：div、hr、p、h1~h2、ul、ol、dl、form、table

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

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

• 标准流是最基础的布局方式

  浮动

• 浮动典型的应用：可以让多个块级元素一行内排列显示

• 网页布局的第一准则：多个块级元素纵向找标准流，多个块级元素横向排列找浮动

• 浮动向左浮动

• float:left;

• 浮动特性（重难点）

• 1.脱离标准普通流的控制（流）移动到指定位置（动），（俗称托标）

• 2.浮动的盒子不在保留原先的位置

• 当两个盒子给其中一个盒子浮动到我们跟前，另外的盒子就会代替他原先的位置

• 如果盒子都设置了浮动，会按照属性值一行内显示并且顶端对齐排列

• 注意：浮动的元素是相互靠在一起的（不会有缝隙），如果父类宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

• 如果行内元素有了浮动，则不需要转换块级\行内块元素就可以直接给高度和宽度

• 在浮动下行内块元素给多少内容就多少多宽

• 块级盒子没有设置宽度，默认宽度和父级一样宽，添加浮动后，大小根据内容来定

• 浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流