CSS——定位

简介:

   CSS定位

1   定义元素框对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置

2  CSS有三种基本的定位机制

2.1     普通流

   按照其元素在HTML中的位置顺序决定排布过程

2.2     浮动

   浮动框可以向左或向右移动,直到它的边缘碰到包含框或另一个浮动框的边框为止

2.3     绝对定位

   绝对定位使元素的位置与文档流无关,因此不占据空间,这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对与它在普通流中的位置

3  定位属性

   position将元素放在一个静态的、相对的、绝对的或固定的位置,通过对top、left、right和bottom这四个属性的赋值让元素向对应的方向偏移

4     常用的定位属性

  overflow设置元素溢出其区域发生的事情

  clip设置元素的显示形状,多用于图片

  vertical-align设置元素的垂直对齐方式

  z-index设置元素的堆叠顺序

  fixed是将元素固定下来,就算滚动屏幕,它也会在同一个地方不会动

  static设置以后,偏移量什么的就没有用了

5  属性是float其值可以赋值为

  left元素向左移动

  right元素向右移动

  none不浮动

  inherit从父级继承浮动的属性


本文转自 拉考的考拉 51CTO博客,原文链接:http://blog.51cto.com/lakaodekaola/1929587


相关文章
|
4月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
position定位(核心) 我们讲盒模型的时候,提到了3个属性可以用来控制页面排版。 三大属性:position属性,display属性,float属性。 position 属性控制页面上元素间的位置关系。 display 属性控制页面元素是否显示或者是堆叠还是并排显示。 float 属性提供控制方法。 通过float这种控制方法,可以实现多栏布局,导航菜单等等。 position属性是干嘛用的?怎么用?有哪些属性值? position属性控制页面上元素间的位置关系,也就是排版。 怎么用?要知道怎么用
488 0
|
7月前
|
自然语言处理 前端开发 JavaScript
Playwright系列课(2) | 元素定位四大法宝:CSS/文本/XPath/语义化定位实战指南
本文是Playwright系列第二课,详解元素定位四大核心技术:CSS选择器、文本定位、XPath和语义化定位,结合实战演示各方法应用场景。重点解析Playwright智能定位器(Locator)的独特优势——自动等待与重试机制,通过预检元素可操作性(可见/可点击)有效规避网络延迟导致的脚本失效,显著提升自动化测试稳定性。
|
前端开发
|
前端开发 容器
最新CSS3定位元素
【8月更文挑战第28天】
162 5
CSS_定位_网页布局总结_元素的显示与隐藏
CSS_定位_网页布局总结_元素的显示与隐藏
117 0
|
前端开发 容器
css中使用定位实现吸顶效果
css中使用定位实现吸顶效果
293 2
|
前端开发
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
这篇文章介绍了HTML和CSS中的三种定位方式:相对定位、绝对定位和固定定位,并通过代码示例展示了它们如何影响元素在页面上的布局和位置。
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
|
前端开发 编译器
CSS定位(如果想知道CSS有关定位的知识点,那么只看这一篇就足够了!)
CSS定位(如果想知道CSS有关定位的知识点,那么只看这一篇就足够了!)
|
前端开发
css实用技巧——给锚点定位添加偏移
css实用技巧——给锚点定位添加偏移
423 3
|
前端开发 开发者
CSS属性选择器:精确定位元素的利器
CSS属性选择器:精确定位元素的利器
255 4