![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html
文章平均质量分 63
The..Fuir
这个作者很懒,什么都没留下…
展开
-
让css的字体加粗后不影响宽度变化与content和attr()问题
让css的字体加粗后不影响宽度变化原创 2022-09-26 09:45:56 · 1042 阅读 · 1 评论 -
盒模型再回顾:外边距折叠原理与BFC的关系
BFC的外边距折叠(准确来说是垂直外边距折叠) 两个相邻的两个盒子(可能是兄弟关系也可能是父子关系)的垂直外边距会合并成一个单独的外边距。(取较大或相同的那个margin值)原创 2022-07-18 11:00:08 · 177 阅读 · 0 评论 -
面试题:外边距折叠问题 (块级元素在普通文档流中的BUG)
一般是指垂直方向相邻的外边距会发生重叠现象,大多发生在兄弟元素和父子元素之间。原创 2022-07-16 14:51:33 · 211 阅读 · 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 · 1434 阅读 · 0 评论 -
面试题73:标签语义化
HTML描述的是网页内容的含义,即,语义。语义化HTML,就是用最恰当的HTML元素,标记内容。语义化标签,也即,有含义的标签。语义化是指对某件事或某个东西的含义有正确直观的解释,那么在HTML中,语义化标签就是指这个标签本身直观表达出了它所包含的内容是什么。......原创 2022-07-12 08:27:08 · 214 阅读 · 0 评论 -
面试题69:BFC是什么
1、BFC即 Block Formatting Contexts (块级格式化上下文), 是 W3C CSS2.1 规范中的一个概念。2、BFC是指浏览器中创建了一个独立的渲染区域,并且拥有一套渲染规则,他决定了其子元素如何定位,以及与其他元素的相互关系和作用。......原创 2022-07-11 18:33:31 · 665 阅读 · 0 评论 -
面试题56:W3C盒子和IE盒子的区别
两者的区别就在于:IE盒子模型的content部分包含了padding和border而w3c盒子不包含原创 2022-07-07 12:09:34 · 210 阅读 · 0 评论 -
前端工程师-----HTML篇(引用牛客)
伪类:用于已有元素处于某种状态时为其添加对应的样式,这个状态是根据用户行为而动态变化的。例如:当用户悬停在指定元素时,可以通过:hover来描述这个元素的状态,虽然它和一般css相似,可以为 已有元素添加样式,但是它只有处于DOM树无法描述的状态下才能为元素添加样式,所以称为伪类。...原创 2022-07-03 12:06:30 · 315 阅读 · 1 评论 -
HTML与CSS基础笔试和期末题库
1.使用文本编辑器编辑完HTML后,扩展名可以是__html___或___htm__。2.表格的标签是____table______,单元格的标签是____td______。3.在编辑table表格时,合并行使用 __rowspan_____合并列使用_____colspan____。4.在CSS层叠样式表当中经常用到的三种选择器:___元素选择器___、__类选择器__、__id选择器__。...原创 2022-07-01 23:02:35 · 6232 阅读 · 0 评论 -
html、css、vue、js在VsCode中代码格式化(代码自动调准为标准格式)
注: 此配置支持 CSS、HTML、JS 和 Vue 等文件的格式化。大家可以参考,然后结合自己的需求去配置。如果没有特殊需求,也可以拿去直接用。原创 2022-06-30 18:46:58 · 9987 阅读 · 2 评论 -
互联网行业一路走来的小计(持续更新中.......)
用过的代码编译器、插件和图标样式原创 2022-06-08 12:19:40 · 499 阅读 · 0 评论 -
jQuery中把时间戳转换为日期的方法(封装好了直接用)
<script> // 封装日期函数 function formatDateTime(inputTime) { var date = new Date(inputTime); var y = date.getFullYear(); var m = date.getMonth() + 1; m = m < 10 ? "0" + m : m; var d = date.getDate(); d = d < 10 ? "0"..原创 2022-05-03 14:59:38 · 3184 阅读 · 0 评论 -
面试题25:Html5有哪些新特性
面试官:请问html新增了哪些新特性你说出下面几个就还可以了,不用说太多一:新增的功能更加语义化的元素。 article、footer、header、nav、section本地化储存。 localStorage 和 sessionStorage离线应用,离线缓存。 manifest拖曳以及释放的api。 Drag and drop媒体播放。 video 和 audio增强表单控件。 calendar、date、time、email、url、search地理位置。 G.原创 2022-04-27 18:00:29 · 656 阅读 · 0 评论 -
web存储(cookie、session、local)通信、地理位置
web存储1.1.cookiecookie 存储在浏览器中,每次浏览器向服务器发送请求都需要携带cookie,一般情况下,cookie是产生与服务器端,保存于客户端,但是我们也可以通过js来产生cookie 通常情况下,我们通过js-cookie这个库来操作cookie<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta...原创 2022-04-26 19:48:12 · 1050 阅读 · 0 评论 -
面试题23:使用 clear 属性清除浮动的原理?
面试官:请说一下使用 clear 属性清除浮动的原理?使用clear属性清除浮动,其语法如下:clear:none|left|right|both如果单看字面意思,clear:left 是“清除左浮动”,clear:right 是“清除右浮动”,实际上,这种解释是有问题的,因为浮动一直还在,并没有清除。官方对clear属性解释:“元素盒子的边不能和前面的浮动元素相邻”,对元素设置clear属性是为了避免浮动元素对该元素的影响,而不是清除掉浮动。还需要注意 clear 属性指的是元素盒.原创 2022-04-26 16:40:35 · 1194 阅读 · 0 评论 -
面试题22:为什么需要清除浮动?清除浮动的方式
面试官:请问为什么需要清除浮动?清除浮动的方式浮动的定义: 非IE浏览器下,容器不设高度且子元素浮动时,容器高度不能被内容撑开。 此时,内容会溢出到容器外面而影响布局。这种现象被称为浮动(溢出)。浮动的工作原理:浮动元素脱离文档流,不占据空间(引起“高度塌陷”现象) 浮动元素碰到包含它的边框或者其他浮动元素的边框停留浮动元素可以左右移动,直到遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流,当元素浮动之后,不会影响块级元素的布局,只会影响内联元素布局。此时文档流中的.原创 2022-04-26 16:29:13 · 2168 阅读 · 0 评论 -
JQuery与AJAX制作的登录小案例(了解其中的每一个步骤)
JQuery与AJAX制作的登录小案例(了解其中的每一个步骤)模拟登录的几大步骤(必知)需要自己花时间多看看实现效果:登录获取token,获取用户信息代码实现:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">...原创 2022-04-26 11:31:43 · 620 阅读 · 0 评论 -
Html5中canvas画布绘制线段
绘制线段moveTo(x,y): x,y:线段的起点坐标 lineTo(x,y) x,y:线段的终点坐标 cx.stroke();//开始绘制 //fill():不能使用 lineWidth=number;//线段粗细代码实现:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...原创 2022-04-25 21:24:08 · 520 阅读 · 0 评论 -
canvas画布,绘制矩形、圆形、渐变色、图片、文字
画布canvas元素是H5新增的一个重要元素,专门用来绘制图形。在页面中放置一个canvas元素,就相当于在页面上放置一块画布,可以利用canvas api在其中进行图形的描绘。canvas只是一个容器,不具备绘制能力,需要我们编写js代码实现 矩形 绘制矩形的步骤: 1. 取得canvas对象 2. 取得2d上下文(context) 3. 设定绘图样式,使用图形上下文对象中的fillStyle填充样式 strokeStyle 边框样式 4. 指定线宽,使用图形上下文对象中..原创 2022-04-25 21:17:16 · 2377 阅读 · 0 评论 -
Html5新增标签video视频,实现音视频的播放、暂停、快进、慢进、倍速等操作
新增标签 *Html5新增了很多语义化标签,这些标签多为块元素,其表现形式与div完全一致,即没有特殊样式。但是div是无意义的块元素,而Html5新增的这些元素多为有意义的元素,例如header表达了头部的意思,在网页中任意暗含头部的结构都可以使用header标签。article, section,aside,header,nav,footer,address......此外,Html5还新增了一些功能性标签,但是由于其在各个浏览器中的表现形式不一致,我们很少使用这些元素,取而代之的是组件。.原创 2022-04-25 20:54:08 · 18799 阅读 · 3 评论 -
面试题20:localStorge与sessionStorge、cookie区别
面试官:请说一下localStorge与sessionStorge、cookie区别html5中的Web Storage包括了两种存储方式。localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问。并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅是会话级别的存储。只允许同一窗口访问。而localStorage.原创 2022-04-25 20:14:58 · 2415 阅读 · 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 · 4046 阅读 · 0 评论 -
面试题19:CSS实现自适应正方形
面试官:请说一下如何实现自适应正方形纯CSS实现自适应正方形的几种方式在写页面布局时候正方形对我们来说应该很常见,比如商品列表展示,头像展示, 在微博上发布图片的展现等方法一:原理同padding,也是利用了vw是相对宽度,不过要注意是相对视窗宽度哦CSS3 中新增了一组相对于可视区域百分比的长度单位vw, vh, vmin, vmax。其中 vw 是相对于视口宽度百分比的单位,1vw = 1% viewport width,vh是相对于视口高度百分比的...原创 2022-04-24 21:24:59 · 1484 阅读 · 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 · 1344 阅读 · 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 · 2725 阅读 · 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 · 2349 阅读 · 0 评论 -
面试题12:行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
面试官:请说一下行内元素有哪些,块级元素有哪些行内元素有:a b span img input select strong; 块级元素有:div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p;空元素,即没有内容的HTML元素。空元素是在开始标签中关闭的,也就是空元素没有闭合标签:常见的有:<br>、<hr>、<img>、<input>、<link>、<meta>; 鲜见的有:<area.原创 2022-04-20 22:25:32 · 1008 阅读 · 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 · 2054 阅读 · 0 评论 -
Linux系统简介
建议:基本的了解就够了,不必熟记早期介绍:Linux起源于一个学生的简单需求。芬兰赫尔辛基大学Linus Torvalds,Linux的作者与主要维护者,在其上大学时所买得起的唯一软件是Minix. Minix是一个类似Unix,被广泛用来辅助教学的简单操作系统。Linus对Minix不是很满意,于是决定自己编写软件。他以学生时代熟悉的Unix作为原型, 在一台Intel 386 PC上开始了他的工作。他的进展很快,受工作成绩的鼓舞,他将这项成果通过互连网与其他同学共享,主要用于学术领.原创 2022-03-28 21:16:15 · 360 阅读 · 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 · 17350 阅读 · 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 · 4163 阅读 · 1 评论 -
前端CSS重点面试题(强烈安利,面试必了解)
基本知识:网页三要素:html 网页架构的基本元素 素颜的脸 css 给元素添样式 化妆的脸 js 给元素绑定事件,给元素添加动态效果 会哭会笑的脸块级元素 : div(常用来进行网页架构搭建) p ul>li ol>li 独占一行 默认宽度为100%,如果有父元素则默认父元素的100%宽,如果没有父元素,则为视口区的100%,如果父元素也没有设置宽,则按照定义逐级向上查询。如...原创 2022-03-27 17:30:27 · 458 阅读 · 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 · 128 阅读 · 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 · 794 阅读 · 0 评论 -
html+CSS布局初入门:css过渡-Transition
CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程,而不是立即生效的。比如,将一个元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色,按照一定的曲线速率变化。这个过程可以自定义。要实现这一点,必须规定两项内容:1.指定要添加效果的CSS属性2.指定效果的持续时间。CSS transitions 可以决定哪些属性发生动画效果 (明确地列出这些属.原创 2022-03-23 15:48:36 · 374 阅读 · 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 · 714 阅读 · 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 · 2051 阅读 · 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 · 316 阅读 · 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 · 481 阅读 · 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 · 397 阅读 · 0 评论