html + css 专栏
html 与 css 相关的基础知识,记录开发中会遇到的一些小问题,为其提供解决方案
代码搬运媛
记录学习过程,希望可以结交更多同频的朋友,一起学习一起进步
展开
-
CSS 实现内阴影的方法
其实就是一个 inset 就解决了,主要是用的太少,不太熟悉这个属性。知识点:box-shadow。原创 2022-09-01 15:04:44 · 13285 阅读 · 1 评论 -
纯 CSS 实现打字机效果动画
直接上代码:原创 2022-06-07 13:29:56 · 233 阅读 · 0 评论 -
CSS:你不知道的垂直居中写法
最终实现的效果:![在这里插入图片描述](https://img-blog.csdnimg.cn/dc67eb7579884fa694041c36fe432f04.png原理:把元素的正中心放置在视口的正中心固定宽度不固定宽度通常情况下,需要的居中的元素的宽高是由其内容决定的,如果我们能找到一个属性的百分比值以元素自身的宽高作为解析基准,那我们就可以实现不固定宽高的垂直居中。答案是 CSS变形属性:translate。当我们在translate()变形函数中使用百分比值时,是以这个元素自身的宽度和高度为原创 2022-06-07 09:59:14 · 121 阅读 · 0 评论 -
CSS优化:满幅背景,定宽内容的实现
CSS优化原创 2022-06-07 08:50:31 · 130 阅读 · 0 评论 -
涨知识了:css 偷懒技能——currentColor
currentColor 是 CSS3 中增加的一个颜色关键字,是 CSS 有史以来的第一个变量。它借鉴自 SVG,这个关键字并没有绑定到一个固定的颜色值,而是解析为 color。有网友解释为:CSS里你可以在任何需要写颜色的地方使用currentColor这个变量,这个变量的值是当前元素的color值。如果当前元素没有在CSS里显示地指定一个color值,那它的颜色值就遵从CSS规则,从父级元素继承而来。它可以应用于元素的 color、background-color、border 等属性中,也可以作用原创 2022-06-02 16:12:29 · 1343 阅读 · 0 评论 -
flex 实现两行滚动布局实现的思路
需求:实现两行多列布局,列的数目不定,左右可以滚动。实现思路:使用的知识点:flex 弹性布局先固定父元素高度,然后用flex纵向排列( flex-direction: column;)。然后子元素高度设置为父元素一半,这样一纵列只能放下两个元素,然后超出换行 (flex-wrap: wrap;),元素就自动向右排列了。html:<ul> <li></li> <li></li> <li><原创 2021-11-01 14:02:32 · 1695 阅读 · 0 评论 -
FOUC是什么?如何解决这个问题
今天在阅读 vite 官方文档的时候看到了这个词,有的面试题中也会提到,所以拿出来记录一下。什么是FOUC(文档样式短暂失效)?全称:FOUC - Flash Of Unstyled Content 文档样式闪烁如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。IE会首先加载整个HTML原创 2021-08-02 08:59:44 · 539 阅读 · 0 评论 -
flex实现等宽布局且间隔相等的小技巧
要实现的效果:HTML<section class="father"> <div class="item item-1"></div> <div class="item item-2"></div> <div class="item item-3"></div> </section>CSS.father { display: flex; p原创 2021-06-29 09:06:37 · 2968 阅读 · 3 评论 -
涨知识啦:css粘性定位position:sticky
最近学习了一个新的 css 属性:position:sticky。在开发中还是蛮实用的,记录下来,分享给需要的小伙伴。知识点position: sticky; 基于用户的滚动位置来定位。它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。需要注意的是想用它,必须要设置一个方向值(top, left, right, bottom)场景描述我写了一原创 2021-06-03 16:25:30 · 556 阅读 · 0 评论 -
前端常见经典布局一:粘连布局
什么是粘连布局(css sticky footer)当main的高度足够长的时候,紧跟在后面的元素会跟在其后面;示例如下:当元素比较短的时候(比如小于屏幕的高度),我们期望这个元素能够“粘连”在屏幕的底部。示例如下:这种情况我们称为粘连布局。粘连布局的布局方法粘连布局由三个组成部分:wrap容器,main内容,footer脚部<div id="main"> <div class="main"> main<br>原创 2020-11-30 15:00:49 · 647 阅读 · 0 评论 -
本地缓存与浏览器缓存的区别
本地缓存与浏览器缓存的概念好多同学都分不清楚,今天我们来简单说一下。其实它们的差别还是挺大的:服务对象本地缓存:整个 web 应用程序浏览器缓存:只服务于单个页面可选择性本地缓存:可以指定要缓存 哪些页面浏览器缓存:可以缓存所有网页安全性本地缓存:可靠,可以手动控制缓存页面及进行相关操作浏览器缓存:不安全,不可靠...原创 2020-11-12 17:41:04 · 1026 阅读 · 0 评论 -
没事聊聊本地存储-web storage
我发现好多同学对 H5 的本地存储是个一知半解的状态,而这有时面试或工作中必须掌握的知识点,所以今天借着闲暇时间整理一下相关的知识,希望可以帮助需要的同学。web storage机制是对H4中 cookies 机制的一次升级 ,解决了一系列 cookies 的缺点。比如大小:cookies 大小限制在 4KB带宽:cookies 是随 HTTP 事务一起发送的,所以会浪费部分带宽。复杂性:我们知道正确操作 cookies 是很困难的。而web storage 存储机制,可以在客户端本地建立一个原创 2020-11-11 19:13:42 · 269 阅读 · 0 评论 -
BFC 的原理浅析
一、BFC 是什么在解释 BFC 是什么之前,需要先介绍 Box、Formatting Context的概念。Box: CSS布局的基本单位Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性,决定了这个 Box 的类型。 不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染。 Formatting contextFormatti原创 2020-10-10 17:53:14 · 1378 阅读 · 0 评论 -
【css】CSS 如何画两边是半圆的长方形?
首先要定义盒子的宽和高,只需将 border-radius 设为高度的一半即可实现。.radius{ width: 300px; height: 200px; background: red; border-radius: 100px;}实现效果:原创 2020-09-16 10:30:13 · 7534 阅读 · 2 评论 -
css3 常见文字处理方法
word-wrapword-wrap属性用来指出浏览器在单词内进行断句,防止字符串太长而找不到它的自然断句点时产生的溢出。word-wrap: break-word;text-overflowtext-overflow用于文本溢出:单行缩略的实现如下:.oneline { white-space: nowrap; //强制文本在一行内输出 overflow: hidden; //隐藏溢出部分 text-overflow: ellipsis; //对溢出部分加上...}原创 2020-08-12 09:45:40 · 263 阅读 · 0 评论 -
【前端面试的坑】浏览器的渲染模式
简述在很久以前的网络上,页面通常有两种版本:为网景(Netscape)的 Navigator 准备的版本,以及为微软(Microsoft)的 Internet Explorer 准备的版本。当 W3C 创立网络标准后,为了不破坏当时既有的网站,浏览器不能直接弃用这些标准。因此,浏览器采用了两种模式,用以把能符合新规范的网站和老旧网站区分开。目前浏览器的排版引擎有三种模式:怪异模式(Quirks mode)、接近标准模式(Almost standards mode)、以及标准模式(Standards m原创 2020-07-01 17:53:06 · 369 阅读 · 0 评论 -
【前端面试的坑】HTML行内置换元素与非置换元素的区分
什么是置换元素?一个 内容 不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素。也可以理解为,浏览器根据元素的标签和属性,来决定元素的具体显示内容。例如:浏览器根据标签的src属性显示图片。根据标签的type属性决定显示输入框还是按钮。置换元素在其显示中生成了框,这也就是有的内联元素能够设置宽高的原因。html中的<img>、<input>、<textarea>、<s原创 2020-07-01 11:07:42 · 465 阅读 · 0 评论 -
html 如何调整页面中字与字的间距
word-spacing: 针对英文字母的间距,对中文不生效letter-spacing:针对中文字之间的间距原创 2020-04-05 18:19:12 · 4170 阅读 · 0 评论 -
css代码书写规范
重新整理了css语法才发现,自己平时的书写很不规范,为了让自己看 上去像个大神,要好好约束下自己呢。现在分享给码友们,建议你们都好好看一下语法用两个空格来代替制表符(tab) – 这是唯一能保证在所有环境下获得一致展现的方法。为选择器分组时,将单独的选择器单独放在一行。为了代码的易读性,在每个声明块的左花括号前添加一个空格。声明块的右花括号应当单独成行。每条声明语句的 : 后应...原创 2019-12-07 16:36:53 · 461 阅读 · 0 评论