CSS 面试题
CSS3有哪些新能特性?
新增特性:
- 圆角
border-radius
- 阴影
box-shadow
- 文字特效
text-shadow
- 线性渐变
gradient
- 变形
transform
增加了css选择器、媒体属性、多栏布局
媒体查询在CSS2中已经存在,只不过只能作用于style和link标签上
css选择器的优先级顺序?
内联样式 > ID选择器 > 类选择器 > 标签选择器
通过CSS有哪些方式可以实现隐藏页面上的元素?
方式 | 说明 |
opactiy: 0 | |
visibility: hidden | |
overflow: hidden | |
display: none | |
transform: scale(0,0) | |
z-index: -9999 | |
left: -9999 |
在CSS中有哪些定位方式?position的属性?
static:默认值,没有定位,元素正常出现在文档流中
relative:相对定位,相对于其在普通流中的位置进行定位
absolute:绝对定位,相对于最近的非static的祖先元素进行定位
fixed:固定定位,相对于浏览器窗口进行定位
sticky:粘性定位,像relative和fixed的结合,它的父元素在视口区域,当前元素就以fixed的方式进行定位,否则就以relative进行定位
水平垂直居中的方法?
未知宽高:position + transform
div{
position:absolute;
left:50%;
top:50%;
tansform:translate(-50%, -50%);
}
已知宽高:position + margin
div{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
argin-left: -100px;
margin-top: -100px;
}
绝对定位方法:top left bottom right为0
div{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: 0;
}
flex布局方法
div{
display: flex;
justify-content: center;
align-items: center;
}
转成行级块,给父盒子设置text-align:center
.father {
text-align: center;
}
.child {
width: 100px;
height: 100px;
display: inline-block;
}
CSS属性content有什么作用?
css的content属性专门应用在after / before伪元素上,用于插入生成内容,可以配合自定义字体显示特殊符号
translate和 margin 的百分比是根据什么计算的?(translate 和 margin 有什么不同?)
translate是根据自身宽度,margin是根据参照物
rgba() 和 opacity 有什么不同?
- opacity作用于元素,以及元素内的所有内容的透明度,rgba()只作用于元素的颜色或其背景色
- 设置rgba的元素,子元素不会继承透明效果
解释一下浮动及其工作原理
浮动元素脱离文档流,不占据空间。
浮动元素碰到包含它的边框或者浮动元素的边框停留
浮动元素引起的问题?
- 父元素的高度无法撑开
- 与浮动元素同级的,非浮动元素会跟随其后
- 若非第一个元素浮动,则该元素之前的元素也需要浮动。否则会影响页面显示的结构
清除浮动的方式?
- 父级元素定高,定义height
- 父级元素增加 overflow: hidden
- 结尾处增加 br
<br style="clear:both"/>
-
父级元素增加伪元素 :after
.clearfix:after{ content: ''; display: block; clear: both; visibility: hidden; height: 0; }
clear 实现清除浮动的原理?
原理:clear是css中的定位属性,规定元素的那一侧不允许浮动元素,clear: both 就是规定在左右两侧都不允许浮动元素
怎么理解盒子模型?
浏览器的渲染引擎对网页文档进行布局时,会按照”CSS基础盒模型“ (CSS Basic Box Model)标准,将文档中的所有元素都表示成一个个矩形的盒子,再用CSS决定这些盒子的大小尺寸、显示位置、以及其他属性(如颜色、背景、边框等)。
盒模型由以下几部分组成:内容(content)、内边距(padding)、边框(border)、外边距(margin)
标准盒模型 和 怪异盒模型有哪些区别?
两者的区别主要提现在元素尺寸的表示上。
盒模型的指定
在CSS3中,可以通过设置box-sizing的值:
- content-box 标准盒模型
- border-box 怪异盒模型
标准盒模型 box-sizing: content-box;
标准盒模型的width和height属性的范围只包含了content
标准盒模型下,元素的宽(width)高(height)值即为盒模型中内容(content)实际宽高值
盒子宽度 = border-left + padding-left + width + padding-right + border-right
占据页面宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
怪异盒模型 box-sizing: border-box;
IE盒模型的width和height属性的范围包含了border、padding和content
在怪异盒模型下,元素的宽(width)高(height)不是 content的实际宽高,而是去除margin后,元素占用区域的宽高
盒子宽度 = width
盒子占据页面宽度 = margin-left + width + margin-right
盒模型中,content-box是标准,为什么经常使用border-box?
content-box是W3C的标准盒模型,元素的宽(width)高(height)指的是content区域的宽高。增加border、padding会把破坏布局
border-box是IE的怪异盒模型,元素的宽(width)高(height)指的是content宽高 + border + padding,在元素基础上添加border和padding,不会把破坏布局
什么是BFC?
BFC(Block Formatting Context),块级格式化上下文。是页面布局中的一种css渲染模式。相当于一个独立的布局容器。里面的元素和外部的元素相互不影响
怎么创建BFC?
- position值为 absolute 或 fixed
- float值不为 none
- overflow值不为visible
- display值为 inline-block、flex、inline-flex、grid、inline-grid
BFC的作用?
避免外边距重叠(两个相邻的盒子外边距重叠或父子盒子的外边距塌陷)
清除浮动
计算BFC高度时,浮动元素也会参与计算
什么外边距重叠?重叠的结果是什么?
外边距重叠就是margin-collaps
在css中,相邻的两个盒子的外边距可以结合成一个单独的外边距,这种合并外边距的方式称为折叠,所结合成的外边距成为折叠外边距
折叠结果计算规则:
- 两个相邻的外边距都是正数时,折叠结果取两者之间较大的值
- 两个相邻的外边距都是负数时,折叠结果取两者绝对值的较大值
- 两个外边距一正一负时,折叠结果取两者相加的和
浏览器是怎样解析css选择器的?
css选择器是从右向左解析的,为了避免对所有元素进行遍历
若从左向右匹配,发现不符合规则,需要回溯,会损失很多性能
若从右向左匹配,先找到最右节点,向上寻找,会筛选掉大量不符合条件的最右节点
谈谈对媒体查询的理解?
响应式适配,根据不同的屏幕尺寸,显示不同的效果
媒体查询由两个部分组成:
一个可选的媒体类型 (计算机屏幕screen、打印预览模式print、all所有设备)
零个或多个媒体功能限定表达式(max-width: 500px、min-width: 500px)
@media screen and (max-width: 767px) {
.container {
width: 100%;
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.container {
width: 750px;
}
}
说一下CSS的自适应单位?
vw 是相对视口(viewport)的宽度而定,1vw是viewport宽度的1%
vh 是相对窗口(viewport)的高度而定,1vh是viewport高度的1%
vmin和vmax 比较的是vw和vh,选择其一
vmin 选择的是两者较小的值,比如宽度500px,高度300px,1vmin就是3px
vmax 选择的是两者较大的值,比如宽度500px,高度300px,1vmax就是5px
px、em、rem之间有什么区别?
- px:绝对单位。代表像素数量,页面会按照给出的精确像素进行展示
- em:相对单位。基于父元素的字体大小,如果自身定义了字体大小则按照自身的来算
- rem:相对单位。可以理解为root em,基于根节点<html>的字体大小
谈谈对flex的理解?
flex是flexible box的缩写,即弹性布局,为盒模型提供灵活性
只需要声明布局应该具有的行为,而不需要给出具体的实现方式,浏览器完成实际布局
flex-direction: 调整主轴方向
row:主轴方向为水平向右
column:主轴方向为竖直向下
row-reverse:主轴方向为水平向左
column-reverse:主轴方向是竖直向上。
justify-content 主要用来设置主轴方向的对齐方式
flex-start: 弹性盒子元素将向起始位置对齐
flex-end: 弹性盒子元素将向结束位置对齐。
center: 弹性盒子元素将向行中间位置对齐
space-around: 弹性盒子元素会平均地分布在行里
space-between:第一个贴左边,最后一个贴右边,其他盒子均分,保证每个盒子之间的空隙是相等的。
align-items 用于调整侧轴的对齐方式
flex-start: 元素在侧轴的起始位置对齐。
flex-end: 元素在侧轴的结束位置对齐。
center: 元素在侧轴上居中对齐。
stretch: 元素的高度会被拉伸到最大(不给高度时, 才拉伸)。
align-content 用来设置多行的 flex 容器的排列方式
flex-start: 各行向侧轴的起始位置堆叠。
flex-end: 各行向弹性盒容器的结束位置堆叠。
center: 各行向弹性盒容器的中间位置堆叠。
space-around: 各行在侧轴中平均分布。
space-between: 第一行贴上边,最后一个行贴下边,其他行在弹性盒容器中平均分布。
stretch:拉伸,不设置高度的情况下。
flex-wrap 属性控制 flex 容器是单行或者多行,默认不换行
nowrap: 不换行(默认),如果宽度溢出,会压缩子盒子的宽度。
wrap: 当宽度不够的时候,会换行。
display、visibility、opacity的区别?
display: none
- dom结构:不会占据空间
- 事件监听:无法进行事件监听
- 性能:动态改变此属性,会引起重排。性能较差
- 继承:不会被子元素继承
- transition:不支持display
visibility: hidden
- dom结构:会占据空间
- 事件监听:无法进行事件监听
- 性能:动态改变此属性,会引起重绘,性能较高
- 继承:会被子元素继承,子元素可以设置visibility: visible取消隐藏
- transition:visibility会立即显示,隐藏会延时
- opacity: 0
- dom结构:会占据空间
- 事件监听:可以进行事件监听
- 性能:不会引起重绘,性能较高
- 继承:会被子元素继承,子元素可以通过设置opacity: 1取消隐藏
- transition:opacity可以延时和隐藏
position的absolut与fixed有什么相同点和不同点?
相同:
- 让元素脱离文档流,不占据空间
- 改变行内元素呈现的方式,display被置为block
不同:
- absolut的根元素是可以设置的,而fixed的根元素固定为浏览器窗口
- 滚动网页的时候,fixed在浏览器窗口的位置是不会变化的
css伪类和伪元素
伪类:一般用于匹配元素特殊状态,例如::checked、:hover
伪元素:用于创建一些不在DOM树中显示的元素,并为其添加样式,例如::after、:before(注:伪元素无法注册事件,不能通过js控制伪元素)
伪类用单冒号表示:如:link、:visited、:hover、:active、:focus、:first-child、:last-child、:nth-child、:nth-last-child、:not()
伪元素用双冒号表示:如::fist-letter、::first-line、::before、::after
部分伪类解释:
:link 设置未被访问的链接样式 :visited 设置被访问的链接样式
:hover 设置鼠标悬浮的样式 :active 设置鼠标松开的样式 :focus 使用键盘移动页面焦点时的样式
伪类弥补了常规css选择器的不足,伪元素创建了一个虚拟容器
.clearfix:after{
content: '';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
- 解释一下浮动及其工作原理
- 浏览器是怎样解析css选择器的?
- position的absolut与fixed有什么相同点和不同点?
- css伪类和伪元素
本文来自博客园,作者:时光凉忆,转载请注明原文链接:https://www.cnblogs.com/naturl/p/16062760.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
2019-03-29 小程序 movable-view 在页面中的可移动图标