盒子阴影和网页布局

盒子阴影

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.浮动的盒子不在保留原先的位置

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

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

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

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

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

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

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