浮动_定位_BFC_边距合并

2017-11-01  本文已影响0人  肥鱼666

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

特征：浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，因此文档普通流中的块级元素感知不到浮动元素的存在。
对父容器影响：浮动元素脱离文档流向左或者向右移动，直到边框碰到父元素的边缘。引起的父元素高度塌陷。
对其他浮动元素的影响：父容器足够宽，与其他浮动元素同一水平方向依次排列。父容器宽度在同一水平方向上不能同时容纳全部浮动元素时，超出父容器宽度的浮动元素向下移动,直到有足够的空间,如果水平排列三个以上高度不同浮动元素，那么向下移动的时候可能被卡住。
对普通元素的影响：浮动元素之前的普通元素不受影响。浮动元素之后的普通元素因感知不到浮动元素的存在会被浮动元素覆盖。
对文字的影响：文字所在行框（或display：inline-block）因为浮动元素的挤压而缩短，从而围绕浮动元素排列。

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

所谓清除浮动是指元素的侧边不允许出现浮动元素,从而使得浮动元素因为不占据普通文档流空间而破坏父元素高度塌陷问题得以解决,主要通过clear属性实现。

  1. 在浮动元素之后添加一个新的空标签并给其设置clear:both
  2. 在浮动元素的父级元素上添加属性overflow：auto
  3. 结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。
    给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。如下所示:
.clearfix:after{
  content: ""; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
  }

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

4 种不同类型的定位，这会影响元素框生成的方式。
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
参考点：自身在文档流中的位置。
使用场景：一般作为绝对定位的元素参考点，或者页面图片的小偏移。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
参考点：距离最近的非static祖先元素位置。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位。
使用场景：元素的水平垂直居中。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
参考点：参考浏览器窗口(视窗)的位置。使用场景：相对于浏览器窗口位置始终不变的显示窗口，比如：固定边栏和底栏

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

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注：元素可拥有负的 z-index 属性值。
注：z-index 仅能在定位元素上奏效（例如 position:absolute、relative、fixed）
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

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

position:relative元素显示位置发生变化，但是元素在文档流中的位置不变，不影响后面元素在文档流中的布局。
margin:top/bottom..元素的显示位置和在文档流中的位置均发生变化，会影响后面元素在文档流中的位置。

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

块格式化上下文（block formatting context） 是页面 CSS 视觉渲染(visual CSS rendering)这个过程中的一个概念。它是决定块盒子的布局及浮动元素相互影响的一个因素。具有对内部元素的包裹性及对外部元素的独立性。
BFC有三个特性

float: left|right
overflow: hidden|auto|scroll
display: table-cell|table-caption|inline-block
position : absolute|fixed(绝对定位)

利用上述特性，BFC可以：
1、解决外边距合并的问题，让两个块级元素处于不同的BFC中。
2、解决父容器高度塌陷问题。
3、解决文字对浮动元素环绕的问题。

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

上一篇 下一篇

猜你喜欢

热点阅读