本文详细介绍了CSS中的position属性，包括fixed、relative、absolute和sticky的用法与区别，并讨论了浮动清除的多种方法，如空元素、overflow属性等。此外，还涵盖了CSS3的新特性，如边框、背景、转换和动画，以及CSS选择器的优先级。文章还解答了如何隐藏元素、居中布局和处理元素溢出的问题，是前端开发者面试准备的实用指南。
⭐️ 作者：船长在船上
🚩主页：来访地址船长在船上的博客
🔨 简介：高级前端开发工程师，专注前端开发，欢迎咨询交流，共同学习！
👉👉👉 欢迎来访船长在船上的博客，如有疑问可以留言、评论，看到后会及时回复。
上篇文章：
目录
31.position 属性 比较
固定定位 fixed：
元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定
位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。
相对定位 relative：
如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直
或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是
否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
绝对定位 absolute：
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那
么它的位置相对于<html>。absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。
粘性定位 sticky：
元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing
block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定
位，之后为固定定位。
默认定位 Static：
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声
明）。
inherit:
规定应该从父元素继承 position 属性的值。
32.浮动清除
方法一：使用带 clear 属性的空元素
在浮动元素后使用一个空元素如<div class="clear"></div>，并在 CSS 中赋
予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />
来进行清理。
方法二：使用 CSS 的 overflow 属性
给浮动元素的容器添加 overflow:hidden;或 overflow:auto;可以清除浮动，另外在 IE6 中还
需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。
在添加 overflow 属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动
的效果。
方法三：给浮动的元素的容器添加浮动
给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影
响布局，不推荐使用。
方法四：使用邻接元素处理
什么都不做，给浮动元素后面的元素添加 clear 属性。
方法五：使用 CSS 的:after 伪元素
结合:after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和
IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。
给浮动元素的容器添加一个 clearfix 的 class，然后给这个 class 添加一个:after 伪元素实
现元素末尾添加一个看不见的块元素（Block element）清理浮动。
33.css3 新特性
CSS3 边框如 border-radius，box-shadow 等；CSS3 背景如 background-size，
background-origin 等；CSS3 2D，3D 转换如 transform 等；CSS3 动画如 animation 等。
34.CSS 选择器有哪些，优先级呢
id 选择器，class 选择器，标签选择器，伪元素选择器，伪类选择器等
同一元素引用了多个样式时，排在后面的样式属性的优先级高；
样式选择器的类型不同时，优先级顺序为：id 选择器 > class 选择器 > 标签选择器；
标签之间存在层级包含关系时，后代元素会继承祖先元素的样式。如果后代元素定义了
与祖先元素相同的样式，则祖先元素的相同的样式属性会被覆盖。继承的样式的优先级
比较低，至少比标签选择器的优先级低；
带有!important 标记的样式属性的优先级最高；
样式表的来源不同时，优先级顺序为：内联样式> 内部样式 > 外部样式 > 浏览器用户
自定义样式 > 浏览器默认样式
35.怎么样让一个元素消失
display:none; visibility:hidden; opacity: 0; 等等
36.css 动画如何实现
创建动画序列，需要使用 animation 属性或其子属性，该属性允许配置动画时间、时长
以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是
由 @keyframes 规则实现，具体情况参见使用 keyframes 定义动画序列小节部分。
transition 也可实现动画。transition 强调过渡，是元素的一个或多个属性发生变化时产生
的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生
（例如 hover）时才能获取样式，这样就会产生过渡动画。
37.如何实现图片在某个容器中居中的？
父元素固定宽高，利用定位及设置子元素 margin 值为自身的一半。
父元素固定宽高，子元素设置 position: absolute，margin：auto 平均分配 margin
css3 属性 transform。子元素设置 position: absolute; left: 50%; top: 50%;transform:
translate(-50%,-50%);即可。
将父元素设置成 display: table, 子元素设置为单元格 display: table-cell。
弹性布局 display: flex。设置 align-items: center; justify-content: center
38.如何实现元素的垂直居中
法一：父元素 display:flex,align-items:center;
法二：元素绝对定位，top:50%，margin-top：-（高度/2）
法三：高度不确定用 transform：translateY（-50%）
法四：父元素 table 布局，子元素设置 vertical-align:center;
39.CSS3 中对溢出的处理
text-overflow 属性，值为 clip 是修剪文本；
ellipsis 为显示省略符号来表被修剪的文本；
string 为使用给定的字符串来代表被修剪的文本。
40.隐藏页面中某个元素的方法
display:none; visibility:hidden; opacity: 0; position 移到外部，z-index 涂层遮盖等等
🔔 感谢：如果觉得博主的文章不错或者对你的工作有帮助或者解决了你的问题，可以关注、支持一下博主，如果三连收藏支持就会更好，在这里博主不胜感激！！！如有疑问可以留言、评论，看到后会及时回复。
后续会继续更新面试题，关注收藏一下随时查看。
扫一扫
5496
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
