![](https://img-blog.csdnimg.cn/74da723ac85044e2833e011ad7e2d897.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
+ HTML & CSS
文章平均质量分 66
知识永无止境,我们不一定学到了全部,在不断的前行中,定会发现别样的风景——CSS有趣的指令
Try Tomato
The scenery at the foot of the mountain is not attractive enough you should go to the top of the mountain
展开
-
关于 CSS 面试中遇到的问题
伪类用于当已有元素处于某种状态时,为其添加对应的样式,这个状态是根据用户行为变化而变化的。BFC(Block Format Context)块级格式化上下文,是页面盒模型中的一种。它只有处于 dom 树无法描述的状态才能为元素添加样式,所以称为伪类。伪类的操作对象是文档树中已存在的元素,而伪元素是创建一个文档树外的元素。渲染模式,相当于一个独立的容器,里面的元素和外部的元素相互不影响。伪元素用于创建一些原本不在文档树中的元素,并为其添加样式,比如说。是 CSS3 新增的相对长度单位,是指相对于根元素。原创 2022-11-10 16:38:39 · 831 阅读 · 0 评论 -
Canvas 从 0 到 1 -- 开发 2D 游戏《保卫家园》-- 【上篇】
Canvas 是 HTML5 提供的一种新的标签形式 - 画布标签通过名字就不难理解这个标签的意思,就和一张白纸一样,我们想呈现什么样的画面都可以(前提你需要一根画笔 – JavaScript)Canvas 是一个矩形画布,可以使用 JavaScript 在画布上进行作画,控制每一个像素,也就是说他本身不具备绘画功能,是需要 JavaScript 来进行作画的,Canvas 非常的丰富多彩,拥有多种的绘制路径,矩形,图形,字符,图像等等方法,使得 Web 网页更加的美丽。...原创 2022-08-18 16:47:35 · 2474 阅读 · 2 评论 -
CSS居中汇总
行内元素1.水平局中text-align:center;2.水平居中width:fit-content;// 此时父元素宽度适应子元素宽度// 再给父元素添加margin:auto;3.垂直居中line-height:父元素高度;// 只能用于单行文本块级元素水平居中// 给子元素margin:0 auto;水平垂直居中1..father{ position: relative;}.son{ position:absolu原创 2022-05-29 21:26:32 · 392 阅读 · 0 评论 -
flex布局
flex布局是CSS弹性布局中的一种,使用非常的方便,也是一种非常火的布局方式解决了很多排版布局难题目录一.开启flex布局模式二.flex布局主轴操作-父元素1.决定主轴方向2.决定主轴上元素排列方式3.是否可以换行二.flex布局侧轴操作-父元素1.侧轴上单行子元素排列方式1.侧轴上多行子元素排列方式二.flex布局侧轴操作-子元素1.order属性2.子元素侧轴排列方式一.开启flex布局模式我们可以先给需要进行布局的父元素添加:.原创 2022-04-14 10:32:05 · 2489 阅读 · 0 评论 -
REM移动适配问题与淘宝移动端脚本
我们在CSS中不仅仅有px或者百分比这样的单位,还有vh/vw,以及rem等rem是一个相对的单位,是相对于HTML标签字号来计算结果1rem = 1HTML字号大小那么我们怎么设置HTML标签字号?html{font-size:20px};不过我们还是不要自定义设计为好,因为大家公认在rem布局方案中,将网页分为10等份,HTML标签字号为视口宽度的1/10如果我们想要自定义一个响应式布局的话,可以使用媒体查询:@media (width: 320px) { .原创 2022-04-13 18:10:35 · 421 阅读 · 0 评论 -
移动端meat视口问题的配置浅谈
当我们使用VSCode初始化了HTML文件之后,会出现这样的几端代码,我们之前阐述过html文档标签、head头部标签、body标签,我们今天来看一下视口标签:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=原创 2022-04-13 17:35:49 · 162 阅读 · 0 评论 -
CSS动画一则全
目录一.CSS过渡动画二.2D操作1.2D位移2.2D旋转3.2D缩放4.2D转换综合写法三.动画1.定义动画2.调用动画四.3D操作1.3D位移2.3D旋转3.3D呈现4.透视一.CSS过渡动画transition:要过渡的动画名称(可以填写all表示全部) 花费时间 运动曲线 延迟时间;tips:谁变化给谁transition运动曲线:linear 匀速ease ...原创 2022-04-13 16:45:08 · 517 阅读 · 0 评论 -
项目搭建规范以及SEO优化
网站网页的SEO优化,SEO优化可以对网络端进行深度优化,使我们的网站获得免费流量,在众多网站中脱颖而出一.项目创建格式规范avicon图标SEO优化T指的是title标签:D指description:K指keyword:H标签alt图片描述标签LOGO优化原创 2022-03-11 10:46:01 · 398 阅读 · 0 评论 -
CSS新增选择器(全)
CSS新增的选择器,可以说是非常是实用,前端必会,属性选择器:结构伪类选择器(一)结构伪类选择器(二)伪元素选择器原创 2022-03-10 11:37:29 · 881 阅读 · 0 评论 -
CSS重点冷点属性【三】
音频(audio)常用属性视频(video)常用属性修改表单placeholder提示信息的文本属性:CSS盒子模型图片模糊处理CSS计算盒子宽度calc函数图片背景的缩放浏览器私有前缀最高权重原创 2022-03-09 22:24:27 · 1207 阅读 · 0 评论 -
CSS重点冷点属性【二】
行内块元素的对齐溢出文字显示省略号使用盒子做出等腰三角形去除表单轮廓线常见的鼠标样式原创 2022-03-09 16:47:28 · 129 阅读 · 0 评论 -
有趣好玩的字体图标
超有趣的字体图标原创 2022-03-08 10:56:00 · 272 阅读 · 0 评论 -
z-index实现元素叠放次序
z-index实现元素叠放次序原创 2022-03-08 09:36:49 · 398 阅读 · 0 评论 -
CSS定位五种显示方式(主要解释固定定位和粘性定位)
定位的五个显示方式【主讲固定定位(fixed)和粘性定位(sticky)】原创 2022-03-07 13:08:47 · 1045 阅读 · 0 评论 -
【清除浮动的四种方法】
【清除浮动的四种方法】原创 2022-03-06 15:39:25 · 2317 阅读 · 0 评论 -
【css重点冷点属性(一)】
那些超有用的冷门CSS命令原创 2022-03-06 09:48:26 · 156 阅读 · 0 评论