css定位

CSS position属性

序号 属性值 描述
1 static static是position的默认值,指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。\color{red}{此时 top、right、bottom、left 属性无效}
2 relative 元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(\color{red}{因此会在此元素未添加定位时所在位置留下空白}),\color{red}{相对于normal flow(文档流)中的原位置来定位},通过top、right、bottom、left 属性来相对于其原来的位置进行移动,可以设置外边距(margin),且不会与其他边距合并。
3 absolute 不为元素预留空间,通过指定元素\color{red}{相对于最近的非 static 定位祖先元素的偏移},来确定元素位置,\color{red}{会脱离normal flow}。绝对定位的元素可以设置外边距(margin),且不会与其他边距合并。
4 fixed \color{red}{不为元素预留空间},而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置,fixed相对于window固定,滚动浏览器窗口并不会使其移动,\color{red}{会脱离normal flow}。。打印时,元素会出现在的每页的固定位置。fixed属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时,容器由视口改为该祖先,可以使用 top、right、bottom、left 属性是元素偏移位置
5 sticky 盒位置根据正常流计算(这称为正常流动中的位置),然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。在所有情况下(即便被定位元素为 table时),该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时,后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky对 table元素的效果与 position: relative 相同。
6 inherit 从父元素继承 position 属性的值。

CSS display属性

序号 属性值 描述
1 inline 默认值,将设置该元素的标签像普通文本一样插入文档流,不会自动换行或者设置宽度和高度。
2 block 将绑定该属性的标签以块的形式插入到文档流中,即会自动设置宽跟高并且会换行,可以设定margin 跟padding。
3 inline-block 将绑定该元素的标签以inline内联样式插入到文档流中,然后它本身拥有block块的属性,可以设置宽度跟高度。
4 none 将该元素隐藏,不会再文档流中出现。

CSS float属性 (引用:https://www.cnblogs.com/lrzw32/p/4948514.html

float需要遵守的一些规则
  1. 浮动元素会从普通文档流中脱离,但浮动元素影响的不仅是自己,它会影响周围的元素对齐进行环绕。设置了float属性元素变成了一个块级元素的感觉,可以设置width和height属性。
  2. 包含块:浮动元素的包含块就是离浮动元素最近的块级祖先元素,浮动元素的浮动位置不能超过包含块的内边界.
  3. 如果有多个浮动元素,浮动元素会按顺序排下来而不会发生重叠的现象。
  4. 如果两个元素一个向左浮动,一个向右浮动,左浮动元素的marginRight不会和右浮动元素的marginLeft相邻,如果包含块的宽度不够大,则后面浮动的元素会向下浮动。
    5.如果有非浮动元素和浮动元素同时存在,并且非浮动元素在前,则浮动元素不会不会高于非浮动元素。
  5. 浮动元素会尽可能地向顶端对齐、向左或向右对齐。

float的特殊情况

  1. 浮动元素的延伸性:浮动元素高度大于父级元素,如果父级元素没有设置浮动,会出现浮动元素超出了父元素的底端的情况,只要将父元素也设置为浮动的就可以这就这个问题。可以理解为元素被设置成浮动后,该元素会进行延伸进而包含其所有浮动的子元素。
  2. 浮动元素超出父级元素的padding

clear属性

  1. 确保当前元素的左右两侧不会有浮动元素。
  2. \color{red}{clear只对元素本身的布局起作用}

清除浮动

清除浮动的目的是解决高度塌陷的问题。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,657评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,889评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,057评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,509评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,562评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,443评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,251评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,129评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,561评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,779评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,902评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,621评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,220评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,838评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,971评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,025评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,843评论 2 354

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,751评论 1 92
  • CSS 定位 CSS有三种基本的定位机制:普通流,浮动,绝对定位(absolute, fixed):普通流是默认定...
    _空空阅读 5,733评论 0 15
  • 当在这一个页面上实现布局和定位有几种不同的技术。使用哪种技术,很大程序上取决于内容和目标页面,因为有很多技术比别人...
    lulu_c阅读 1,054评论 0 5
  • CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...
    LorenSLJ阅读 1,006评论 0 1
  • 在CSS中关于定位的内容是:position:relative | absolute | static | fix...
    feelinghappy618阅读 637评论 0 0