博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS学习笔记(一)深入理解position属性和float属性
阅读量:6273 次
发布时间:2019-06-22

本文共 1261 字,大约阅读时间需要 4 分钟。

  position属性设置元素的定位方式,为要定位的元素定义定位规则。

  position属性主要有四种:static、relative、absolute、fixed。

  static是默认属性。使得该元素正常表现,即元素处于文档流中它当前的布局位置,top,bottom,right,left,z-index属性无效。

  relative:设置这个关键字并不会改变布局。

  absolute:不为元素预留空间,元素通过指定与其最近的非static定位的祖先元素的偏移来确定。绝对定位可以设置外边距,而且不会和其他边距合并。

  fixed:不为元素预留空间。通过指定相对于屏幕视窗的位置来指定元素的空间,并且该元素的位置在屏幕滚动时不会发生改变。

  相对定位(position: relative)的元素仍然被认为是处于文档流之中。相比之下,绝对定位(position: absolute)的元素则被认为脱离了文档流。绝对定位元素的位置是相对于他最近的定位祖先元素(position值非static)。如果没有这样一个祖先元素,则相对于原始的容器。

  对于相对定位元素,top和bottom属性指定它相对正常位置的垂直偏移,left和right属性指定水平偏移。

  对于绝对定位元素,top和bottom等属性指定元素与其包含块的偏移,即此时位置为与包含块的相对位置。元素的边距(margin)定位在这些偏移之中。

  float属性

  float 是 css 的定位属性。浮动的元素仍然是网页流的一部分。这与使用绝对定位的页面元素相比是一个明显的不同。绝对定位的页面元素被从网页流里面移除了。绝对定位的元素不会影响其它元素,其它元素也不会影响它,无论它是否和其它元素挨着。

  fload属性有四个可用的值:Left 和Right 分别浮动元素到各自的方向,None (默认的) 使元素不浮动,Inherit 将会从父级元素获取float值。 

  清除Float

  清除(clear)是浮动(float)的相关属性。一个设置了清除Float的元素不会如浮动所设置的一样,向上移动到Float元素的边界,而是会忽视浮动向下移动。如下图。

 

uncleardfooter

  上例中,侧栏向右浮动,并且短于主内容区域。页脚(footer)于是按浮动所要求的向上跳到了可能的空间。要解决这个问题,可以在页脚(footer)上清除浮动,以使页脚(footer)待在浮动元素的下面。

1 #footer {
clear: both; }

cleardfooter

  清除(clear)也有4个可能值。最常用的是 both,清楚左右两边的浮动。left 和 right 只能清楚一个方向的浮动。none 是默认值,只在需要移除已指定的清除值时用到。inherit 应该时第五个值,不过 IE 不支持。只清除左边或右边的浮动,实际中很少见。

 directionalclearing CSS浮动属性Float详解

 

转载于:https://www.cnblogs.com/suvllian/articles/5339516.html

你可能感兴趣的文章
jQuery-强大的jQuery选择器 (详解)[转]
查看>>
配置Quartz
查看>>
Linux 线程实现机制分析
查看>>
继承自ActionBarActivity的activity的activity theme问题
查看>>
设计模式01:简单工厂模式
查看>>
多线程讲解
查看>>
项目经理笔记一
查看>>
Hibernate一对一外键双向关联
查看>>
mac pro 入手,php环境配置总结
查看>>
MyBatis-Plus | 最简单的查询操作教程(Lambda)
查看>>
rpmfusion 的国内大学 NEU 源配置
查看>>
spring jpa 配置详解
查看>>
IOE,为什么去IOE?
查看>>
java 用反射简单应用,将Object简单转换成map
查看>>
Storm中的Worker
查看>>
dangdang.ddframe.job中页面修改表达式后进行检查
查看>>
Web基础架构:负载均衡和LVS
查看>>
Linux下c/c++相对路径动态库的生成与使用
查看>>
SHELL实现跳板机,只允许用户执行少量允许的命令
查看>>
SpringBoot 整合Redis
查看>>