CSS中浮动和定位的总结
2017-06-03 18:44
573 查看
浮动
浮动用法:
float:left | right浮动特点:
1、设置了浮动的元素,脱离了标准流(脱标) 2、设置了浮动的元素,该元素不占原来的位置 3、设置了浮动的元素,会影响该元素的后面的元素 4、设置了浮动的元素,也会实现模式转换
浮动的作用:
1、浮动最初的作用:实现文字图片环绕效果 2、可以让块级元素在一行上显示。 3、制作网页导航 4、网页布局(div+css)
清除浮动的三种方案
第一种:使用clear: left | right | both第二种:给父元素设置overflow:hidden;
第三种:采用伪元素清除浮动,如下代码:
.clearfix:after { content: ""; height: 0; line-height: 0; display: block; clear: both; visibility: hidden; } .clearfix { zoom: 1; }
清除浮动的条件:
1、页面中父元素没有设置高度2、该父元素中所有的子元素都设置了浮动
定位:
定位的分类:
静态定位(static)绝对定位 (absolute)
相对定位(relative)
固定定位 (fixed)
静态定位(static)
静态定位的盒子与网页中标准流下的显示方式一样。相对定位(relative)
相对定位的元素会以元素本身的设置定位。
相对定位的元素特点:
相对定位没有脱标相对定位的元素占位置
相对定位不能进行模式转换
绝对定位 (absolute)
绝对定位的元素位置特点:
当一个子元素的父元素没有设置定位,子元素设置绝对定位后,该子元素会以body左上角为基准设置定位。如果一个元素的父元素设置了定位,那么子元素设置绝对定位的时候,会以父元素左上角为基准设置定位。
绝对定位的元素特点:
绝对定位的元素脱标绝对定位的元素不占位置
绝对定位的元素可以进行模式转换
记住重要的一点:子绝父相
固定定位 (fixed)
设置元素为固定定位时候,该元素只会参照浏览器可视区域左上角设置定位。
固定定位的特点:
元素设置固定定位后脱标脱标的元素不占位置
可以进行模式转换
相关文章推荐
- CSS学习总结:浮动、定位、父容器塌陷问题
- CSS学习总结:浮动、定位、父容器塌陷问题
- css 定位模型和浮动总结
- CSS 定位与浮动
- DIV+CSS中的float浮动定位笔记。
- CSS分栏布局的方法:绝对定位和浮动
- CSS布局最常用属性float(浮动)和position(定位)
- CSS分栏布局的方法:绝对定位和浮动
- div+css布局控制div定位浮动层在背景图片上的半透明阴影效果
- css 浮动和定位的两种三栏布局
- CSS布局最常用属性float(浮动)和position(定位)
- css 相对定位 绝对定位 浮动 分析
- CSS教程:总结清除浮动的方法
- css 相对定位 绝对定位 浮动 分析
- (转)css 相对定位 绝对定位 浮动 CSS 相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”
- css代码中position的定位,baidu+总结
- css 相对定位 绝对定位 浮动 分析
- css的核心内容:标准流、盒子模型、浮动、定位
- 说说标准——CSS核心可视化格式模型(visual formatting model)之九:浮动(Float)定位细则二
- CSS 实现DIV浮动定位不闪