-
盒子阴影
-
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.浮动的盒子不在保留原先的位置
-
当两个盒子给其中一个盒子浮动到我们跟前,另外的盒子就会代替他原先的位置
-
如果盒子都设置了浮动,会按照属性值一行内显示并且顶端对齐排列
-
注意:浮动的元素是相互靠在一起的(不会有缝隙),如果父类宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐
-
如果行内元素有了浮动,则不需要转换块级\行内块元素就可以直接给高度和宽度
-
在浮动下行内块元素给多少内容就多少多宽
-
块级盒子没有设置宽度,默认宽度和父级一样宽,添加浮动后,大小根据内容来定
-
浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流