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