CSS浮动 定位 12.09

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

浮动元素有3个特征：

1. 浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示；
2. 浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个（实例中为父元素）任意非浮动元素靠齐；
3. 浮动元素后面的内联元素会向此浮动元素的外边距靠齐。

影响：

• 对父元素：浮动后会无法撑开父元素，父元素会发生塌陷，变成一条线；
• 对其他浮动元素：
  同一方向浮动：浮动的元素会在一个水平上 ，彼此紧贴，当宽度不够后面的浮动元素会被挤到下一行,如果浮动元素的高度不同,那么向下移动的时候可能被卡住；
  不同方向浮动：一左一右处于一个水平线；
• 对普通元素
  浮动元素会改变它后面普通元素在文档流中的位置，在浮动元素后的普通元素会围绕浮动元素，在浮动元素之前的元素不受影响；
• 对文字：会环绕在浮动元素的外围

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

• 清除浮动指清除掉元素的float属性，消除浮动元素对其他元素的影响（如父元素高度坍塌）
  1.父元素添加overflow属性清除浮动
  优点：简单、代码少、浏览器支持好
  缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

  
  父级元素增加overflow：hiddden
  

  2.父元素添加一个伪类元素清除浮动
  原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题 优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等） 缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。

伪累清除浮动

3.用clear属性
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

清除浮动clear

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

答：有4种定位方式。
1.static **
position: static
静态定位，所有的标准流中的元素都是静态定位。
2.relative
position： relative
相对定位
需使用top，left，right，bottom属性，盒子相对自身发生偏移。但是在文档流中，它仍然占据着原来的位置，所以其他元素的位置不会发生变化。
使用场景：一般作为绝对定位的元素参考点**
3.absolute
position: absolute
绝对定位

• 无父级元素或父级元素未设置定位相当于body定位
• 相对于 static 定位以外的第一个父元素进行定位（也可以说是根据最近的定位上下文来定位）。元素会具有收缩性，如果没有设置宽度，元素会根据内容自动调整宽度。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。绝对定位使元素脱离文档流，因此不占据空间。页面中经常是绝对定位和相对定位一起使用子元素使用绝对定位，父元素使用相对定位（即子绝父相）
  4.fixed
  position：fixed
  固定定位
  相对于浏览器边框；
  fixed其实特性跟absolute都一样，唯一的区别在于定位不一样，fixed永远是根据浏览器窗口来定位，无论其他元素怎么设置，都影响不了它。
  使用场景：一般用于页面中的广告，固定顶栏，回到顶部按钮等

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

z-index是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。
 z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。

z-index使用参考

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

position: relative是相对定位，margin是外间距。
1.position:relative偏移的距离的参照物是元素本身的位置，负margin偏移的距离的参照物是该元素到其他元素的距离。
2.position:relative使元素位置发生偏移不会影响其他元素在文档流中的位置，负margin元素位置发生偏移会影响其他元素在文档流中的位置，后面的元素会补上位置。

6. 如何让一个固定宽高的元素在页面上垂直水平居中?

设置position: absolute然后top，left值为50%，最后设置margin-top，margin-right负数值,其绝对值为宽高的一半但该方法的缺点是必须要知道要居中元素的高度和宽度

demo居中

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

• BFC(Block Formatting Context)块级格式化上下文，它是一个独立的渲染区域， 它规定了内部的元素如何布局，不受这个区域外的元素影响。
• 生成BFC的条件：
  1.根元素
  2.有float属性且float值不为none
  3.position为absolute或fixed
  4.display为inline-block, table-cell, table-caption, flex, inline-flex中的任意一个。
  5.有overflow属性且overflow属性不为visible
  只要元素有以上属性中的任意一条，那么该元素内部的空间就形成了BFC
  BFC 的作用
• 清除浮动

• 两栏布局

  
  两栏布局.png
• 阻止上下相邻块级元素的外边距合并

消除合并

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

出现外边距合并的场景：
外边距合并的根本原因是两个不同的margin直接接触
在什么场景下会出现外边距合并？

• 兄弟元素：第一个元素的下margin和第二个元素的上margin发生合并

• 父子元素：元素的上margin和父容器的上margin发生合并，元素下margin和父容器的下margin发生合并

• 单个元素：元素本身为空元素，那么元素的上margin和下margin发生合并
  外边距如何合并？

• 所涉及的两个margin值若不等：外边距值总是取这两个外margin值最大的一个显示效果

• 所涉及的两个margin值若相等：外边距值就取这个相等的值显示效果
  如何不让相邻元素外边距合并？

• 生成BFC——给元素规定浮动或者是绝对定位等
  解决父子外边距合并

• border:1px solid transparent;(父元素设置边框)

• padding;(父元素设置内边距)

• float:left/right

• position:absolute

• display:inline-block

• overflow:hidden/auto

  
  父子外边距重合.png

形成BFC overflow 形成BFC inline-block
(https://img.haomeiwen.com/i3889793/4009e57c1e07d91e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 设置父元素border.png

9.下拉框

代码
预览

10.导航条

代码
预览