something about css(5)

2017-05-29  本文已影响13人  来人啊都给朕退下吧

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

浮动元素脱离了普通文档流,文档的普通流中的元素表现的就像浮动元素不存在一样。
浮动的框可以向左向右移动,直到它的外边缘碰到包含框或者另一个浮动的边缘为止。

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

清楚浮动指的是元素浮动后由于浮动元素的特性会使其他元素的布局方式受到影响,此时我们清除浮动就是使用一些方法消除浮动元素对其他元素排版布局的影响。

** 方法 **

  1. 在父容器最后添加一个空div,并清理这个div。clear:both;

  2. 使父容器生成一个BFC,因为BFC可以包含浮动。
    规定满足下列CSS声明之一的元素便会生成BFC。
    根元素

    • float的值不为none
    • overflow的值不为visible
    • display的值为inline-block、table-cell、table-caption
    • position的值为absolute或fixed
    /*方法1*/
    .clearfix{
      *zoom:1;
    }
    .clearfix:after{ 
      content:"";
      display:block;
      clear:left;
    }

    /*方法2*/
    .clearfix{
    *zoom:1;
    }
    .clearfix:after{
    content:"";
      display:table;
      clear:both;
    }​

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

定位方式 实现方法 参考点 使用场景
static 默认值,元素在普通文档流中
relative 相对定位,元素框偏移某个距离。保留它原来所在位置 元素本身 元素偏移
absolute 绝对定位,元素框从文档流中分离出来,元素定位后生成一个块级框,不论原来它在文档流中生成何种类型的框 距离最近的非static元素,没有则为body 元素垂直居中
fixed 固定定位,生产绝对定位元素,但不随着滚动条的移动而改变位置 浏览器窗口 登录框覆盖层

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

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。如果为正数,则离用户更近,为负数则表示离用户更远。z-index 仅能在定位元素上奏效。

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

二者都可以让元素发生偏移,相对定位让元素显示的位置发生,但会保留原来元素所在的位置,负margin会改变元素在文档流中的位置。

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

BFC的全称是 Block Format Content,块级格式化上下文。 规定满足下列CSS声明之一的元素便会生成BFC。

** 作用 **

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

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

相邻元素合并外边框
父子元素合并外框
空元素外边距合并
多个空元素外边距合并
上一篇 下一篇

猜你喜欢

热点阅读