css 学习笔记 position float block 的理解
来源:互联网 发布:冰点下载器 mac版 编辑:程序博客网 时间:2024/05/16 01:24
1. block、inline、inline-block
block:可以设置宽高(width、height有效),默认元素前后有换行符(隐藏规则) 注:float会使bolck无效(显示为inline-block的特性)
inline:宽高默认包裹元素(width、height无效),前后无换行符 注:position:absolute会使inline无效
inline-block:宽高默认包裹元素(width、height有效),前后无换行符
2. 文档流概念
理解:页面中显示的元素分布于不同z轴的层级,屏幕绘制时相当于人看屏幕,即从z值更大的层级往z值更小的层级看,z值更大层级的元素可能会将z值更小的元素挡住。文档流与元素默认的层级位于同一层,该层的z值记为0;页面从左往右从上到下默认排列元素。
3. position属性的relative、static、absolute、fixed
static:位于文档流,即默认的层级z为0。按默认规则排列位置。
relative:元素位于文档流所在的层级,并向更高的层级投影(类似于元神出窍,躯壳留在原来的层级占位置,元神飞到了更高的层级显示,我们只能看到元神),投影位置由与原位置的偏差决定,使用left、right、top、bottom属性来定义与原位置(躯壳位置)的偏差,投影前原位置遵循static排列。
absolute:元素本身不占文档流空间,并且元素向比文档流更高的层级投影(类似于元神出窍后本身没有了躯壳,且其元神飞到了比文档流所在的层级更高的层级,由于没有躯壳所以不会发生挤占的情况,即后显示的会重叠覆盖先显示的),投影位置由与父元素位置的偏差决定,使用left、right、top、bottom属性来定义与父元素位置的偏差值(如若横向或者不指定left、right其中一个的值则横向与static规则显示的位置相同,纵向同理亦然)。
fixed:元素本身不占文档流空间,并且元素向比文档流更高的层级投影(类似于元神出窍后本身没有了躯壳,且其元神飞到了比文档流所在的层级更高的层级,由于没有躯壳所以不会发生挤占的情况,即同一层级中后显示的会重叠覆盖先显示的),投影位置由与浏览器窗口位置的偏差决定,使用left、right、top、bottom属性来定义与浏览器窗口位置的偏差值(如若横向或者不指定left、right其中一个的值则横向与static规则显示的位置相同,纵向同理亦然)。
4. float属性
被float属性修饰的在文档流中占空间的元素,将会优先在指定的位置排列,并且不会使position:relative的left、right、top、bottom的效果无效。但由于,absolute好fixed在文档流中不占位置,所以该属性在position为absolute和fixed且生效(left、right、top、bottom)时将会无效。
- css 学习笔记 position float block 的理解
- 【css学习笔记】深入理解之float
- CSS学习笔记---float的深入剖析
- CSS的position与float的问题
- CSS的position与float的问题
- css position和float的使用方法
- css的float,position属性详解
- CSS排版之对float排版和position的absolute的理解(周三贴)
- css--position和float
- CSS布局 position float
- Css: position float display
- css position属性 以及 float、display、position的问题整合
- css inline-block 与 float的使用
- CSS中position的理解
- CSS定位position的理解
- css学习笔记之position
- css:float的深度理解
- 【转】CSS FLOAT 学习笔记
- [UOJ]210 寻找罪犯 2-Sat 前缀和优化
- Android中XML的命名空间、自定义属性
- 原始分页代码
- / ./ ../ 的区别
- 用glxinfo|grep "OpenGL renderer"可以看目前使用哪个显卡。比如我的机器上:$ glxinfo|grep "OpenGL renderer" OpenGL renderer
- css 学习笔记 position float block 的理解
- 剑指offer 试题31~40
- jsp、Servlet路径映射与生命周期
- QT控件大全 四十一 QLightBoxWidget
- spring cloud+es+kafka+zipkin windows环境搭建调用链监控
- 用一条查询SQL统计某个字段各字符及出现的次数,并按出现次数倒序排列。
- serialVersionUID作用
- 双十二年终盛典,EasyRecovery与您一起
- 深入SpringMVC组件开发【1】