四、定位方式

简介:缩进或外凸是指拉伸型元素一条或多条边与上级容器重叠时,修改该元素的高度或宽度;偏移指设定尺寸或收缩适应型元素在不改变高度和宽度情况下,元素整体偏离常规流位置;对齐指设定尺寸或收缩适应型元素在不改变高度和宽度情况下,将其位置重新定位到上级容器的其中一条边,或者相对于该边偏移一定位置。

1、         缩进:先将元素拉伸到容器各边,然后相对容器各边偏移。正值外边距产生缩进效果,负值外边距产生外凸效果。

2、         静态偏移:static   静态行内元素:设置margin-lleft/right使元素左右偏移

静态块级元素:设置margin使元素左右上下偏移

3、         静态表格偏移和缩进:使用左右外边距可以设定尺寸型或收缩适应型表格发生偏移,若设定margin-left的值,则需要将margin-right设置为auto,反之亦然;

拉伸型表格宽度设置为小于%100的百分数,并且将其左右外边距设为auto;

4、浮动偏移:使用外边距使浮动元素偏移,外边距会使浮动元素偏移而不会改变尺寸大小。Float:left/right     margin:+/-value

5、 绝对偏移与固定偏移absolute/fixed:使用margin-left/top使元素偏离常规流

6、 相对偏移:相对元素是指设置了position:relative的浮动元素或静态元素。使用top和left使元素偏离当前位置。与元素的外边距不同,相对偏移不会对其他元素位置产生影响。元素可重叠,z-index  。

7、静态行内对齐:水平对齐text-align:left/right/center/justify

将line-height设置为大于内容高估,可以设置垂直对齐vertical-align:constant/value

8、静态块级对齐与偏移:margin-right:auto   margin-left:value使元素左对齐或偏移

Margin-left:auto   margin-right:auto元素在上级元素中实现居中对齐

Margin-left:auto   margin-right:value使元素右对齐或偏移

9、 静态表格对齐与偏移的设置与静态块级元素相同。

10、绝对对齐与偏移:

使元素相对左边偏移:

left:0   right:auto使元素左对齐

margin-left:+value相对左边向右偏移;margin:-value相对左向左偏移

11、绝对定位元素相对最近定位祖先元素实现水平居中:

width:+value指定宽度;left:0    right:0   margin-left:auto   margin-right:auto

时间: 2024-12-09 22:26:28

四、定位方式的相关文章

android 定位的四种方式

[原文] 开发中对于地图及地理位置的定位是我们经常要用地,地图功能的使用使得我们应用功能更加完善,下面总结了一下网络中现有对于介绍android定位的4种方式,希望对大家有帮助: android 定位一般有四种方法,这四种方式分别是:GPS定位,WIFI定准,基站定位,AGPS定位,                             (1)Android GPS:需要GPS硬件支持,直接和卫星交互来获取当前经纬度,这种方式需要手机支持GPS模块(现在大部分的智能机应该都有了).通过GPS方

CSS的三种定位方式介绍(转载)

在CSS中一共有N种定位方式,其中,static ,relative,absolute三种方式是最基本最常用的三种定位方式.他们的基 本介绍如下. static默认定位方式relative相对定位,相对于原来的位置,但是原来的位置仍然保留absolute定位,相对于最近的非标准刘定位,原来的位置消失,被后边的位置所顶替 下面先演示相对定位的案例 [html] view plain copyprint? <!DOCTYPE html> <html> <head> <

【高德地图API】从零开始学高德JS API(七)——定位方式大揭秘

摘要:关于定位,分为GPS定位和网络定位2种.GPS定位,精度较高,可达到10米,但室内不可用,且超级费电.网络定位,分为wifi定位和基站定位,都是通过获取wifi或者基站信息,然后查询对应的wifi或者基站位置数据库,得到的定位地点.定位数据库可以不断完善不断补充,所以,越定位越准确.本文详细描述了,如果使用高德JS API来实现位置定位.城市定位的方法,包含了IP定位,浏览器定位,检索定位等多种网络定位方法.当然,如果您的手机有GPS功能,那么使用浏览器定位的时候,会自动获取GPS信息,使

cocos2d-x中锚点设置及定位方式

问题 在cocos2d演示样例代码HelloCpp中,为什么要将CCMenu设置位置到CCPointZero,即使CCMenu的锚点是在(0.5, 0.5)? 回答 这是由于CCMenu没有使用锚点进行坐标定位,而是使用的坐标原点.也就是说,CCMenu的坐标原点放到了其父节点的坐标原点. 延伸 不光是CCMenu没有使用锚点定位,像CCLayer,CCScene都没有使用锚点定位.详细设定是在构造函数中设计标记m_bIgnoreAnchorPointForPosition = true;下表描

selenium的定位方式

第1种方法:通过绝对路径做定位(相信大家不会使用这种方式) By.xpath("html/body/div/form/input") By.xpath("//input") 第2种方法:通过元素索引定位 By.xpath("//input[4]") 第3种方法:使用xpath属性定位 By.xpath("//input[@id='kw1']") By.xpath("//input[@type='name' and @

定位方式 及CSS高级技巧

定位 Background-position 背景位置 浮动,在一个浮字上面,我们的定位,在一个位上.CSS离不开定位,特别是后面的JS特效,天天和定位打交道. 为什么要使用定位? 元素的定位属性 元素的定位属性主要包括定位模式和边偏移两部分. 1.边偏移 边偏移属性 描述 top 顶端偏移量,定义元素相对于其父元素上边线的距离 bottom 底部偏移量,定义元素相对于其父元素下边线的距离 left 左侧偏移量,定义元素相对于其父元素左边线的距离 right 右侧偏移量,定义元素相对于其父元素右

Android 查看项目依赖树的四种方式

Android 查看项目依赖树的四种方式: 方式一: ./gradlew 模块名:dependencies //查看单独模块的依赖 ./gradlew :app:dependencies --configuration compile //查看项目的编译依赖 方式二:使用Gradle Project 方式三:安装Android Studio插件 gradle view 方式四:如果你嫌在命令行窗口展示观看不友好,这里还有一种体验更好的方式. 输入下面命令行: ./gradlew build --

selenium8中元素定位方式

Selenium对网页的控制是基于各种前端元素的,在使用过程中,对于元素的定位是基础,只有准去抓取到对应元素才能进行后续的自动化控制,我在这里将对各种元素定位方式进行总结归纳一下. 这里将统一使用百度首页(www.baidu.com)进行示例,f12可以查看具体前端代码.WebDriver8种基本元素定位方式find_element_by_id() 采用id属性进行定位.例如在百度页面中输入关键字 Selenium 进行搜索.百度部分关键源码如下:<span class="bg s_ipt

Android——数据存储(四种方式之一)SharedPrefereces

Android--数据存储(四种方式) 1.SharedPrefereces   轻量级.XML  存储文件名,数据保存在data/data/basepackage/shared_prefs/myopt.xml中   实例-收藏-记住密码自动登录 //一种轻量级的数据存储方式//通过KEY 存入数据--putxxxx(key,value) 取出数据--getxxxx(key  default)   2.读写SD卡  SD的根目录  适用于数据流读写 3.SQLite  轻量级.dp文件多用于手机

新接触的多几种定位方式(相对定位、绝对定位、固定地位和浮动)

本周学习了页面布局相关的东西,网页 布局中,几种定位是我们经常用到的一个知识点,现在罗列一下目前接触到的剧中定位 方式以及其具体解释: 1.relative(相对定位) 在static的基础上,让一个元素在他本来的位置做一些位移,可以将该元素定位设置为relative,同时指定相对位移(利用top,bottom,left,right).有一点需要注意的是,相对定位的元素没有脱离文档流,仍然占据着他本来占据的位置空间. 2.absolute(绝对定位) 中将一个元素放至指定位置,可以使用absol