第十弹-浮动、定位

一、文档流的概念指什么？有哪种方式可以让元素脱离文档流?

• 文档流概念：文档流即是普通流，是文档中可显示对象在排列时所占用的位置，行内元素从左到右，块级元素从上到下；
• 脱离文档流的两种方式：
• 元素浮动：float：left|right，left为元素左浮，right为元素右浮；
• 生成绝对定位元素：position：absolute|fixed；

二、有几种定位方式，分别是如何实现定位的，使用场景如何？

• 四种定位方式，如下表格：
  

三、absolute, relative, fixed 偏移的参考点分别是什么

• 见题二

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

• 作用：z-index用来设置重叠元素的堆叠顺序；
• 使用方法：其默认值为0，也可以为负值，z-index数值从大→小分别对应元素放置从顶层→底层，使用时按自己的要求设定对应大小的值；

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

• position:relative: 相对定位，实际占据空间未变化，即元素本身在正常文档流中的位置会被记忆，不会发生变化；
• 负margin：元素偏移，元素偏移后其在正常文档流中的位置发生改变，其后的普通流元素位置也会跟着改变；

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

• 为元素添加属性，即可实现自适应垂直水平居中：
  position: absolute;
  right: 50%;
  bottom: 50%;
  margin-right: -value px;/value为元素固定宽的50%/
  margin-bottom: -value px;/value为元素固定高的50%/
• 实例展示如下图：
  q-6

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

• 浮动元素特征：和绝对定位定位一样浮动元素也会脱离文档流，不占据空间，只存在节点；
• 对其他浮动元素、普通元素、文字的影响：
  • 浮动元素与浮动元素之间有感知，浮动按文档流的渲染顺序依次排列，以外边距为界限；
  • 浮动元素与普通元素之间关联，背景和边框都可以重叠，但是注意重叠时普通元素内部文本会被挤出包围浮动元素显示；
  • 浮动元素前后的文字会以浮动元素的外边距为边界包围浮动元素；

八、清除浮动指什么? 如何清除浮动?

• 清除浮动定义：清除浮动元素脱离文档流后所造成的一系列影响，即让浮动元素在视觉上看起来是被父元素包围的；
• 清除浮动的方法，如下表格：
  

九、代码

一. 写出如下两栏布局, 其中中间区块宽度900px, 居中,左侧边栏宽度200px, 右侧边栏宽度700px:

1. 做完可参考范例
2. ps: 图片左浮动，导航栏整体右浮动，导航栏里面的li元素左浮动
3. ps: aside左浮动，main左浮动

4. 凡是有浮动的地方，其直接父元素必须清除浮动

   
   

• 答：代码10-1

二. 不使用背景图片实现如下效果:

• 答：代码10-2

　　　　　　　　声明：本博客版权归兰文聪和饥人谷所有，转载需说明来源！