表现-CSS - 文章分类 - 梁飞宇

CSS小技巧之常见布局实现

摘要：一、水平居中 1. 文本/行内元素/行内块级元素原理：text-align只控制行内内容(文字、行内元素、行内块级元素)如何相对他的块父元素对齐 #parent{ text-align: center; } 优缺点优点：简单快捷，容易理解，兼容性非常好缺点：只对行内内容有效；属性会继承影响到后阅读全文

posted @ 2024-09-10 14:15 梁飞宇阅读(36) 评论(0) 推荐(0)

CSS知识点之什么是BFC？

摘要：一、BFC到底是什么东西？ BFC 全称：Block Formatting Context，名为 "块级格式化上下文"。官方解释：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML 阅读全文

posted @ 2024-08-28 11:27 梁飞宇阅读(88) 评论(0) 推荐(0)

CSS知识点之CSS 关于height:100%和height:100vh的区别

摘要：vh vh就是当前屏幕可见高度的1%，也就是说 height:100vh == height:100%; 区别当元素没有内容时候设置 height:100%，该元素不会被撑开，此时高度为0，设置 height:100vh，该元素会被撑开屏幕高度一致。阅读全文

posted @ 2024-08-17 22:02 梁飞宇阅读(14) 评论(0) 推荐(0)

CSS知识点之CSS 中的 :root 与 var()

摘要：:root :root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。定义 :root 后，所有变量都将被保存在 :root 中，并且可以在整个页面的任何位置使用。这使得我们可以轻松地为网站设置一些通阅读全文

posted @ 2024-08-15 19:10 梁飞宇阅读(51) 评论(0) 推荐(0)

less学习之Less笔记

摘要：一、Less简介 1、什么是Less Less是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表。 Less是一种动态样式表语言，扩展了CSS的功能。 Less也是跨浏览器友好。 CSS预处理器是一种脚本语言，可扩展CSS并将其编译为常规CSS语法，以便可以通过Web浏览器读取。阅读全文

posted @ 2024-01-24 01:08 梁飞宇阅读(25) 评论(0) 推荐(0)

less学习之Less内置常用函数

摘要：一、杂项函数 1、color 解析颜色，将代表颜色的字符串转换为颜色值. 参数 string：代表颜色值的字符串。返回值： color 案例： color("#aaa"); 输出： #aaa 2、convert 将数字从一种单位转换到另一种单位。第一个参数为带单位的数值，第二个参数为单位。如果阅读全文

posted @ 2024-01-24 00:31 梁飞宇阅读(1449) 评论(0) 推荐(0)

less学习之less+rem迭代适配

摘要：index.less代码 // 变量 // 适配主流设备 @adapterDeviceList:320px,360px,375px,384px,400px,414px,424px,480px,540px,640px,720px,750px; // 设备的种类 @len:length(@adapter 阅读全文

posted @ 2024-01-24 00:08 梁飞宇阅读(11) 评论(0) 推荐(0)

Sass的安装和常用命令

摘要：一、学习前言 Sass是成熟、稳定、强大的CSS预处理器，而SCSS是Sass3版本当中引入的新语法特性，完全兼容 CSS3 的同时继承了 Sass 强大的动态功能。 1. 为什么要学习 Scss/Sass? 因为传统的css没有变量和样式复用机制,代码复用性低,不易于维护,且无法嵌套书写,导致代码阅读全文

posted @ 2023-12-28 14:08 梁飞宇阅读(608) 评论(0) 推荐(0)

CSS(设计 Web)之支持旧浏览器

摘要：本文中，我们推荐使用弹性盒和网格作为你的设计的主要布局方式。但是，你的网站的访客会有人使用旧浏览器，或者是不支持你已经使用的方式。这总是 Web 上存在的情况，因为新的特性被开发出来，不同的浏览器会优先支持不同的特性。本文解释了如何使用现代的 Web 技术，而无需让采用旧技术的用户被拒之门外。对于阅读全文

posted @ 2022-12-21 11:08 梁飞宇阅读(64) 评论(0) 推荐(0)

CSS(设计 Web)之传统的布局方法

摘要：在 CSS 布局中，网格系统是一种非常常见的布局方式，并且在 CSS 网格布局之前，它们倾向于由浮动和其他的布局功能实现。假想你的布局是一组数字标注的列（例如 4、6 或者 12），然后把你的内容填充到这些想象的列中。这篇文章将要探讨这种早期的方法是怎么实现的，来帮助你在旧项目工作时更好地理解他们。阅读全文

posted @ 2022-12-21 11:00 梁飞宇阅读(97) 评论(0) 推荐(0)

CSS(设计 Web)之媒体查询入门指南

摘要：CSS 媒体查询为你提供了一种应用 CSS 的方法，仅在浏览器和设备的环境与你指定的规则相匹配的时候 CSS 才会真的被应用，例如“视口宽于 480 像素”的时候。媒体查询是响应式 Web 设计的关键部分，因为它允许你按照视口的尺寸创建不同的布局，不过它也可以用来探测和你的站点运行的环境相关联的其它阅读全文

posted @ 2022-12-21 10:41 梁飞宇阅读(343) 评论(0) 推荐(0)

CSS(设计 Web)之响应式设计

摘要：早年设计 Web 时，页面是以适配特定的屏幕大小为考量创建的。如果用户正在使用比设计者考虑到的更小或者更大的屏幕，那么结果从多余的滚动条，到过长的行和没有被合理利用的空间，不一而足。随着人们使用的屏幕尺寸的种类越来越多，出现了响应式网页设计的概念（responsive web design，RWD）阅读全文

posted @ 2022-12-21 10:32 梁飞宇阅读(310) 评论(0) 推荐(0)

CSS(设计 Web)之多列布局

摘要：多列布局声明提供了一种多列组织内容的方式，正如你在一些报纸中看到的那样。这篇文章介绍怎么使用这一特性。一个简单的例子我们将学习怎么使用多列布局，通常也简写为 multicol。你可以从这里开始 downloading the multicol starting point file 然后在合适的阅读全文

posted @ 2022-12-21 00:47 梁飞宇阅读(321) 评论(0) 推荐(0)

CSS(设计 Web)之定位

摘要：定位允许你从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。本文解释的是定位 (position) 的各种不同值，以及如何使用它们。文档流定位是一个相当复杂的话题，所以我们深入了解代码之前，让我们审视一下布局理论，并让我们了解它阅读全文

posted @ 2022-12-21 00:36 梁飞宇阅读(66) 评论(0) 推荐(0)

CSS(设计 Web)之浮动

摘要：float 属性最初只用于在成块的文本内浮动图像，但是现在它已成为在网页上创建多列布局的最常用工具之一。本文将阐述它的有关知识。浮动的背景知识最初，引入 float 属性是为了能让 Web 开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在它的左边或右边。你可能在报纸版面上看到过。阅读全文

posted @ 2022-12-21 00:12 梁飞宇阅读(161) 评论(0) 推荐(0)

CSS(设计 Web)之网格

摘要：CSS 网格是一个用于 web 的二维布局系统。利用网格，你可以把内容按照行与列的格式进行排版。另外，网格还能非常轻松地实现一些复杂的布局。关于使用网格进行页面排版，这篇文章包含了你需要的一切知识。 ❗️备注：本篇中旧版教程主要讲如何自己编写网格布局，最后过渡到浏览器支持的 CSS Grid La 阅读全文

posted @ 2022-12-20 18:47 梁飞宇阅读(198) 评论(0) 推荐(0)

CSS(设计 Web)之弹性盒子

摘要：弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。本文将解释所有的基本原理。为什么是弹性盒子？长久以来，CSS 布局中唯一可靠且跨浏览器兼容的创建工具只有 floats 和 positioning。这两个工具大部分情况下都很好使，但是在某些方阅读全文

posted @ 2022-12-20 17:43 梁飞宇阅读(267) 评论(0) 推荐(0)

CSS(设计 Web)之正常布局流

摘要：这篇文章介绍正常的流布局，或者说，在你没有改变默认布局规则情况下的页面元素布局方式。如上小节对布局的介绍，如果你未曾应用任何 CSS 规则来改变它们的展现方式，网页上的元素将会按照正常布局流来组织。同样的，开始探索前，你可以通过调整元素位置，或者完全的移除元素来改变它们的表现效果。从一副简单的、结阅读全文

posted @ 2022-12-20 17:15 梁飞宇阅读(72) 评论(0) 推荐(0)

CSS(设计 Web)之介绍 CSS 布局

摘要：本文将回顾我们以前模块中已经介绍过的一些 CSS 布局特性——例如不同的display值——并介绍我们将在本模块中使用的一些概念。正常布局流 (Normal flow) 正常布局流 (normal flow) 是指在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式。让我们快速地看一个阅读全文

posted @ 2022-12-20 16:59 梁飞宇阅读(111) 评论(0) 推荐(0)

CSS(设计 Web)之Web 字体

摘要：在模块的第一篇文章中，我们探讨了用于样式化字体和文本的基本 CSS 特性。在这篇文章中，我们将更进一步，详细地探索 web 字体——它们允许您下载自定义字体和您的 web 页面，以允许更多不同的、自定义的文本样式。字体种类回顾正如我们在基本文本和字体样式中所看到的那样，应用到您的 HTML 的字阅读全文

posted @ 2022-12-20 16:29 梁飞宇阅读(263) 评论(0) 推荐(0)

梁飞宇

文章分类 - 前端 / 表现-CSS