布局的三种方式
一.常规流
以前没有学布局的时候,属于常规流
元素按照常规显示方式显示,块级元素垂直排列、行内元素就是水平排列
二.浮动
float:left;
float:right:
float:none;
典型应用两个div水平排列
**************************布局步骤**************************************
一.画效果图
二.使用DIV进行分割
三.使用CSS来控制DIV进行布局
遵循盒模型
四. 使用以上三步进行细分
**************************************浮动******************************************
1. 浮动以后 元素会脱离常规流,脱离元素的常规显示方式
div常规显示方式 垂直排列 ----->水平排列
两个div的间距 常规(最大的)--------> 取两个间距之和
2.第一个浮动元素会紧贴父容器的边框,第二个元素会紧贴上一个浮动元素的边框
浮动元素会让出它的位置
**************************定位**************************************
1. 静态定位
以前没有学定位的时候 都是静态定位,静态定位的特点 元素会在它的最初位置静止不动
position:static;
left:20px;/*距离左边20px 但是怎么写都不动*/
2. 相对定位
相对于元素的最初位置
position:relative;
top:30px;/*向下移动30像素 反向是正好相反的*/
3. 绝对定位
也是相对定位,只不过参照物不同, 参照的是已经定位的父容器 ,如果父容器没有定位,参照的是最初的包含块(body)
需求: 小的div跑到右上角
父容器使用相对定位,子容器用绝对定位
参照的是离它最近的已经定位的父容器
4.固定定位
也是相对定位, 它的参照物是浏览器的窗口
position:fixed;
top:100px;
************************************z-index (z-轴)***************************
用来调整元素的上下位置 默认值是0 值大的 在上面
注意: z-index 必须要加在已经定位的元素上才起作用
position:relative;
z-index:1;
************************************SuckFish 二级菜单(纯CSS实现)***************************
一.先隐藏li下的ul