深入理解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而言,定位也比较灵活. 浮动是一 ...
随机推荐
- 机器学习之决策树熵&信息增量求解算法实现
此文不对理论做相关阐述,仅涉及代码实现: 1.熵计算公式: P为正例,Q为反例 Entropy(S) = PLog2(P) - QLog2(Q); 2.信息增量计算: Gain(S,Sv) = E ...
- Linux 服务器IO模型 epoll
epoll模型 #include <unistd.h> #include <sys/types.h> /* basic system data types */ #includ ...
- C++笔记(1)explicit构造函数
按照默认规定,只有一个参数的构造函数也定义了一个隐式转换,将该构造函数对应数据类型的数据转换为该类对象,如下面所示: class String { String ( const char* p ); ...
- android SDK下载及中文API地址
中文API:http://wiki.eoeandroid.com/Android_API_Guides Android Dev Tools官网地址:www.androiddevtools.cn 收集整 ...
- 深入浅出Mybatis系列(二)---配置简介(mybatis源码篇)
上篇文章<深入浅出Mybatis系列(一)---Mybatis入门>, 写了一个Demo简单体现了一下Mybatis的流程.本次,将简单介绍一下Mybatis的配置文件: 上次例子中,我们 ...
- VS2010部署Asp.net程序到本地IIS 7
部署自己的网站到本地IIS 当你做一个网站,你想要在局域网访问的时候,你就可以部署到自己的IIS中然后他们通过 ip 去访问.下面就是怎么部署Asp.net 的网站怎么到本地IIS 上的. 1 ...
- HTTP 错误 404.2 - Not Found 由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置,无法提供您请求的页面
详细错误:HTTP 错误 404.2 - Not Found. 由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置,无法提供您请求的页面. 出现环境:win7 + IIS7.0 解决办法 ...
- MySQL5.5绿色版1067
mysql的绿色安装版,按照很多文章进行配置,会出现 配置文件里面添加了 [client] default-character-set=utf8 [mysqld] default-character- ...
- Fragment的startActivityForResult和Activity的startActivityForResult的区别
2016-08-30 18:22:33 前提:我们的APP要兼容Api level 11以前的,所以必须用FragmentActivity 1.对于Fragment的,我们很多时候都会在Activit ...
- 常见JDBC连接数据库字符串
1.Mysql 驱动类:com.mysql.jdbc.Driver 连接字符串:jdbc:mysql://localhost:3306/dbname 2.Oracle 驱动类:oracle.jdbc. ...