文档流的概念指什么?有哪种方式可以让元素脱离文档流?
文档流(normal flow)指按照从左到右、从上到下的布局方式,又称普通流、正常流、标准文档流。
让元素脱离文档流的方式有:
- float——浮动
浮动的元素脱离文档流,向左或者向右移动至包含块内边缘或者同样浮动的元素外边缘。 - position:absolute 绝对定位
绝对定位的元素脱离文档流,在原位置上方直至设置了定位值,以最近已定位的祖先元素内边框为参照。 - 固定定位position: fixed;
固定定位的元素脱离文档流,在原位置上方直至设置了定位值,参照物为浏览器可视区。
有几种定位方式,分别是如何实现定位的,使用场景如何?
css的定位机制分为三种:文档流、浮动、定位。
- 文档流
是所有元素布局的基础,作为从左到右、从上到下的布局方式,这是最常用的一种排版布局方式。 - 浮动 实现语法和特性见题1,浮动最初是为了实现文字环绕图片,后来慢慢用于实现多列布局。
- 定位
静态定位 :与文档流类似
相对定位:未脱离文档流,相对原来的位置定位,仍然占据原来位置。适用于层叠效果。
绝对定位:脱离文档流。 适用:小区块的布局使用频繁
固定定位:脱离文档流 用于广告等意图一直出现在用户眼前的信息。
absolute, relative, fixed 偏移的参考点分别是什么
absolute,参考点为最近已定位的祖先元素的内边框
relative:参考点为内边框
fixed:参考点为浏览器可视区内边框
z-index 有什么作用? 如何使用?
z-index定义了z方向(与显示屏垂直的方向,值越大者堆叠显示在前面)的级别从而使元素有序堆叠显示。 只对已定位的元素生效。
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
position:relative不论偏移到何处只是占据原来的位置,而margin比较霸道——偏移的位置都要被自己占据。
如何让一个固定宽高的元素在页面上垂直水平居中?
Paste_Image.png
浮动元素有什么特征?对其他浮动元素、普通元素、文字分别有什么影响?
浮动元素特征:
文字环绕图片。
脱离文档流、不占位置。
浮动的元素,一定程度上可以理解为带方向的inline-block元素,一样可以同行排列,可以设置元素宽高、边距,只是排列顺序可以从右到左。
浮动的影响:
对其他浮动元素 兄弟之间从左到右,从上到下排列。
对普通元素 脱离文档流,不占位置。
对文字 浮动创造的目的就是为了文字环绕图片,所以文字会环绕、包裹浮动元素。
清除浮动指什么? 如何清除浮动?
清除浮动 清除浮动指的是清除浮动对其他元素造成的影响。
如何清除浮动
清除浮动的方式:
运用clear:both/left/right清除浮动
code1
code2