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形成的独立空间。
父子外边距合并的范例:
不让外边距合并的方法如上所述。