css四中定位总结备忘

css布局的核心是position属性,position:static || relative || absolute || fixed

static是默认的属性

相对定位:

相对定位相对的是它原来在文档中的位置(或者默认位置)。接下来,可以使用top、right、bottom、left属性来改变它的位置。

绝对定位三特性:

1.设置成绝对定位后默认的宽度变成内容宽度

2.设置成绝对定位的部分脱离文档流

3.绝对定位的默认参照物为第一定位祖先/根元素

固定定位:

固定定位元素的上下文是视窗,它不会随页面的滚动而移动。固定定位并不常用,最常见的情况是用它创建不随页面滚动而移动的导航元素。

时间: 2024-11-08 19:26:04

css四中定位总结备忘的相关文章

css相关 细节 优化 备忘

<p>标签不能再包含<p>,也不能包含<div>,<div>可以包含<p> a 和 img 标签是特殊的行内元素,a标签可以包含div等,几乎所有的可替换元素都是行内元素,例如<img>.<input>等等,替换元素一般有内在尺寸,所以具有width和height,可以设定.例如你不指定img的width和height时,就按其内在尺寸显示,也就是图片被保存的时候的宽度和高度. 对于表单元素,浏览器也有默认的样式,包括宽度

备忘:CSS术语词汇表——张鑫旭

一.叨点什么 写文章的时候经常用到一些CSS方面的专业词汇.但是毕竟芳华年少不在,脑袋有点秀逗了,很多名词都记不住,这种感觉比厕所便秘还难受.比如今天居然记不起来公司公认脸蛋最pp的同事的名字,没想到我会记不住美女的名字.我觉得我背后一阵萧瑟的秋风吹起,自己俨然成了漫画里面的程序猿—— 某天闲逛到nimbupani,发现有专门展示CSS术语的文章,哇咔咔,感觉好像咬到一口正宗的高邮咸鸭蛋一样,不过人家的是英文,所以我还要本地化润饰处理,然后,就可以留给自己备忘的哈,的说. 二.CSS词汇我来也

CSS布局参考 IE的If条件注释使用备忘

内容提要:在CSS布局中,还常常用到IE Hack.if IE起着非常大的作用! 关键字:Div CSS IE Hack if IE什么意思呢?下面就列举了一些在CSS常见的HACK控制语句. 作为IE的IF条件注释使用备忘,大家可以参考,有经验欢迎与网友分享. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> <!--[if IE]> 所有的IE可识别 <![endif]--> <!--[if

备忘:CSS图片垂直居中全兼容淫技整理集合

1. ie的文档流样式 writing-mode:tb-rl .box1 a{    writing-mode:tb-rl;  /* 触发layout 后面高度生效,文档流 自上往下,自右往左,宽度要自适应,文字方向在垂直方向居中 */    height:100%;    vertical-align:middle} 2. inline-block方式 .box2 i{    zoom:1; height:100%; width:0; /* 触发layout,撑起行内的高度,宽度为0,不占横向

Express模版引擎hbs备忘

最近几天折腾了下express,想找个合适的模版引擎,下面是一些折腾过程的备忘 选择标准 选择一门模版语言时,可能会考虑的几点 语法友好(micro tmpl那种语法真是够了) 支持模版嵌套(子模版的概念) 支持模版继承(extend) 前后端共用 有容错处理(最好定位到具体出错位置) 支持预编译(性能好) 注意到hbs,似乎满足大部分的需求:https://github.com/donpark/hbs getting started demo地址:https://github.com/chyi

sublime 常用快捷键备忘

转一篇sublime常用的快捷键备忘 sublime常用快捷键 选择类Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本.Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑.举个栗子:快速选中并更改所有相同的变量名.函数名等.Ctrl+L 选中整行,继续操作则继续选择下一行,效果和 Shift+↓ 效果一样.Ctrl+Shift+L 先选中多行,再按下快捷键,会在每行行尾插入光标,即可同时编辑这些行.Ctrl+Shift+M 选择括号内的内容(继续选择父括

JqGrid相关操作备忘 方法列表

JqGrid相关操作备忘 方法列表 1.获得当前列表行数:$("#gridid").getGridParam("reccount"); 2.获取选中行数据(json):$("#gridid").jqGrid('getRowData', id); 3.刷新列表:$(refreshSelector).jqGrid('setGridParam', { url: ''), postData: ''}).trigger('reloadGrid'); 4.选

Webstorm常用快捷键备忘(Webstorm入门指南)

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为“Web前端开发神器”.“最强大的HTML5编辑器”.“最智能的JavaSscript IDE”等.与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能.百度百科 软件名称: JetBrains WebStorm(java.html5开发工具) v8.0.5 官方英文版 软件大小: 140.7MB 更新时间: 2014-10-01 现将最常用的快捷键挑出来备

代码备忘, TODO宏实现

代码备忘, TODO宏实现 我们平时在开发过程中, 往往并不是憋足气一股脑敲完全部代码.每个模块, 每个函数的实现总有个先后顺序.又或者哪个部分需要做调整, 修改- 所以, 我们需要有一个东西, 来提醒我们, 起到代码备忘功能, 避免某个功能忘记实现, 也能让我们快速定位. 所以这篇文章, 就是要实现一个TODO宏, 来达到代码备忘功能. 效果如下: 下面来分析下如何实现这个宏 在实现TODO之前, 已经自带了几个预处理指令来实现报警/报错: #warning Colin #error Coli