标准文档流
定义:块级元素纵向有序排列，行内块（行内）元素横向有序排列
浮动
如果想让四个块级元素 div 并排显示,怎么做呢?
设置浮动
语法：float:left | right；
特点:
给一个元素设置了浮动后，该元素不占位置（脱离标准流）
给一个元素设置了浮动，会影响该元素后面的元素
浮动可以让块级元素在一行上显示
浮动可是实现模式转换（span 设置浮动可以设置宽高）
浮动作用:
浮动最初的作用： 解决文字图片环绕效果。（文字不会浮动的影响）
制作网页导航（浮动+列表实现导航）
进行网页布局 （div+CSS(盒子模型+浮动+定位)）
注意：
◆让块级元素在一行上显示就使用浮动
◆如果一个元素要实现模式转换，就使用display
清除浮动
什么时候需要清除浮动：
◆父元素（内容父盒子）没有设置高度（必须条件）
◆该父元素中的所有子元素都设置了浮动（必须条件）
当父容器没有设置高度，里面的盒子没有设置浮动的情况下会将父容器的高度撑开。一旦父容器中的盒子设置浮动，脱离标准文档流，父容器立马没有高度，下面的盒子会跑到浮动的盒子下面。出现这种情况，我们需要清除浮动
清除浮动的方式
给父容器设置高度
通过设置clear:left | right | both
给父容器设置 overflow:hidden
如果父元素中没有定位的元素，或者定位的元素没有超出父元素的范围，那么可以使用overflow：hidden；
.定位
◆ 定位体现的是元素之间的层级关系（盒子压盒子的效果）
◆ 通过定位也可以移动元素
定位分类
position:static 静态定位
position:absolute 绝对定位
position:relative 相对定位
position:fixed 固定定位
静态定位 (static)
就是按照标准流的方式显示
绝对定位 (absolute)(看脸型)
特点:
如果一个子元素设置了绝对定位，其父元素没有设置定位或者设置了静态定位，那么该子元素是以浏览器左上角为基准设置定位
如果一个子元素设置了绝对定位，其父元素设置了除静态定位以外的定位。那么该子元素是以父元素左上角为基准设置定位
绝对定位可以实现模式转换
绝对定位的元素不占位置（脱标）
相对定位 (relative)(自恋型)
特点:
相对定位的元素只能以元素自己的位置为基准设置定位
相对定位的元素没有脱标，占位置
不能实现元素的模式转换
子绝父相（子元素设置绝对定位，父元素设置相对定位）
固定定位 (fixed)
特点:
固定定位的元素只以浏览器左上角为基准设置定位
固定的元素不占位置（脱标）
实现模式转换
网友评论