随笔分类 -  Web前端入门

Web前端入门入门笔记
摘要:@media 媒体查询的出现解决了什么问题? 曾经,一个网页要兼容移动端和 PC 端,前端的代码复杂度嗖嗖嗖的飙升,需要使用多套代码对各种屏幕尺寸做适配。 @media 的出现解决了 CSS 中无法适配设备尺寸的问题,让 CSS 拥有了处理简单逻辑的能力。 媒体查询就像进店试穿衣服一样,穿得上,咱就 阅读全文
posted @ 2025-05-08 09:41 前端路引 阅读(325) 评论(0) 推荐(2)
摘要:数学函数可以用来做什么? 最基础的当然是用来进行四则运算了,再进一步可以用来平方,对数,幂,绝对值,取余等,当然还可以用来计算三角函数。 CSS 中的数学函数 灵活运用 CSS 中的数学函数,可以抛弃很多原本需要 JS 才能实现的布局场景。 calc() 最基础的四则运算函数,对头,就是用来做小学就 阅读全文
posted @ 2025-05-07 10:09 前端路引 阅读(427) 评论(0) 推荐(1)
摘要:HELLO,这里是大熊的前端开发笔记。 曾经主题切换功能可以作为软件中亮眼的卖点存在,毕竟那时候要实现换肤可不容易,一套主题一套样式,这代码的重复率嗖嗖嗖的就涨上去了~~当然也可以借助 CSS 预编译 语言编译出多套 CSS 样式表。 没有用觉得我们其实并不需要多套样式表实现换肤?我们只是想要一个像 阅读全文
posted @ 2025-05-06 10:06 前端路引 阅读(792) 评论(0) 推荐(4)
摘要:相关属性 @keyframes 定义动画的关键帧序列 animation-name 指定 @keyframes 动画的名称 animation-duration 动画单次循环的持续时间(必需属性,否则动画不会生效) animation-timing-function 动画速度曲线 animation 阅读全文
posted @ 2025-04-29 13:50 前端路引 阅读(686) 评论(0) 推荐(2)
摘要:CSS3 规范出现之前,要实现一个动画效果那必须借助 JavaScript 的能力才够得着,所以当时的前端开发但凡听到动画交互,那眉头可就成了一个川字儿了~ transition 的出现,改变了实现动画难的困境,也让前端的交互不再生硬,所有的页面元素如同有了灵性一般。 transition 过渡 要 阅读全文
posted @ 2025-04-28 09:06 前端路引 阅读(591) 评论(2) 推荐(3)
摘要:影响元素位置的 CSS 属性基本介绍完毕(参考前几篇文章),现思考一个最常见的需求: 一个子元素,要摆放在盒子的正中央,使用 CSS 布局手段,究竟有多少种实现方式? 上下左右(水平方向、垂直方向)要同时居中,在 Web 领域应该算是非常常见的开发需求了,最最常见的地方就是弹窗,比如: 文本居中 先 阅读全文
posted @ 2025-04-25 10:26 前端路引 阅读(365) 评论(0) 推荐(2)
摘要:CSS transform 属性中文翻译过来是 变换,始终觉得翻译差那么一点意思。它可以用来改变元素形状,比如旋转、缩放、移动、倾斜等,就是它可以把元素各种拿捏~ transform 特性是在不改变自身尺寸的情况下,对元素进行各种变形,元素自身的文档流位置还是会保留,语言有些空洞,下面看例子。 笛卡 阅读全文
posted @ 2025-04-24 09:21 前端路引 阅读(527) 评论(0) 推荐(2)
摘要:CSS float 浮动属性最早用于文字环绕图片效果,就像传统报纸上的印刷排版一样。 CSS2 的规范推动了浮动用于其他元素,float 便被大范围应用于布局,当年常说的 div + css 布局,float 绝对占有一席之地,float 用于布局手段便颠覆了再之前的表格布局,如今表格只用于数据展示 阅读全文
posted @ 2025-04-23 09:49 前端路引 阅读(381) 评论(0) 推荐(2)
摘要:CSS 的定位属性 position 可以把元素从文档流中拧出来,让其显示在其他位置。 但凡元素定位属性加身,元素位置便不再受文档流控制,这时候什么 flex、grid 都不好使了,定位的元素已然跳出三界外,不在五行中,这时候元素的位置由自身的偏移属性决定(top、right、bottom、left 阅读全文
posted @ 2025-04-22 09:32 前端路引 阅读(492) 评论(0) 推荐(4)
摘要:弹性盒子又称为 Flexbox,然而我更喜欢 flex 的叫法。 flex 弹性盒子和 grid 网格布局作为前端开发中两把利器,它们的分界线没那么明显,虽然按照 MDN 的说法 flex 多用于一维布局(行/列),grid 多用于二维布局(行列网格),但实际开发中用多个一维布局也能拼凑出一个完整的 阅读全文
posted @ 2025-04-21 09:35 前端路引 阅读(390) 评论(0) 推荐(2)
摘要:学习本文之前,建议先学习上一篇了解父元素的相关属性。 前文对 grid 网格布局中父元素容器相关的 CSS 属性做了详细介绍,本篇将继续学习子元素相关的 CSS 属性。 网格布局的一大波样式属性,父元素占据了大半江山,子元素嘛相对就少了一些~~ 本文中的中的示例基础代码: <div class="b 阅读全文
posted @ 2025-04-18 09:18 前端路引 阅读(578) 评论(0) 推荐(2)
摘要:grid 网格布局与 flex 弹性盒子布局一样,都需要控制 容器 跟 子元素 的样式才能做出想要的效果,部分场景只控制 容器 样式也行。 grid 样式属性 一大堆 属性 来袭~~ 与网格相关的 CSS 属性有一大堆,毕竟要同时控制行和列(行、列也被称为 网格轨道 grid track)。 容器( 阅读全文
posted @ 2025-04-17 09:06 前端路引 阅读(657) 评论(0) 推荐(4)
摘要:flex 作为现代布局方案中最常用的手段,有必要拉出来细说。 flex 相关的 CSS 属性 容器(父元素)相关的 CSS 属性 以下的 CSS 属性,在 flex 布局中需喂给父元素,设置 flex 布局中的盒子相关样式。 display 启用 flex 布局 flex-direction 主轴方 阅读全文
posted @ 2025-04-16 09:15 前端路引 阅读(877) 评论(0) 推荐(4)
摘要:Web 网页中,所有元素都是盒模型构成的,一个大盒子套一个或者多个小盒子,再用更大的盒子把大盒子给圈起来,这就构成了基本的 HTML 结构,再利用 CSS 把盒子装修得好看一些,最后把它放在正确位置,就是我们所看到的网页。 布局的作用就是要把元素摆放在合适的位置,让网页看起来不显得空闹闹的,也不要显 阅读全文
posted @ 2025-04-15 09:46 前端路引 阅读(401) 评论(0) 推荐(2)
摘要:background 作为元素外观里的重点功臣介绍完毕,本文再一览其他常用的外观属性。 本文示例中,盒子基础样式: .box { font-size: 20px; margin: 20px; padding: 20px; width: 250px; height: 180px; border: 10 阅读全文
posted @ 2025-04-14 08:52 前端路引 阅读(437) 评论(0) 推荐(2)
摘要:渐变背景在 CSS 里面就是一个颜色到另一个颜色渐渐变化的样子。 本文示例中,盒子基础样式: .box { margin: 20px; padding: 20px; border: 10px dashed rgba(0,255,0,1); width: 250px; height: 180px; } 阅读全文
posted @ 2025-04-11 11:41 前端路引 阅读(302) 评论(0) 推荐(2)
摘要:background 可设置背景色、渐变、背景图等,本文主要讲解背景图片的用法。 背景顾名思义就是背后的景色,始终居于元素背后,元素永远站在背景的身前。 本文示例中所使用的图片: background 背景 background 此属性是一个简写,其包含的内容有点多: background-clip 阅读全文
posted @ 2025-04-10 10:17 前端路引 阅读(424) 评论(0) 推荐(3)
摘要:CSS 盒模型是基石,文本和字体则是盒子内容的重要组成部分。毕竟清水房有了,软装也得跟上啊。 字体常用属性 font-family 定义字体类型(如: Arial, "Microsoft YaHei", sans-serif)。 特别说明,字体定义有优先级,比如: font-family: Inte 阅读全文
posted @ 2025-04-09 09:25 前端路引 阅读(383) 评论(0) 推荐(2)
摘要:在 Web 网页开发中,盒模型(Box Model) 是 CSS 的核心概念,它决定了每个 HTML 元素在页面中占据的空间和布局方式。 无论是文本、图片还是按钮,浏览器都会将它们视为一个矩形盒子,并通过盒模型的规则计算其尺寸和位置。 Web 网页开发,就是把一个个的盒子摆在正确的位置,堆叠成好看的 阅读全文
posted @ 2025-04-08 15:22 前端路引 阅读(503) 评论(0) 推荐(1)
摘要:截止发文, MDN 收录的 CSS 属性大约 135 个(不包括特定浏览器的属性,所有可合并的属性算作一个,比如 margin-left 和 margin-right 都记作一个属性)。 这些 CSS 属性中,老师傅也有见过的,用过的,也有没见过的,甚至都没听过的。 这些属性中有高频使用的,也有基本 阅读全文
posted @ 2025-04-07 10:09 前端路引 阅读(160) 评论(0) 推荐(1)