CSS定位有几种?分别描述其不同
static(静态定位):即默认值,元素框正常生成的,top、right、bottom、left这些偏移属性不会影响静态定位的正常显示(属性不应用);
relative(相对定位):元素相对自身偏移某个位置,元素仍保持其未定位前的形状,它原本所占的空间仍保留,可通过z-index进行层次分级,子元素可相对该元素进行绝对定位;
absolute(绝对定位):元素框从文档流完全删除,相对于其最近的父级块元素(如果父级 position 为 static 时,absolute元素将以body坐标原点进行定位),元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框,可通过z-index进行层次分级;
fixed(固定定位):它所相对固定的对象是可视窗口,与其他无关,可通过z-index进行层次分级。
CSS定位有几种?分别描述其不同的更多相关文章
- CSS定位的三种机制:普通流、绝对定位和浮动
1.普通流: position : static – 元素框正常生成.即上述不对元素进行任何样式设置的默认形态. position : relative (此时设置top, right, bottom ...
- CSS定位:几种类型的position定位的元素
当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来 ...
- CSS中的三种基本的定位机制
CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 一.普通流 除非专门指定,否则所有框都在普通流中定位.普通流中元素框的位置由元素在(X)HTML中的位置决定.块级元素从上到下 ...
- css中的三种基本定位机制
css中的三种基本定位机制 a.普通文档流 b.定位:相对定位 绝对定位 固定定位 c.浮动 1.普通流中,元素位置由文档顺序和元素性质决定,块级元素从上到下依次排列,框之间的垂直距离由框的垂直mar ...
- CSS中的三种基本的定位机制(普通流、定位、浮动)
一.普通流 普通流中元素框的位置由元素在XHTML中的位置决定.块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到.行内元素在一行中水平布置. 普通流就是html文档中的元素如块 ...
- css定位方式有哪几种?
复杂的网页布局都是通过各种网页元素灵活定位实现的,网页中的各种元素定位都有自己的特点.下面我们来看一下css的几种定位方式. float定位(即浮动定位): 这种定位方式很简单,只需规定一个浮动的方向 ...
- 练习题 --- 写出5种css定位语法
写出至少5种css语法(每种语法不一样)
- css定位和浮动
1.css中一切元素皆为框.div.p.h1等为块框:span.strong等为行内框,(在文本中每一行会被自动默认为行框,行框和行内框是不一样的概念).通过display可以改变框的类型,行内框通过 ...
- CSS定位(CSS定位概述、相对定位、绝对定位、浮动)
CSS 定位属性 CSS 定位属性允许你对元素进行定位. 属性 描述 position 把元素放置到一个静态的.相对的.绝对的.或固定的位置中. top 定义了一个定位元素的上外边距边界与其包含块上边 ...
随机推荐
- R镜像源的切换
如果是默认的R安装一般会很慢 install.packages(pkgs, lib, repos = getOption("repos"), contriburl = contri ...
- GraphHopper-初识
GraphHopper GraphHopper is a fast and Open Source road routing engine. Is fast and memory efficie ...
- Python 用(无脑 and 有脑)方式解决小练习
题目:企业发放的奖金根据利润提成. 利润(I)低于或等于10万元时,奖金可提10%: 利润高于10万元,低于20万元时,低于10万元的部分按10%提成, 高于10万元的部分,可提成7.5%:20万到4 ...
- k8s开发实践
代码自动生成:https://blog.openshift.com/kubernetes-deep-dive-code-generation-customresources/ 自定义controlle ...
- matplotlib笔记3
关于matplotlib的绘制图形的基本代码,我们可以参照下面的连接 https://matplotlib.org/gallery/index.html https://matplotlib.org/ ...
- 用mkdocs在gitee码云上建立一个简单的文档博客
利用mkdocs建立简单的文档博客 一.概述 MkDocs 是一个用于创建项目文档的 快速, 简单 , 完美华丽 的静态站点生成器. 文档源码使用 Markdown 来撰写, 用一个 YAML 文件作 ...
- Oracle 11g xe版本---总结1
一.创建用户和授予权限 1.1 环境: Oracle 11g xe 第三方图形客户端: PLSQL Windows 10 必须登录 HR 用户,下面的查询会使用到 HR 中的表. 1.2 SQL 语句 ...
- vue elementui如何修改el-table头部样式
找到el-table加入红色代码 <el-table :row-style="tableRowStyle" :header-cell-style="tableHea ...
- springboot整合druid、mybatis
目的: 1.springboot配置数据库连接池druid 测试druid中url监控 2.springboot整合mybatis 测试查删案例 3.springboot整合pagehelper sp ...
- robot framework 怎么验证搜索无记录,页面元素不存在
假设你要验证搜索无记录,页面元素不存在,假设我搜索的文本为你好 页面展示为如下 搜索:你好 假设页面搜索有结果: 你好 class=vtext 你好1 class=vtext 你好2 class ...