【css】display与position
2016-02-20 18:01
507 查看
display属性
position 属性
1) Block-level Elements
2) Inline Elements
3) display:none 和 visibility:hidden的区别?
visibility:hidden; 会保留元素隐藏前的位置,而display:none不会
1)position: static
是html元素的默认position值,static的元素不会受top, bottom, left, and right (TBLR)的影响
2)position: relative
是相对于正常的位置,按照TBLR偏移,原来所占的空间仍然保留。
3)position: absolute
元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
A “positioned” element is one whose position is anything except static.
另外当父级有padding等属性时以content为标准
4)position:fixed
元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
position 属性
display属性
每个HTML元素都有一个默认的display值,根据这个元素的不同,默认的display value 可是是 block 或者 inline1) Block-level Elements
<div> <h1> - <h6> <p> <form> <header> <footer> <section> <ul> <li>
2) Inline Elements
<a> <span> <img>
3) display:none 和 visibility:hidden的区别?
visibility:hidden; 会保留元素隐藏前的位置,而display:none不会
position 属性
position 属性的可能值共有4个:static, relative, fixed, absolute1)position: static
是html元素的默认position值,static的元素不会受top, bottom, left, and right (TBLR)的影响
2)position: relative
是相对于正常的位置,按照TBLR偏移,原来所占的空间仍然保留。
3)position: absolute
元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
A “positioned” element is one whose position is anything except static.
另外当父级有padding等属性时以content为标准
4)position:fixed
元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- [css] line-height 百分比单位和数值单位的区别
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- 通过Mootools 1.2来操纵HTML DOM元素
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ,必先解决IE的一些细节分析
- CSS文字截取功能实现代码
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单