6.css3定位--position
⑴Static默认值,没有定位。
⑵Absolute绝对定位。后面的元素会补上原来偏移的位置。
⑶Relative相对定位。后面的元素不会补上原来偏移的位置。
⑷Fixed绝对定位。相对于浏览器窗口固定位置。
⑸Z-index设置元素的堆叠顺序。
(6)Clip设置剪裁的元素形状。Clip:rect(top,right,bottom,left)。定义一个形状,元素会被 裁剪到这个形状内。(只能在元素设置了position:absolute或position:fixed才 起作用。且目前只有矩形能使用)
(7)Vertical-align设置元素的垂直对齐方式。
Baseline默认。元素放在父元素的基线上。
Top把元素的顶端与行中最高元素的顶端对齐。
Middle把元素放在父元素的中部。
Bottom把元素的顶端与行中最低的元素的顶端对齐。
text-top把元素的顶端与父元素字体的顶端对齐。
text-bottom把元素的底端与父元素字体底端对齐。
Sub垂直对齐文本的下标。
Super垂直对齐文本的上标。
(8)float浮动。
left元素向左浮动。
Right元素向右浮动。
(9)clear清除浮动。
Left清除左浮动。
Right清除右浮动。
Both清除所有浮动。
(注意:绝对定位可以层叠,相对定位不可以。相对定位会占据它原来的位置,绝对定 位不会。)








6.css3定位--position的更多相关文章
- CSS3 定位| Position研究
视区(视口) 当浏览者查看一份网页文件时,通常使用者代理(User Agents, UA, 浏览器)会提供给浏览者一个视区(视窗或者是画面里的其它可视区域).当我们调整视区大小时,UA 就有可能会改变 ...
- CSS3定位和浮动详解
本文为大家分享CSS3定位和浮动的基础概念,与使用方法,供大家参考,具体内容如下 一.定位 1. css定位: 改变元素在页面上的位置 2. css定位机制: 普通流: 浮动: 绝对布局: 3. cs ...
- css定位position属性深究
1.static:对象遵循常规流.此时4个定位偏移属性不会被应用. 2.relative:对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进 ...
- css 温故而知新 定位(position)与权限(z-index)
1.进行定位(position)的元素的权限(z-index)永远比没有定位的高. 2.如果两个元素都定位了,无论是相对定位还是绝对定位.他们的权限都是等权的. 3.两个相同定位的元素,除了z-ind ...
- 定位 position: absolute & relative
[position:absolute] 意思是绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,有以下属性: 1)如果没有TRBL,以父级 ...
- css定位position认识
1.绝对定位(position: absolute) 2.相对定位(position: relative) 3.固定定位(position: fixed) 绝对定位 设置position:absolu ...
- div+css定位position详解
div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...
- 通过定位position="fixed"实现网页内容的固定层效果
在网页的顶部或者底部导航栏中经常需要使用到固定层的效果,即紧挨浏览器窗口的顶部或底部而网页其他内容的影响. 一.实现 主要通过设置导航栏元素的位置属性position="fixed" ...
- [转载]CSS元素的定位position
CSS元素的定位position 属性position 值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一 ...
随机推荐
- cpp 实现简易String类
需求 实现一个String类 自己写的String headers/String.h #ifndef __MYSTRING__ #define __MYSTRING__ #include <st ...
- python3.x使用cxfreeze将.p打包成.exe
之前写了一个使用ffplay批量查看格式为h264的图片,每次抽帧后都要打开pycharm编译器来运行程序,然后才能正常查看图片,或者在其他没有安装python环境的电脑中运行,很不方便.为此,在网上 ...
- 解析获得的网页数据(XML文件或JSON文件)
1.解析XML:使用Pull方式. 需要导入jar包:xmlpull-xpp3-1.1.4c.jar //Pull解析XML文件 private void parseXMLWithPull(Strin ...
- WIN10下安装Linux子系统并安装xface4界面
WIN10下安装Linux子系统并安装xface4界面,使用win10自带的远程桌面工具登陆成功. 成功截图: 安装步骤 1.安装[适用于Linux的Windows子系统]组件 2.win10应用商店 ...
- React Native商城项目实战07 - 设置“More”界面导航条
1.More/More.js /** * 更多 */ import React, { Component } from 'react'; import { AppRegistry, StyleShee ...
- tensorflow源码分析——LSTMCell
LSTMCell 是最简单的LSTMCell,源码位于:/tensorflow/contrib/rnn/python/ops/core_rnn_cell_impl.py.LSTMCell 继承了RNN ...
- SPEL 表达式解析
Spring Expression Language 解析器 SPEL解析过程 使用 ExpressionParser 基于 ParserContext 将字符串解析为 Expression, Exp ...
- 【flask】项目集成Sentry收集线上错误日志
flask集成sentry分为4个步骤: 首先在sentry官网注册1个账号 然后创建1个新的项目,这里我选择的是flask,这会得到一些关于sdk的使用说明 接下来创建一个简单的flask项目使用s ...
- Linux_OpenSSH远程连接
目录 目录 SSH server SSH服务属性 SSH协议执行原理 SSH连接方式 ssh Commands scp commands sftp commands SSH在生产环境中的使用 系统间备 ...
- Jmeter接口测试系列之测试用例编写和调用
在使用Jmeter进行接口测试时,首先需要根据接口定义,编写响应的接口测试用例,在编写接口测试用例时,我们根据测试的侧重点不同,使用不同的方式编译测试用例. 一种是:整个请求参数作为一个变量,进行测试 ...