CSS - 文章分类 - 梁飞宇

CSS小技巧之常见布局实现

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

posted @ 2024-09-10 14:15 梁飞宇阅读(35) 评论(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)

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 梁飞宇阅读(308) 评论(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 梁飞宇阅读(197) 评论(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 梁飞宇阅读(109) 评论(0) 推荐(0)

CSS(设计 Web)之Web 字体

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

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

CSS(设计 Web)之样式化链接

摘要：当为 links 添加样式时，理解利用伪类有效地建立链接状态是很重要的，以及如何为链接添加样式来实现常用的功能，比如说导航栏、选项卡。我们将在本文中关注所有这些主题。让我们来看一些链接根据最佳实践创建超链接中的练习，我们看到了如何在你的 HTML 中实现链接。在本篇文章中，我们会以这个知识为阅读全文

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

CSS(设计 Web)之样式列表

摘要：List 列表大体上和其他文本一样，但是仍有一些你需要知道的特殊 CSS 属性，和一些可供参考的最佳实践，这篇文章将阐述这一切。一个简单的例子首先，让我们看一个简单的例子。文章中我们将看到无序，有序和描述列表——它们都具有相似的样式特性，而某些特性却又各不相同。Github上有未加载样式的例子阅读全文

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

CSS(设计 Web)之基本文本和字体样式

摘要：在这篇文章中，我们将带你开始掌握 CSS 的文字样式的旅程。这里我们将详细介绍文本/字体样式的所有基本原理，包括设置文字的粗细，字体和样式，文字的属性简写，文字的对齐，和其他效果，以及行和字母间距。 CSS 中的文字样式涉及什么？正如你已经在你使用 HTML 和 CSS 完成工作时所经历的一样，元阅读全文

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

CSS(设计 Web)之组织 CSS

摘要：在开始在更大的样式表和大项目上作业的时候，你会发现维护一个大型的 CSS 文件很有挑战性。在本文中，我们将会简要看一下在编写你的 CSS 时，让它更加易于维护的一些最佳实践，以及你会在其他人那里看到的，用来增强可维护性的解决方案。保持你的 CSS 整洁的技巧这里有一些关于保持你的样式表整整齐齐的阅读全文

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

梁飞宇

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