浮动定位BFC

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

浮动模型也是一种可视化格式模型,浮动的框可以左右移动(根据float属性值而定),直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中,文档的普通流中的元素表现的就像浮动元素不存在一样。
子元素都是浮动元素,那么父元素的高度度为0,在浮动元素上。其它浮动元素能感知到该浮动元素的存在,如果包含块儿太窄无法容纳水平排列的三个浮动元素,那么其它浮动块儿向下移动,直到有足够的空间,如果浮动元素的高度不同,那么向下移动的时候可能被卡住。普通元素表现得好像浮动元素不存在一样,在原来的位置,会被浮动元素覆盖。文本内容会受到浮动元素的影响,会移动以留出空间。用术语说就是浮动元素旁边的行框被缩短,从而给浮动元素留出空间,因而行框围绕浮动框。

2.清除浮动指什么? 如何清除浮动? 两种以上方法

清除浮动指解决浮动父容器高度塌陷问题,使父元素视觉上包含浮动元素。
清除浮动的方法:
1.在最后添加一个空div,对它添加clear:both;把父元素撑起来。
2.利用BFC清除浮动。生成新的BFC包围浮动元素。对父容器设置以下属性:float为 left|right,overflow为 hidden|auto|scroll,display为 table-cell|table,caption|inline-block,position为 absolute|fixed都可以形成BFC。
3.通用的清除浮动法案
.clearfix{ zoom:1;}
.clearfix:after{content:""; display:block;clear:left; } 或
.clearfix{
zoom:1; }
.clearfix:after{content:"";display:table;clear:both;}

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

inherit规定应该从父元素继承 position 属性的值;
static默认值,没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明);
relative生成相对定位的元素,相对于元素本身正常位置进行定位,因此,left:20px会向元素的 left 位置添加20px;
absolute生成绝对定位的元素,相对于static定位以外的第一个祖先元素(offset parent)进行定位,元素的位置通过 left,top, right 以及 bottom属性进行规定;
fixed生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom属性进行规定;
sticky CSS3新属性,表现类似position:relative和position:fixed的合体,在目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的表现就像position:fixed,它会固定在目标位置。

CSS有三种基本的定位机制:普通流,相对定位和绝对定位。
普通流是默认定位方式,在普通流中元素框的位置由元素在html中的位置决定,元素position属性为static或继承来的static时就会按照普通流定位,这也是最常见的方式。
相对定位对应position属性的relative值,如果对一个元素进行相对定位,它将出现在他所在的位置上,然后可以通过设置垂直或水平位置,让这个元素相对于它自己移动,在使用相对定位时,无论元素是否移动,元素在文档流中占据原来空间,只是表现出来的位置会改变。相对定位可以看作特殊的普通流定位,元素位置是相对于它在普通流中位置发生变化。
绝对定位使元素的位置与文档流无关,也不占据文档流空间,普通流中的元素布局就像绝对定位元素不存在一样。绝对定位的元素的位置是相对于距离最近的非static祖先元素位置决定的。如果元素没有已定位的祖先元素,那么他的位置就相对于初始包含块html来定位。

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

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。z-index 仅能在定位元素上奏效(例如 position:absolute;),元素可拥有负的 z-index 属性值。该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。可能的值:auto默认,堆叠顺序与父元素相等;number设置元素的堆叠顺序;inherit规定应该从父元素继承 z-index 属性的值。

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

position:relative;相对自己原本的位置发生偏移,不影响其它普通流中的元素,可能会出现空白。负margin除了让元素自身发生偏移还会影响其它普通流中的元素位置。

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

BFC(Block Formatting Contex)即块级格式化上下文。当涉及到可视化布局的时候,BFC提供了一个环境,元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。
浮动元素,绝对定位元素,非块级盒子的块级容器(例如inline-blocks,table-cells,and table-captions),以及overflow属性值不是“ visible”(visible是overflow的默认值)的块级盒子(视口除外),这些元素就会为他们的内容创建一个BFC。即float为 left|right,overflow为 hidden|auto|scroll,display为 table-cell|table-caption|inline-block,position为 absolute|fixed。
作用:
1.解决margin叠加问题 。只有同属于一个BFC时,两个元素才有可能发生垂直Margin的重叠,这个包括相邻元素,嵌套元素,只要他们之间没有阻挡(例如边框,非空内容,padding等)就会发生margin重叠,这时生成新的BFC让元素在不同的BFC中就能解决叠加问题。
2.清除浮动。BFC可以包含浮动元素,让父元素生成新的BFC就可以包围浮动元素。
3.创建自适应布局。BFC不会重叠浮动元素。利用该特性可以作为多栏布局的一种实现方式。

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

两个或多个毗邻(父子元素或兄弟元素)的普通流中的块元素垂直方向上的 margin 会发生叠加。当两个垂直外边距相遇时,它们将形成一个外边距,合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者(全部都为正值取最大者,不全是正值时为最大正外边距加负外边距得到的值,两个负值则取绝对值的最大值)。当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。当一个元素包含在另一个元素即父元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。外边距甚至可以与自身发生合并,假设有一个空元素,它有外边距,但是没有边框或填充,在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并,如果这个外边距遇到另一个元素的外边距,它还会发生合并。只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
不让相邻元素外边距合并:设置浮动定位display overflow等生成BFC使其不合并;给父元素设置border,padding间隔可以使外边距不合并。相邻兄弟间可使用同一方向上的margin设定如都设置margin-top或margin-bottom。不让两个元素的外边距合并,就要让它们之间有道分界线,这个分界线可以是border,padding或是bfc形成的独立空间。
父子外边距合并的范例:


父子外边距合并.png

不让外边距合并的方法如上所述。

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

推荐阅读更多精彩内容