![](https://img-blog.csdnimg.cn/15199e14c8aa4cc6be2a146a47e18f18.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
css面试题
文章平均质量分 62
了解前端css常见的面试题
纵有千堆雪与长街
你好
展开
-
css复习4
用keyframes 定义动画(类似定义类选择器)原创 2023-02-16 20:51:22 · 93 阅读 · 0 评论 -
css复习3
CSS3 中可以通过 box-sizing 来指定盒模型,有2个值:即可指定为 content-box、border-box,这样我们计算盒子大小的方式就发生了改变。为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了 CSS 精灵技术(也称 CSS Sprites、CSS 雪碧)。2.鼠标经过某个盒子的时候,提高当前盒子的层级即可(如果没有有定位,则加相对定位(保留位置),如果有定位,则加z-index)字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体。原创 2023-02-16 19:39:53 · 252 阅读 · 0 评论 -
css复习2
当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距 margin-bottom,下面的元素有上外边距 margin-top ,则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。对于两个嵌套关系(父子关系)的块元素,父元素上有外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。原创 2023-02-15 23:43:51 · 138 阅读 · 0 评论 -
css复习
常见的行内元素有 < a>、< strong>、< b>、< em>、< i>、< del>、< s>、< ins>、< u>、< span>等,其中< span> 标签是最典型的行内元素。在行内元素中有几个特殊的标签 —— < img />、< input />、< td>,它们同时具有块元素和行内元素的特点。常见的块元素有< h1>~< h6>、< p>、< div>、< ul>、< ol>、< li>等,其中 < div> 标签是最典型的块元素。这个是用a链接做的,但是a链接是行内元素;原创 2023-02-15 13:26:01 · 450 阅读 · 0 评论 -
【CSS面试题】vertical-align实现垂直居中
为了解决上述问题:我们写了如下代码进行判断 < / head > < body > < div > < span class = "span1" > 你好星期三 < / span > < span class = "span2" > 请前往东京 < / span > < / div > < / body > < / html >其中为什么我们要将两个span标签都设置display: inline-block;原创 2022-11-02 21:14:56 · 191 阅读 · 0 评论 -
【CSS面试】BFC的理解?
可以将BFC看成页面中的一块渲染区域,它有着自己的渲染规则.简单来讲,BFC可以看作是元素的一种属性,当元素拥有了BFC这个属性的时候,这个元素就可以看作是隔离了的独立容器.容器里面的元素不会在布局上影响到外面的元素.原创 2022-10-26 22:41:59 · 446 阅读 · 0 评论 -
关于媒体查询和rem单位
媒体查询(Media Query)是CSS3新增的语法。使用@media查询,可以针对不同的媒体类型定义不同的样式@media可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多苹果手机、Android手机,平板等设备都用得到媒体查询。原创 2022-10-25 21:59:18 · 1115 阅读 · 0 评论 -
【CSS面试题】清除浮动
为什么需要清除浮动?①父级没高度。②子盒子浮动了。③影响下面布局了,我们就应该清除浮动了。原创 2022-10-13 23:44:09 · 178 阅读 · 0 评论 -
【CSS面试题】flex布局
数值越小,排列越靠前,默认为0。注意:和 z-index 不一样。. item {}/* 让三个子盒子沿着侧轴底侧对齐 */ /* align-items: flex-end;*/ /* 我们想只让3号盒子下来底侧 */ } div span {/* 默认是0 -1比0小所以在前面 */ order : - 1;原创 2022-10-13 21:52:45 · 1146 阅读 · 0 评论 -
HTML+ CSS来实现一个简单的二级菜单栏
3.最后,就是将二级菜单栏隐藏起来,只有鼠标放到对应的一级菜单上时,二级菜单才会显示。2.接下来,写二级菜单栏,把它添加到一级菜单中的 li 里面。1.首先,我们先创建一级菜单。转载 2022-09-20 22:33:33 · 6230 阅读 · 0 评论 -
【CSS面试】两栏布局和三列布局
结果如下:看着好像是得行,但是实际上这个right盒子是100%,也就是right被覆盖在left之下,所以我们还需要为right设置一个margin-left结果如上。左盒子绝对定位,右盒子用 margin-left:300px或者给左,右盒子都用绝对定位。flex: 1可以让其填充剩余的空间,以达到拉伸的效果此时由于宽度太大,right将会被挤下来。......原创 2022-08-25 23:50:13 · 552 阅读 · 0 评论 -
脱离文档流和恢复文档流的方法
元素脱离文档流之后,将不再在文档流中占据空间,而是处于浮动状态(可以理解为漂浮在文档流的上方)。脱离文档流的元素的定位基于正常的文档流,当一个元素脱离文档流后,依然在文档流中的其他元素将忽略该元素并填补其原先的空间。转载 2022-08-24 10:23:46 · 492 阅读 · 0 评论 -
【CSS面试题】盒子水平垂直居中的五种方式
效果如下:现在我们的需求是:son这个小盒子在大盒子father的正中间。Flex布局:效果:子绝父相(可以看我之前的博客,绝对定位的盒子怎么水平垂直居中)效果如上原创 2022-08-17 20:43:59 · 335 阅读 · 0 评论 -
【css面试题】三角形的做法
由此可见,我们想要得到一个三角形,就可以讲其他三个设置为透明即可。原创 2022-08-16 16:44:46 · 138 阅读 · 0 评论 -
【css面试题】z-index失效的情况
为什么要检查上面两种情况呢?转载 2022-08-13 22:13:04 · 897 阅读 · 0 评论 -
【css面试题】行内元素、行内块、块级元素,空元素
普遍的规则里总有那么几个不一样的,在行内元素中就有那么几个特殊标签,比如< img >、< input >/< td >,可以给他们设置宽高、对齐属性,我们把这样特殊的一类标签称为行内块元素。行内块元素综合了块元素和行内元素的不同特点。行内元素也称为内联元素,行内元素不占有独立区域,其大小仅仅被动的依赖于自身内容的大小(例如文字和图片),所以一般不能随意设置其宽高、对齐等属性。常用于控制页面中文本的样式。常见的行内元素有:< a >< strong>< b>< em>< del>< span >等。...转载 2022-08-13 21:48:15 · 273 阅读 · 0 评论 -
【CSS面试题】position:sticky不生效原因
今天遇到布局时设置了 position: sticky;发现没有生效,于是找了一下问题的原因;原创 2022-08-03 19:22:05 · 1495 阅读 · 0 评论 -
【CSS面试题】图片底侧空白缝隙解决方案
图片底侧空白缝隙的解决方案原创 2022-07-21 16:44:43 · 276 阅读 · 0 评论 -
【CSS面试题】绝对定位的盒子水平居中
绝对定位的盒子如何水平垂直居中原创 2022-07-21 16:12:23 · 212 阅读 · 0 评论 -
【CSS面试题】溢出的文字省略号显示
多行文本溢出显示省略号,有较大的兼容性问题,适用于webKit浏览器或移动端(移动端大部分是webKit内核)更推荐让后台人员来做这个效果,因为后台人员可以设置显示多少个字,操作更简单。以上这种方法好是好,但兼容性比较差,在IE里面是不起效果的。此时再将高度修改的合理一些就能成2行了.注使用上述效果,必须好控制好盒子的大小。单行文本溢出显示省略号。多行文本溢出显示省略号。...原创 2022-07-21 20:18:18 · 112 阅读 · 0 评论 -
【CSS面试题】关于浮动
float 属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。属性值描述none元素不浮动(默认值)left元素向左浮动right元素向右浮动为什么需要清除浮动?① 父级没高度。② 子盒子浮动了。③ 影响下面布局了,我们就应该清除浮动了。.........原创 2022-08-06 23:00:47 · 253 阅读 · 0 评论