浮动和定位

浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响?

float CSS属性指定一个元素应沿其容器的左侧或右侧放置,文本和内联元素将围绕它。
然后,该元素从网页的正常流动中获取,尽管仍然保持一部分流动,与绝对定位相反。

  • 影响
  1. 对于父容器而言,如果没有设置其高度,而子元素设置float,会造成‘塌陷’的效果。可用BFC原理或者清除浮动解决.
  2. 对于其他浮动元素而言: 如果宽度足够会水平排列; 不足会下移靠左/右移动;当第一个浮动元素的高度大于第3个浮动元素的高度并且整体宽度不足以水平放下多个浮动元素,会造成‘卡住’的效果。
  3. 普通元素:
  • 当为块级元素时会当浮动元素不存在
  • 当为内联元素时会‘感知’浮动元素,环绕浮动元素。

清除浮动是指什么?如何清除浮动?

清除浮动是指结合clear属性让父元素在视觉上包围浮动元素。清除浮动的方法:

  1. 在父元素的子元素最后添加一个空div,并对其设置样式:clear:both;由于在子元素最后添加了空div,并清除了浮动,因此父容器被撑开,实现了在视觉上包围浮动元素的效果。
  2. 利用BFC来清除浮动。因为BFC可以包含浮动,因此可以让父元素生成一个新的BFC从而包围浮动的子元素。
    可以对父元素设定以下样式之一生成新BFC。
    float: left / right;
    overflow: hidden / auto / scroll;
    display: table-cell / table-caption / inline-block;
    position: absolute / fixed;

有几种定位方式,分别是如何实现定位的,参考点是什么,使用场景是什么?

position: relative 根据自身定位
absolute 根据已定位的父级来绝对定位,都没有根据HTML来进行定位.
fixed 根据浏览器窗口来进行定位
static 默认样式
sticky 可以看成是relative和fixed的集合体.当在页面可视范围内以relative,当页面滚动超出目标区域时,以fix定位.
一般 absolute 配合 relative使用.当父容器的宽高可变时,使用绝对水平垂直居中。
sticky 是css3的新属性,兼容性不太好。

z-index 有什么作用? 如何使用?

层叠上下文 .配合定位使用 z-index大的在上,小的在下。
这里说一下我的理解:

  1. BFC和层叠上下文没关系
    BFC的目的是让自己块中的元素(包括float)不会影响其他元素,在二维平面内。(这个说法并不准确,准确的来说是让该元素内部的元素对外部元素所产生的影响转变成该元素对外部元素产生影响)。
    而层叠上下文,是指覆盖逻辑(z-order)

特性:

层叠上下文的层叠水平要比普通元素高;
层叠上下文可以阻断元素的混合模式(见此文第二部分说明);
层叠上下文可以嵌套,内部层叠上下文及其所有子元素均受制于外部的层叠上下文。
每个层叠上下文和兄弟元素独立,也就是当进行层叠变化或渲染的时候,只需要考虑后代元素。
每个层叠上下文是自成体系的,当元素发生层叠的时候,整个元素被认为是在父层叠上下文的层叠顺序中。

原则

谁大谁上:当具有明显的层叠水平标示的时候,如识别的z-indx值,在同一个层叠上下文领域,层叠水平值大的那一个覆盖小的那一个。
后来居上:当元素的层叠水平一致、层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素。

(以上来自张鑫旭大神的博客,这里摘抄一下)
这里要注意,虽然z-index只能对定位元素应用,但是z-index也会使该定位元素对其他元素产生影响(其他元素默认值应该为z-index=0)。该元素的子元素和其他上下文元素中的子元素覆盖关系取决于这两个元素之间的关系(原因还是在张鑫旭大神的博客中。地址)

position:relative和负margin都可以使元素位置发生偏移?二者有什么区别

根据元素还在普通文档角度看。设置positon: relative 还在原来的文档流,-margin则相反(-margin有可能会被其它元素所覆盖,不清楚为什么如果那位大神知道请教我)。
示例


image.png

BFC 是什么?如何生成 BFC?BFC 有什么作用?举例说明

块级格式化上下文(block formart context) css2.1新增的一个概念。它是页面中的一个渲染区域,有自己的一套渲染规则。里面的子元素根据这个规则进行定位. (可以理解为一个与外界格局的包含块,里面不管浮动 定位 什么的 即使在怎么'翻江倒海'都不会其临边的元素.该怎么就怎么显示)body 根元素浮动元素定位元素 position: absolute/fixedpositon: relative/sticky/static不会触发BFC

display: inline-block /table-cell/flexoverflow: auto/hidden/srcoll 除了visible一般如果父容器不设置高度,里面的子元素采用某种方式脱离文档流,会造成高度塌陷。BFC可以解决父容器没有高度的问题。比如实现一个两栏布局: [父元素可以实现高度自适。,可以实现一个简单的二栏布局。

在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例

普通文档流,同一个块级上下文中 的垂直方向上。为什么会产生这种效果,完全是历史遗留问题,主要是为了解决文字排版的需求。比如相邻的块级分别设置margin为50px 和 100px. 会选择大的margin作为参考值


比如 元素内嵌套多个div,最终参考的是marign最大的那个值.
qq 20170503232222
相邻的两个元素一个正maing一个是负margin,最终取计算后的值。可以不在同一个块级上下文中。

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,727评论 1 92
  • 浮动元素的特征及影响 特征: 浮动模型也是一种可视化格式模型,浮动的框可以左右移动(根据float属性值而定),直...
    Joey的企鹅阅读 881评论 0 0
  • 浮动元素特征 对父容器、其他浮动元素、普通元素、文字的影响 浮动会使应用此属性的元素脱离文档流。按指定的位置来移...
    ezrealor阅读 378评论 0 0
  • 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响?浮动的元素会脱离文档流,向左或者向右移动...
    饥人谷_wanpp阅读 666评论 0 49
  • 一个外地人,来北京读书,之后工作,之后结婚买房,之后生子 ,之后……这里是她的心情笔记,她的观影记录,她的生活,她...
    王兮阅读 146评论 0 0