css
文章平均质量分 63
The..Fuir
这个作者很懒,什么都没留下…
展开
-
css中的选择器问题
css中的选择器问题原创 2022-09-26 12:11:37 · 275 阅读 · 0 评论 -
box-sizing:border-box的理解和作用
box-sizing:border-box的理解和作用。CSS中代码background:url(图片) no-repeat right center的意思原创 2022-09-26 10:21:58 · 23784 阅读 · 2 评论 -
让css的字体加粗后不影响宽度变化与content和attr()问题
让css的字体加粗后不影响宽度变化原创 2022-09-26 09:45:56 · 1128 阅读 · 1 评论 -
CSS样式穿透
引入第三方组件库(如element-ui、element-plus),修改第三方组件库的样式样式文件中使用了 scoped 属性,但是为了确保每个组件之间不存在相互影响所以不能去除原创 2022-08-15 09:05:14 · 166 阅读 · 0 评论 -
面试题:外边距折叠问题 (块级元素在普通文档流中的BUG)
一般是指垂直方向相邻的外边距会发生重叠现象,大多发生在兄弟元素和父子元素之间。原创 2022-07-16 14:51:33 · 241 阅读 · 0 评论 -
CSS3有哪些新特性
1.CSS3的选择器2. @Font-face 特性3. 圆角4. 多列布局 (multi-column layout)5.阴影(Shadow)6.CSS3 的渐变效果7.css弹性盒子模型8. CSS3制作特效9.Transforms 2D转换效果10. Animation动画特效原创 2022-07-16 11:43:26 · 1613 阅读 · 0 评论 -
HTML与CSS基础笔试和期末题库
1.使用文本编辑器编辑完HTML后,扩展名可以是__html___或___htm__。2.表格的标签是____table______,单元格的标签是____td______。3.在编辑table表格时,合并行使用 __rowspan_____合并列使用_____colspan____。4.在CSS层叠样式表当中经常用到的三种选择器:___元素选择器___、__类选择器__、__id选择器__。...原创 2022-07-01 23:02:35 · 6391 阅读 · 0 评论 -
面试题23:使用 clear 属性清除浮动的原理?
面试官:请说一下使用 clear 属性清除浮动的原理?使用clear属性清除浮动,其语法如下:clear:none|left|right|both如果单看字面意思,clear:left 是“清除左浮动”,clear:right 是“清除右浮动”,实际上,这种解释是有问题的,因为浮动一直还在,并没有清除。官方对clear属性解释:“元素盒子的边不能和前面的浮动元素相邻”,对元素设置clear属性是为了避免浮动元素对该元素的影响,而不是清除掉浮动。还需要注意 clear 属性指的是元素盒.原创 2022-04-26 16:40:35 · 1233 阅读 · 0 评论 -
面试题22:为什么需要清除浮动?清除浮动的方式
面试官:请问为什么需要清除浮动?清除浮动的方式浮动的定义: 非IE浏览器下,容器不设高度且子元素浮动时,容器高度不能被内容撑开。 此时,内容会溢出到容器外面而影响布局。这种现象被称为浮动(溢出)。浮动的工作原理:浮动元素脱离文档流,不占据空间(引起“高度塌陷”现象) 浮动元素碰到包含它的边框或者其他浮动元素的边框停留浮动元素可以左右移动,直到遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流,当元素浮动之后,不会影响块级元素的布局,只会影响内联元素布局。此时文档流中的.原创 2022-04-26 16:29:13 · 2243 阅读 · 0 评论 -
面试题21:CSS引入的方式有哪些?使用Link和@import有什么区别?
面试官:请说一下CSS引入的方式有哪些?使用Link和@import有什么区别?答:内联,内嵌,外链,导入(1)link 属于 XHTML 标签,除了加载 CSS 外,还能用于定义RSS,定义 rel 连接属性等作用,无兼容性,支持使用javascript改变样式;而@import是CSS提供的,只能用于加载CSS,不支持使用 javascript 改变样式;(2)页面被加载的时,link 会被同时加载,而@import 引用的CSS会等到页面加载完再加载;(3)import是CSS2.1.原创 2022-04-26 12:00:27 · 336 阅读 · 0 评论 -
canvas画布,绘制矩形、圆形、渐变色、图片、文字
画布canvas元素是H5新增的一个重要元素,专门用来绘制图形。在页面中放置一个canvas元素,就相当于在页面上放置一块画布,可以利用canvas api在其中进行图形的描绘。canvas只是一个容器,不具备绘制能力,需要我们编写js代码实现 矩形 绘制矩形的步骤: 1. 取得canvas对象 2. 取得2d上下文(context) 3. 设定绘图样式,使用图形上下文对象中的fillStyle填充样式 strokeStyle 边框样式 4. 指定线宽,使用图形上下文对象中..原创 2022-04-25 21:17:16 · 2433 阅读 · 0 评论 -
面试题20:localStorge与sessionStorge、cookie区别
面试官:请说一下localStorge与sessionStorge、cookie区别html5中的Web Storage包括了两种存储方式。localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问。并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅是会话级别的存储。只允许同一窗口访问。而localStorage.原创 2022-04-25 20:14:58 · 2436 阅读 · 0 评论 -
在CSS布局中max-width 无效的解决方法
max-width 无效的解决方法:width:100% 和 max-width:100%的区别:width: 100%是将所有指定元素的宽度 拉伸或收缩到和父元素的宽度一致,而max-width: 100%则是如果指定元素的宽度不超过父元素的宽度,则大小不变,如果超过了父元素的宽度,则将宽度收缩为父元素的宽度。所以,出现问题的原因是我将图片设置成max-width:100%,而这个图片宽度未超过父元素的宽度,大小不变,因此这个图片比它上面的遮罩要窄了一截。总结:掌握width:100.原创 2022-04-24 21:41:05 · 4297 阅读 · 0 评论 -
面试题19:CSS实现自适应正方形
面试官:请说一下如何实现自适应正方形纯CSS实现自适应正方形的几种方式在写页面布局时候正方形对我们来说应该很常见,比如商品列表展示,头像展示, 在微博上发布图片的展现等方法一:原理同padding,也是利用了vw是相对宽度,不过要注意是相对视窗宽度哦CSS3 中新增了一组相对于可视区域百分比的长度单位vw, vh, vmin, vmax。其中 vw 是相对于视口宽度百分比的单位,1vw = 1% viewport width,vh是相对于视口高度百分比的...原创 2022-04-24 21:24:59 · 1548 阅读 · 0 评论 -
面试题18: 请用CSS实现一个扇形
面试官:请描述一下如何实现一个扇形用CSS实现扇形的思路和三角形基本一致,就是多了一个圆角的样式,实现一个90°的扇形:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"..原创 2022-04-24 20:11:57 · 1382 阅读 · 0 评论 -
面试题17:display:inline-block 什么时候会显示间隙?该怎么解决
面试官:display:inline-block 什么时候会显示间隙?该怎么解决在CSS布局中,如果我们想要将一些元素在同一行显示,其中的一种方法就是把要同行显示的元素设置display属性为inline-block,但是你会发现这些同行显示的inline-block元素之间经常会出现一定的空隙,这就是“换行符/空格间隙问题”。display:inline;强制变成行内元素display:block;强制变成块元素而display:inline-block;顾名思义就是行内块的意思了,他具.原创 2022-04-24 09:50:06 · 2820 阅读 · 0 评论 -
面试题16:重绘(reflow)和回流(repaint),visibility: hidden 和 display: none的区别
面试官:请说一下什么是重绘和回流和visibility: hidden 和 display: none的区别回流与重绘概念当JS对页面的节点进行操作时,就会产生回流或重绘回流/重排(reflow):因为节点的尺寸、布局、显示(display: none/block)改变这些属性改变的时候,渲染树中的一部分或者全部需要重新构建,这种重新构建的现象就是回流。一个页面至少有一次回流。重绘(repaint):回流时,浏览器会看重新构建受影响部分的渲染树,只要渲染树一被改变或重新构建,就一定会.原创 2022-04-23 13:21:31 · 3798 阅读 · 0 评论 -
面试题15:Dom树 CSS树 渲染树(render树) 规则、原理
面试官:请说一下Dom树 CSS树 渲染树(render树) 规则、原理答:首先你要了解浏览器渲染的顺序: 1.构建dom 树 2.构建css 树 3.构建渲染树 4.节点布局 5.页面渲染其实DOM节点可以分为可视化节点和非可视化节点,像 div、p 等这种结构性的标签节点可被称为可视化节点,而 script、meta 等这种在页面上显示不出来的节点则被称为非可视化节点;那渲染树(render树)是什么呢?浏览器是如何渲染 UI 的?(...原创 2022-04-23 12:05:54 · 2379 阅读 · 0 评论 -
面试题14:CSS种隐藏元素的方法有哪些
面试官:你可以说几种隐藏元素的方法嘛答:隐藏元素的方法有哪些display: none:渲染树不会包含该渲染对象,因此该元素不会在页面中占据位置,也不会响应绑定的监听事件。 visibility: hidden:元素在页面中仍占据空间,但是不会响应绑定的监听事件。 opacity: 0:将元素的透明度设置为 0,以此来实现元素的隐藏。元素在页面中仍然占据空间,并且能够响应元素绑定的监听事件。 position: absolute:通过使用绝对定位将元素移除可视区域内,以此来实现元素的隐藏.原创 2022-04-23 11:34:34 · 234 阅读 · 0 评论 -
面试题13:display的block、inline和inline-block的区别
面试官:请说一下display的block、inline和inline-block的区别答:(1)block: 会独占一行,多个元素会另起一行,可以设置width、height、margin和padding属性;(2)inline: 元素不会独占一行,设置width、height属性无效。但可以设置水平方向的margin和padding属性,不能设置垂直方向的padding和margin;(3)inline-block: 将对象设置为inline对象,但对象的内容作为block对象呈现,之.原创 2022-04-23 10:57:12 · 1110 阅读 · 0 评论 -
面试题:高频前端面试题之CSS篇
一、CSS基础 CSS选择器及其优先级 CSS中可继承与不可继承属性有哪些 display的属性值及其作用 display的block、inline和inline-block的区别 隐藏元素的方法有哪些 link和@import的区别 transition和animation的区别 display:none与visibility:hidden的区别 伪元素和伪类的区别和作用? 对requestAnimation.原创 2022-04-20 22:52:42 · 1352 阅读 · 0 评论 -
为什么第一个子元素设置margin-top父元素会跟着移动(Margin高度塌陷问题)
问题:有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果。这种情况成为margin塌陷:父子元素的margin-top属性,会共用值最大的那个。所以父元素公用了子元素的margin-top值,自然也就跟着移动了效果图:代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <.原创 2022-04-01 14:20:48 · 2183 阅读 · 0 评论 -
Linux系统简介
建议:基本的了解就够了,不必熟记早期介绍:Linux起源于一个学生的简单需求。芬兰赫尔辛基大学Linus Torvalds,Linux的作者与主要维护者,在其上大学时所买得起的唯一软件是Minix. Minix是一个类似Unix,被广泛用来辅助教学的简单操作系统。Linus对Minix不是很满意,于是决定自己编写软件。他以学生时代熟悉的Unix作为原型, 在一台Intel 386 PC上开始了他的工作。他的进展很快,受工作成绩的鼓舞,他将这项成果通过互连网与其他同学共享,主要用于学术领.原创 2022-03-28 21:16:15 · 391 阅读 · 0 评论 -
display:inline,display:inline-block,display:block是什么?行内元素和块级元素的具体区别是什么?
一,行内元素与块级元素的区别:块级元素会占领页面的一行,其后多个block元素自动换行、 可以设置width,height,设置了width后同样也占领一行、同样也可以设置 margin与padding属性。ps:常见的块级元素:div,img,ul,form,p等行级元素与其他元素在同一行上,高度,行高以及底边距不可改变,高度就是内容文字或者图片的宽度,不可以改变。ps:em,strong,br,input等1.行内元素与块级元素直观上的区别二、行内元素与块级元素的三...原创 2022-03-27 22:43:53 · 18171 阅读 · 1 评论 -
页面重绘与回流与display:none和visiblity:hidden 的区别
浏览器的运行机制构建DOM树(parse): 渲染引擎解析HTML文档,首先将标签转换成DOM树中的DOM node (包括js生成的标签)生成内容树(Content Tree/DOM Tree);构建渲染树(construct): 解析对应的CSS样式文件信息(包括js生成的样式和css文件),而这些文件信息以及HTML中可见的指令(如<b></b>),构建渲染树(Rendering Tree/Frame Tree): render tree 中每个NODE都有自己的.原创 2022-03-27 21:14:32 · 4279 阅读 · 1 评论 -
前端CSS重点面试题(强烈安利,面试必了解)
基本知识:网页三要素:html 网页架构的基本元素 素颜的脸 css 给元素添样式 化妆的脸 js 给元素绑定事件,给元素添加动态效果 会哭会笑的脸块级元素 : div(常用来进行网页架构搭建) p ul>li ol>li 独占一行 默认宽度为100%,如果有父元素则默认父元素的100%宽,如果没有父元素,则为视口区的100%,如果父元素也没有设置宽,则按照定义逐级向上查询。如...原创 2022-03-27 17:30:27 · 472 阅读 · 0 评论 -
html+css布局:动画效果之 轮播图和大厂笔试呼吸灯
轮播图:效果图:代码实现:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&..原创 2022-03-23 21:41:51 · 136 阅读 · 0 评论 -
html+css布局初入门:动画效果和实现
动画首先,放一个动画来激起小伙伴们的求知欲和好奇心吧效果图:代码实现:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wi..原创 2022-03-23 20:34:57 · 855 阅读 · 0 评论 -
html+CSS布局初入门:css过渡-Transition
CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程,而不是立即生效的。比如,将一个元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色,按照一定的曲线速率变化。这个过程可以自定义。要实现这一点,必须规定两项内容:1.指定要添加效果的CSS属性2.指定效果的持续时间。CSS transitions 可以决定哪些属性发生动画效果 (明确地列出这些属.原创 2022-03-23 15:48:36 · 411 阅读 · 0 评论 -
html+css布局实例:CSS过渡-Transitions(制作动态效果) 让小兔子走起来
问题描述:利用CSS过渡-Transitions(制作动态效果) 让小兔子走起来动态效果图:当鼠标放到这兔子边上就会自动走代码实现:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta ...原创 2022-03-23 12:06:57 · 732 阅读 · 0 评论 -
html+css布局实例:CSS过渡-Transitions文字逐渐变大的效果
CSS过渡-Transitions文字逐渐变大的效果图:小伙伴们我没有截取动图的软件,不能给你们看文字逐渐放大的动图啦鼠标点击前:鼠标点击后:代码实现:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &...原创 2022-03-22 17:26:36 · 2091 阅读 · 0 评论 -
html+css布局实例:CSS过渡-Transitions手风琴效果之鼠标位置的图片自动移动
效果图:小伙伴们需要对CSS过渡-Transitions和前面的基础知识有一定了解你可以拿你自己的图片放进去:鼠标没有点击之前:鼠标点击图片时:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l...原创 2022-03-22 17:20:03 · 333 阅读 · 0 评论 -
html+CSS布局绝对定位练习实例:采用绝对定位 使box2在box1里面 水平垂直居中
问题描述:采用绝对定位 使box2在box1里面 水平垂直居中实现以下效果:代码实现:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev..原创 2022-03-22 11:44:36 · 514 阅读 · 0 评论 -
html+css布局实例:制作的淘宝小图标的显示
用html和css制作的淘宝小图标显示:小图标的图片放在我的资源里,如需获取,可以取资源里下载代码实现:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content..原创 2022-03-22 11:20:37 · 416 阅读 · 0 评论 -
html+css布局实例:对C3School在线教程导航栏进行模拟编写
效果图:代码实现:注意flex布局的性质,如果不知道可以去看我的关于flex布局的博客(明天再码字,我也想躺平,呜呜呜),这需要对CSS有一定的理解才能弄明白。height 和 line-height 区别:height 设置在标签内显示的这个标签的行高,line-height设置在标签内显示的标签内内容的高度<!DOCTYPE html><html lang="en"><head> <meta ch...原创 2022-03-21 21:49:47 · 459 阅读 · 0 评论 -
CSS定位布局:静态定位、相对定位、绝对定位、固定定位、粘滞定位、Z-index定位
目录1.定位布局1.1.静态定位( Static positioning)简单代码实现:- 1.2.什么是相对定位?( Relative positioning )简单代码实现:- 1.3.什么是绝对定位?(Absolute positioning)- 绝对定位参考点效果图:-绝对定位水平居中- 1.4.固定定位(Fixed positioning)- 1.5.粘滞定位( Sticky positioning )position: sticky;...原创 2022-03-18 18:02:02 · 5458 阅读 · 0 评论 -
html+CSS布局实例:面试题:使用CSS控制三个div,实现以下布局
详细理解请小伙伴们等我问一下老师代码实现:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca...原创 2022-03-17 20:52:29 · 1073 阅读 · 0 评论 -
html+css实例:自围现象的产生(与float浮动有关)
浮动元素字围现象 浮动元素不会挡住没有浮动元素中的文字(如果是数字的话没有用), 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象 -注意点: 1.浮动流中没有居中对齐, 也就是没有center这个取值 2.在浮动流中是不可以使用margin: 0 auto; -特点: 1.在浮动流中是不区分块级元素/行内元素/行内块级元素的 ...原创 2022-03-17 18:31:40 · 175 阅读 · 0 评论 -
html+CSS布局:float浮动带来的高度塌陷问题和如何清除浮动(三种方法)带来的影响
清除浮动效果图:清除前:因为元素一二三都浮动(设置了float: left;),造成高度塌陷,所以father的兄弟元素有一半部分在上面(因为.brother设置了两倍的宽高而浮动的不占据空间,只浮动在表层,只有边框带有的高度和div加边框构成本身的宽度清除浮动后:因为元素一二三都清除了浮动(设置了float: left;),所以father的兄弟元素有一部分在上面 <!-- 由于father的三个子元素全部都浮动起来了,不处于普通文档流中...原创 2022-03-17 17:59:08 · 644 阅读 · 0 评论 -
html+CSS布局实例:用CSS绘制三角形
这是关于border元素的理解原理:一个盒子的宽高为0时,由其边框粗细和颜色决定盒子的状态。盒子的四个边框组合成为一个正方形的盒子。如图当一边有颜色,其他都是透明色的时候,就是我们想要的三角形了。如图 <div class="triangle">三角形</div>.triangle{ /*设置宽高为0,所以div的内容为空,从才能形成三角形尖角*/ width: 0px; ..原创 2022-03-16 19:13:31 · 388 阅读 · 0 评论