CSS——position
position是指元素的定位方式,有:static、absolute、fixed、relative、inherit 5种。
| static | 默认,布局排版方式按照HTML代码的顺序布局。 |
| absolute | 绝对定位,相对与祖先div 中非static的元素定位。 |
| fixed | 绝对定位,脱离HTML文档流,默认位置由后续元素占用,自身相对于浏览器窗口布局定位。由于与其他元素的位置冲突,应该注意定义 z-index 属性设置 |
| relative | 相对定位,相对于自身在HTML文档中的位置进行定位 |
| inherit | 和父级div的position相同 |
http://www.cnblogs.com/bokin/archive/2012/12/07/2807322.html
http://blog.csdn.net/tomatozq/article/details/7178144
http://blog.sina.com.cn/s/blog_4bcf4a5e010008o0.html
http://zh.learnlayout.com/inline-block.html
http://www.cnblogs.com/dolphinX/p/4071725.html
http://www.cnblogs.com/yexiaochai/p/4074624.html
http://www.cnblogs.com/polk6/archive/2013/07/26/3214847.html
http://www.chinaz.com/design/2010/1229/151993.shtml
http://www.cnblogs.com/oer2001/archive/2013/08/03/3235294.html
http://www.cnblogs.com/jenney-qiu/archive/2012/03/28/2421819.html
http://www.cnblogs.com/bokin/archive/2012/12/14/2816864.html
1、
为什么行内元素(例如<a>)设置float之后才能用width调整宽度?
因为只有块元素才会有物理属性,在css世界里边,有三种形态的东西,
1. 块元素。 特性:有物理属性,width,height写值起作用,而且要占据一行。
2. 内联元素。 特性:没有物理属性。但是margin,padding值有用。不占据一行,后边可以有兄弟元素。
3. 即是块又是内联,根据兄弟兄弟元素决定。
为什么是float之后才会有物理属性,这就是块与内联元素相互转化的问题。
块元素 -> 内联元素: display:inline;
内联元素 -> 块元素: display:block;
float就是隐性的把内联元素转化为块元素,这是对内部的特性就是有物理特性,但是他不占据一行。对外是内联元素的属性。他有个坏处就是会影响兄弟元素。相当于:display:inline-block;
那为什么不直接display:inline-block;因为这个玩艺在ie6下有几个px的bug。
CSS中margin-top/bottom(padding-top/bottom)百分比为何以最近的块级祖先元素的宽度而不是高度作计算?
CSS——position的更多相关文章
- css position的使用
css position的使用 css 的 position 属性是用来设置元素的位置的,它还能设置一个元素出现在另一个元素的下层元素能用 top,bottom,left 和 right 属性设置位置 ...
- CSS position绝对定位absolute relative
常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...
- jQuery offset,position,offsetParent,scrollLeft,scrollTop html控件定位 css position
定位应用:点击一个按钮,然后在按钮的右边弹出一个提示框 1,提示框相对于屏幕进行定位,那么使用offset来取得当前按钮相对于body的top和left,然后通过$('body').prepend(t ...
- [CSS]position定位
CSS position 属性 通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式. position 属性值的含义: static 元素框正常生成.块级元 ...
- jQuery css,position,offset,scrollTop,scrollLeft用法
jQuery css,position,offset,scrollTop,scrollLeft用法: <%@ page language="java" import=&quo ...
- CSS position(定位)属性
关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...
- CSS position &居中(水平,垂直)
css position是个很重要的知识点: 知乎Header部分: 知乎Header-inner部分: position属性值: fixed:生成绝对定位的元素,相对浏览器窗口进行定位(位置可通过: ...
- CSS position属性absolute relative等五个值的解释
DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...
- 前端开发必知必会:CSS Position 全解析
此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...
- jquery 获取css position的值
jquery 获取css position的值 CreateTime--2018年5月28日14:03:12 Author:Marydon 1.情景展示 <div id="aa&q ...
随机推荐
- java 实现HTTP连接(HTTPClient)
在实习中,使用到了http连接,一直理解的很模糊,特地写个分析整理篇.分析不到位的地方请多多指教. Http 目前通用版本为 http 1.1 . Http连接大致分为2种常用的请求——GET,POS ...
- java学习小笔记(三.socket通信)【转】
三,socket通信1.http://blog.csdn.net/kongxx/article/details/7288896这个人写的关于socket通信不错,循序渐进式的讲解,用代码示例说明,运用 ...
- mssql 函数STUFF 的用法
DECLARE @limitDay INT;SET @limitDay = 92;IF DATEDIFF(DAY, '2017-12-13 00:00:00', '2017-12-13 18:00:0 ...
- Thinkpad个性化设置:F1~F12恢复正常按键,Fn与Ctrl按键互换
一.F1~F12恢复正常按键 联想Thinkpad的F1~F12键功能与其他笔记本是相反的! 也就是说,如果不按着Fn,按那几个功能键,实现的是属性设置的功能,比如直接按下F1键是静音,F2键是音量降 ...
- 利用Swoole实现PHP+websocket直播,即使通讯代码,及linux下swoole安装基本配置
swoole安装基本配置 php安装swoole 1. 下载swoole安装 wget http://pecl.php.net/get/swoole-1.9.1.tgz tar -zxvf swool ...
- jstl: <c:url> 标签
这个标签主要是用来重写 URL 地址.它的使用格式如下所示:<c:url value=”value” [context=”context”] [var=”varName”] [scope=”pa ...
- IIS7配置PHP简要说明
1. IIS7 安装的时候 要注意三个地方打得勾 万维网服务->应用程序开发功能->CGI ->ISAPI扩展 ->ISAPI筛选器 注: CGI 会在IIS7+PHP_ ...
- ZeroClipboard 简单应用
ZeroClipboard.config({ swfPath: "/scripts/ZeroClipboard.swf" }); var client = new ZeroClip ...
- Linux-监控与安全运维之Nagios
1. Nagios 简介是一个开源软件,可以监控网络设备网络流量.Linux/windows主机状态,甚至可以监控打印机它可以运行在Linux上或windows上基于浏览器的web界面方便运维人员查看 ...
- GUID在.net里的使用
GUID(全局统一标识符)是指在一台机器上生成的数字,它保证对在同一时空中的所有机器都是唯一的.通常平台会提供生成GUID的API.生成算法很有意思,用到了以太网卡地址.纳秒级时间.芯片ID码和许多可 ...