css定位、position与float同时使用的情况
一、css定位
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
1.普通流:未专门指定的元素都在普通流中定位,position:static/relative;和float:none;也在普通流中定位。
2.绝对定位:position:absolute/fixed;元素框脱离普通文档流。
3.浮动:float:left/right;元素脱离普通文档流。
二、对元素同时使用position和float的情况
经过实践发现,无论position和float谁写在前面或后面,都是position先起作用。
1.当position为absolute/fixed时,元素已脱离文档流,再对元素应用float失效(即不起作用)。
2.当position为static/relative时,元素依旧处于普通流中,再对元素应用float起作用。
三、css定位机制之绝对定位机制与浮动定位机制的区别
1.用position使元素脱离普通流后,该元素不占据空间,用top/bottom/left/right决定位置。
2.用float使元素脱离普通流后,该元素占据空间,用margin,padding等决定和周围内容的距离等。
(该文供学习交流,欢迎大家共同探讨~)
css定位、position与float同时使用的情况的更多相关文章
- div+css定位position详解
div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...
- 《css定位 position》课程笔记
这是我学习课程css定位 position时做的笔记! 本节内容 html的三种布局方式 position可选参数 z-index 盒子模型和定位的区别 侧边栏导航跟随实例 html的三种布局方式 三 ...
- web前端css定位position和浮动float
最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框 ...
- Css中position、float和clear整理
Position: absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", ...
- css定位position认识
1.绝对定位(position: absolute) 2.相对定位(position: relative) 3.固定定位(position: fixed) 绝对定位 设置position:absolu ...
- Div+CSS 定位 Position
position 属性规定应用于元素的定位方法的类型(static.relative.fixed.absolute 或 sticky). position: static;HTML 元素默认情况下的定 ...
- 【前段开发】10步掌握CSS定位: position static relative absolute float
希望能帮到须要的人,转自:http://www.see-design.com.tw/i/css_position.html 1. position:static 元素的 position 屬性默認值為 ...
- CSS中position 和float的使用说明(清晰)
当构建页面排版时,有不同的方法可以使用.使用哪一种方法取决于具体页面的排版要求,在不同的情况下,某些方法可能好过于其他的方法. 比如,可以使用若干个浮动元素来构建一个整洁简洁的页面排版.或者,如果需要 ...
- CSS定位position
position选项来定义元素的定位属性,选项有5个可选值:static.relative.absolute.fixed.inherit 属性值为relative.absolute.fixed时top ...
随机推荐
- Nginx 重新加载日志配置
最近在写一个nginx日志的切割脚本,切割完后,发现可以不重启服务,而直接重新加载日志配置文件的命令 [ kill -USR1 $nginx.pid ],但是不知道 -USR1这个参数是什么意 ...
- CSS动画:旋转卡片效果
<!DOCTYPE html> <html> <head> <title>demo</title> </head> <bo ...
- iOS 9 中可用的受信任根证书列表
iOS 受信任证书存储区包含随 iOS 预安装的可信根证书. https://support.apple.com/zh-cn/HT205205 关于信任和证书 iOS 9 受信任证书存储区包含三类证 ...
- VBA中Option的四种用法
1.Option Explicit.当使用Option Explicit时,必须在模块中的所有过程声明每一个变量,否则会出现语法错误并不能被编译.这样做的好处是,它能消除程序中因为错拼变量名而导致程序 ...
- 测试edit中数据是否合法
void XyModal::OnEnKillfocusEdit1() { // TODO: 在此添加控件通知处理程序代码 CString cText; GetDlgItemText(IDC_EDIT1 ...
- php第十七节课
分页查询 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- 2.2sklearn.preprocessing.PolynomialFeatures生成交叉特征
sklearn.preprocessing.PolynomialFeatures原文 多项式生成函数:sklearn.preprocessing.PolynomialFeatures(degree=2 ...
- BZOJ 1232 USACO 2008 Nov. 安慰奶牛Cheer
[题解] 对于每一条边,我们通过它需要花费的代价是边权的两倍加上这条边两个端点的点权. 我们把每条边的边权设为上述的值,然后跑一边最小生成树,再把答案加上最小的点权就好了. #include<c ...
- lambda表达式与委托与线程初步谈论-基于刘铁锰视频观后操作
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- 【LeetCode Weekly Contest 26 Q3】Friend Circles
[题目链接]:https://leetcode.com/contest/leetcode-weekly-contest-26/problems/friend-circles/ [题意] 告诉你任意两个 ...