深入理解css系列:css定位
一.概述
1.默认文档流定位方式
(1).HTML默认文档以流模式定位,即内容元素按照先后顺序依次上下定位;
(2).HTML标签元素总体分为块状元素、内联元素、内联块状元素,可通过该标签对应的DOM节点的display属性进行查看默认值,display值的不同决定了他们各自在默认文档流中的定位方式的不同;
以下为position的可能值。
none:隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间inline:指定对象为内联元素。
block:指定对象为块元素。
list-item:指定对象为列表项目。
inline-block:指定对象为内联块元素。(CSS2)
table:指定对象作为块元素级的表格。类同于html标签<table>(CSS2)
inline-table:指定对象作为内联元素级的表格。类同于html标签<table>(CSS2)
table-caption:指定对象作为表格标题。类同于html标签<caption>(CSS2)
table-cell:指定对象作为表格单元格。类同于html标签<td>(CSS2)
table-row:指定对象作为表格行。类同于html标签<tr>(CSS2)
table-row-group:指定对象作为表格行组。类同于html标签<tbody>(CSS2)
table-column:指定对象作为表格列。类同于html标签<col>(CSS2)
table-column-group:指定对象作为表格列组显示。类同于html标签<colgroup>(CSS2)
table-header-group:指定对象作为表格标题组。类同于html标签<thead>(CSS2)
table-footer-group:指定对象作为表格脚注组。类同于html标签<tfoot>(CSS2)
run-in:根据上下文决定对象是内联对象还是块级对象。(CSS3)
compact:
--> box:将对象作为弹性伸缩盒显示。(伸缩盒最老版本)(CSS3)
inline-box:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最老版本)(CSS3)
flexbox:将对象作为弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3)
inline-flexbox:将对象作为内联块级弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3)
flex:将对象作为弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)
inline-flex:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)
(3).块状元素单独占据一行,可设定他的宽高值。内联元素与紧挨着的内联元素(如果存在)共同占据一行,直到元素内容到达视口的最末端则换行继续以该种方式定位,内联元素不可以设置宽高。内联块状元素定位方式与内联元素相同,但不同的是有块状元素的特性即可以设定他的宽高。
2.定位方式
(1).CSS 有三种基本的定位机制:普通流、浮动和position定位。
总结来看:CSS 有三种基本的定位机制:普通流、浮动和绝对定位。除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。
二.四种position定位方式
1.static 静态定位
static方式即默认的方式,按照流式布局定位。
2.relative 相对定位
在理解默认流式布局定位的基础上,来看这种定位方式。
(1).“相对”指的是相对于自身本来在默认流中的位置,将其position属性设置为relative后,再通过top,bottom,left,right属性对其进行相对于原来位置的偏移;
(2).该元素偏移后,他本来在默认文档流中占据的空间依然存在,其紧挨其后的元素的定位依据他本来位置进行定位。
(3).该元素偏移后,可能存在覆盖其他元素的情况,所以可以通过z-index属性设置显示层级有限级别。
3.absolute 绝对定位
通过与relative相对定位进行比较的基础上,来看这种定位方式。
(1).“绝对”指的是绝对定位的元素已经脱离了文档流,普通流中其它元素的布局就像绝对定位的元素不存在一样;
(2).绝对定位的元素还是要相对于某个对象进行定位,而这个对象可以简单归纳为“绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块”,
(3).因为绝对定位的框与文档流无关,所以它们也可以覆盖页面上的其它元素。
4.fixed 固定定位
元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。即无论页面左右上线如何滚动,该种定位方式的元素都会根据你当前的视窗本身进行定位,大多应用于像类似侧栏的客服链接、底部的回到顶部按钮等需要在页面上一直显示并且其位置不会变化的元素。
三.float 浮动定位
float浮动定位可谓大杀器了,会用的人得心应手而且使用的很优雅,不明就里的人则各种混乱。
关于float的讲解w3school上的这篇http://www.w3school.com.cn/css/css_positioning_floating.asp文章已经很详细了,我也没有必要再重复造轮子了。以后在实际项目中如果碰到关于float的坑的话可以再单独进行整理,比如现在已经遇到的清除浮动的各种方法。
完。
深入理解css系列:css定位的更多相关文章
- 【前端Talkking】CSS系列——CSS深入理解之line-height
1.写在前面 两个多周的时间没有写文章了,手好痒好痒,趁着公司在装修,从上周末到本周都在家办公,同时公司的项目并不紧急,于是抽着时间梳理了一下CSS中关于行高line-height的理解,今天发布出来 ...
- HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类)
一.标签选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法
× 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息 ...
- 没人看系列----css 随笔
目录 没人看系列----css 随笔 没人看系列----html随笔 前言 没什么要说的就是自己总结,学习用的如果想学点什么东西,请绕行. CSS (Cascading Style Sheets)层叠 ...
- CSS浮动、定位
这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...
- 理解与应用css中的display属性
理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...
- (转)CSS+DIV float 定位
来自:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能 ...
- CSS入门教程——定位(positon)
CSS入门教程——定位(positon) CSS定位在网页布局中是起着决定性作用. 定位 CSS的定位功能是很强大的,利用它你可以做出各种各样的网页布局.本节就介绍一些CSS常用的定位语句. 1. ...
- CSS中的定位与浮动
CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...
- 【CSS】 CSS 定位
css 定位和浮动 *******本章大量内容copy自w3school********* 定位对于html界面还是很重要的,因为定位会直接影响到用户的视图.对于css而言,定位也比较灵活. 浮动是一 ...
随机推荐
- svn快速教程
本文拷贝自网址:http://www.subversion.org.cn/?action-viewnews-itemid-1 如何快速建立Subversion服务器,并且在项目中使用起来,这是大家最关 ...
- CentOS 7 配置静态IP
1.查看MAC地址 2.修改/etc/sysconfig/network-scripts/ifcfg-[第一步中红框内的文字] 3.添加和修改内容如下: 4.修改/etc/resolv.conf 5. ...
- Python 对不均衡数据进行Over sample(重抽样)
需要重采样的数据文件(Libsvm format),如heart_scale +1 1:0.708333 2:1 3:1 4:-0.320755 5:-0.105023 6:-1 7:1 8:-0.4 ...
- sql sever读取Excel总结【转】
主要用到openrowset,opendatasource系统函数,这两个函数任意一个都能完成任务 用这种方法可以实现Excel和sqlserver表之间的相互导入导出. openrowset的写法 ...
- Microsoft.Office.Interop第三方程序 ppt 转换为PDF出错
错误信息:Retrieving the COM class factory for component with CLSID {91493441-5A91-11CF-8700-00AA0060263B ...
- docker index服务概述
index顾名思义“索引”,index服务主要提供镜像索引以及用户认证的功能.当下载一个镜像的时候,首先会去index服务上 做认证,然后查找镜像所在的registry的地址并放回给docker客户端 ...
- Devexpress - office - 效果
项目开发时需要设计好看的UI界面,因公司使用Devexpress控件,因此用到了Devexpress自带的office效果 具体案例 新建一个RibbonForm模版 删除clientPanel(不删 ...
- C#之委托
委托是C#中非常重要的一个概念,并在C#中得到了丰富的应用,如事件,线程等.那什么是委托呢?具体来说,委托是一种引用方法的类型.一旦为委托分配了方法,委托将与该方法具有完全相同的行为.委托方法的使用可 ...
- [版本管理]有惊无险修复svn服务器Invalid filesystem revision number问题
问题起因:某一天下午,团队成员在向svn服务端提交新内容,突然整栋楼断电了,自然,提交的过程被中断了.当时,还没有什么想法. 等有电后,另外一同事在update项目时,发现无法正常使用svn,一直报异 ...
- sql之多表连接
最近遇到特别多多表连接的问题,因此随笔记下,开始学java和mysql的时间太短,有见解不周的地方,希望读者可以提出探讨. 对于left join.right join和inner join(join ...