css 学习笔记 position float block 的理解
2017-12-08 18:35
330 查看
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)时将会无效。
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学习笔记】深入理解之float
- WEB前端开发学习----5.理解 CSS 浮动float
- CSS深入理解的学习笔记
- [网页基础]DIV+CSS学习笔记(二)深入理解盒子模型
- 【转】CSS FLOAT 学习笔记
- IOS 学习笔记--关于对Block的理解
- CSS学习------CSS定位(position)与浮动(float)
- iOS学习笔记29-__block 与 __weak的区别理解
- CSS学习笔记:inline和inline-block的区别
- css学习笔记之background-position
- CSS学习笔记——定位position属性的学习
- CSS学习笔记09 简单理解BFC
- css学习笔记之 inline-block
- CSS学习笔记-position定位(九)
- jsp学习---css基础知识学习,float,position,padding,div,margin
- CSS排版之对float排版和position的absolute的理解(周三贴)
- CSS学习笔记——CSS中定位的浮动float
- css布局学习笔记之position属性
- CSS深入理解学习笔记之line-height
- div+css学习笔记,display:block;用css截取字符串以...代替省略部分