一、文档流的概念指什么？有哪种方式可以让元素脱离文档流?
- 文档流概念：文档流即是普通流，是文档中可显示对象在排列时所占用的位置，行内元素从左到右，块级元素从上到下；
- 脱离文档流的两种方式：
- 元素浮动：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:
- 做完可参考范例
- ps: 图片左浮动，导航栏整体右浮动，导航栏里面的li元素左浮动
- ps: aside左浮动，main左浮动
-
凡是有浮动的地方，其直接父元素必须清除浮动
- 答：代码10-1
二. 不使用背景图片实现如下效果:
- 答：代码10-2
声明：本博客版权归兰文聪和饥人谷所有，转载需说明来源！
网友评论