web 前端面试题 [css基础]
JarryChen 发布时间:2020-09-05 文章字数:88 预计用时:26秒
# 1. position 的值
- absolute: 生成绝对定位的元素,相对于最近一级的定位不是 static 的父元素来进行定位。
- fixed: 生成绝对定位的元素,通常相对于浏览器窗口进行定位。
- relative: 生成相对定位的元素,相对于其在普通流中的位置进行定位。
- static: 默认值,没有定位,元素出现在正常的流中。
- sticky: 生成粘性定位的元素,容器的位置根据正常文档流计算得出。
# 2. 浮动及清除浮动
- 浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
- 浮动元素引起的问题:
- 父元素的高度无法被撑开,影响与父元素同级的元素。
- 与浮动元素同级的非浮动元素 (
display:inline-xxx
) 会跟随其后。 - 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构。
- 清除浮动:
- 使用空标签清除浮动。(在所有浮动标签后加一个空标签,定义
clear: both
,弊端是增加了无意义标签) - 使用 overflow。(给包含浮动元素的父标签添加 css 属性
overflow: auto / hidden; zoom: 1
,其中zoom: 1
用于兼容 IE6) - 使用 after 伪元素清除浮动。(该方法只适用于非 IE 浏览器。需要注意的是需清除浮动的元素伪对象中设置
height: 0
,否则该元素会比实际高出若干像素)
例子:.clearfix:after{content: '', display: block; height: 0; clear: both; visibility: hidden}
.clearfix {display: inline-block; } /* for IE/Mac */
- 浮动外部元素
- 使用空标签清除浮动。(在所有浮动标签后加一个空标签,定义