css基础知识五

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

特征：

1. 浮动元素的框可以向左或者向右移动，直到它的外边缘碰到父元素包含框或者另一个浮动元素的边框为止；
2. 浮动元素不在文档普通流之中，因此文档普通流中的块级元素感知不到浮动元素的存在；
3. 在css中任何元素都可以浮动，浮动元素会生成一个块级框，而不论该元素本身是什么元素

对父容器的影响：
浮动元素脱离文档流向左或者向右移动，直到边框碰到父元素的边缘,若父元素没有设置高度，则父元素高度塌陷，高度为0；

这个是父元素没有设置高度

这个父元素设置了高度

demo

对普通元素的影响
普通元素感知不到浮动元素的存在，但是普通元素的文字会受到影响；由于普通元素感知不到浮动元素，所以它会占据浮动元素的位置，但是浮动元素的层级比普通元素高，因此时长发生浮动元素掩盖在普通元素上的情形。

普通元素被掩盖

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

清除浮动：清除浮动指的是解决浮动元素父容器高度塌陷的问题
有两种方法来清除浮动：

1. 对父容器添加以下这些属性来形成BFC达到“清浮动”效果
   float为 left|right
   overflow为 hidden|auto|scroll
   display为 table-cell|table-caption|inline-block
   position为 absolute|fixed

2. 使用clear属性
   clear属性指不允许该元素周围出现浮动元素，该元素通常用于对自己生效，例如clear:left就是指不允许自己左边有浮动元素存在

常用的清除浮动的方法：

/*方法1*/
  .clearfix{
      *zoom:1;
  }
  .clearfix:after{
      content:"";
      display:block;
      clear:left;
  }


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

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

inherit 规定应该从父元素继承 position 属性的值。

static 默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

relative 生成相对定位的元素，相对于元素本身正常位置进行定位。不会改变其他元素的位置。设置后会脱离普通文档流，会提升自己的层级参考点是该元素原来的位置。应用场景例如对图片位置做细微调整。跟realtive相似的属性有margin属性，但是margin属性位置的变动会改变后面元素位置的变动。

absolute 生成绝对定位的元素，相对于static定位以外的第一个祖先元素进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定，设置后会脱离普通文档流。absolute类似float，会提升自己的层级，很有可能覆盖其他元素，若祖辈元素都没有设置除static以外的值，则以html的border为基准定位，若设置了，则以父元素的padding为基准。绝对定位使用场景例如：设置上级元素为position:relative，然后可以利用绝对定位使该元素相对于上级元素移动到任意位置。

z-index 有什么作用? 如何使用?
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

z-index

注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 relative,absolute,fixed）
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

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

区别：position:relative;只相对自己原本位置发生偏移，不影响其它普通流中元素的位置。margin：除了让元素自身发生偏移还影响其它普通流中的元素。除此之外，margin负值分为两种，top/left是将当前元素拉出，改变的是当前元素自身，而right/bottom是将当前元素的后续元素拉进，然后覆盖当前元素，它改变的是当前元素的后续元素

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

BFC是什么？BFC英文全称是block formatting context,中文翻译为块级格式上下文，在css的W3C官方文档中是这样介绍的：
**
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。
**
可以先这样简单理解，即BFC是一种独立的布局模式，当元素满足上述特征时，即会为元素及其内容创建一个独立BFC布局模式，这种布局模式只对创建元素及其内容有作用，对外界其他元素则没有影响。

那么如何生成bfc呢？
简单点说，当对元素设置以下属性就可以生成BFC：
float: left | right;（浮动元素）
overflow: hidden | auto | scroll;（overflow值不为visable）
display: table-cell | table-caption | inline-block;（非块级元素）
position: absolute | fixed;（绝对定位元素）

bfc的特性：

1. 只有同属于一个bfc，两个元素才会发生margin重叠
   这个属性解决了嵌套元素边距嵌套的问题，给父元素设置为bfc则可解决此问题
2. bfc不会重叠浮动元素
   此属性作用：若希望普通流元素意识到float元素，不去覆盖它，给普通流元素加一个bfc，然后就有两个bfc就不会发生重叠了
3. bfc可以包裹浮动
   此属性可以用于清除浮动，将父元素设置为bfc即可解决父元素高度塌陷问题。

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

合并规则：外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。当同为正或同为负时，合并后的外边距的高度等于两个发生合并的外边距的高度中绝对值的较大者；当一正一负时，合并后的外边距的高度等于两个发生合并的外边距的和。
按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。

相邻元素

inline-block解决相邻元素的外边距重叠

嵌套元素的外边距重叠

解决办法：给父元素设置border、padding、overflow皆可以

padding

border

overflow

代码

1. 实现如下alert效果，1
2. 实现如下表单效果，2
3. 实现如下模态框效果,3
4. 实现如下导航栏效果,4