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