一条晒干的咸鱼的博客

摘要： 对CSS学习已经接近尾声，下面你可以对以下两道“小卡拉米”测试进行测试下CSS理解程度。 题 1：基于栅格布局的现代博客首页设计 题目要求： 创建一个博客首页布局，包含一个顶部导航栏、一个主要的内容区域（左侧为博客文章列表，右侧为一个侧边栏显示推荐内容），以及一个底部的页脚。要求使用 栅格布局 来分 阅读全文

摘要： 开发技术不断演进，布局方式也经历了多个阶段的变革。从最初的基于表格布局到 CSS 的浮动布局，再到今天的弹性盒（Flexbox）与 CSS Grid 网格布局，每一种布局方式都有其独特的背景和解决特定问题的优势。 一、CSS Grid 出现之前的布局与网格系统 在 CSS Grid 诞生之前，前端开 阅读全文

摘要： 随着移动设备的普及，网页设计的焦点逐渐转向了响应式设计。响应式设计不仅要求网页在各种屏幕尺寸上良好展示，还要适应不同设备的特性。 一、响应式设计之前的灵活布局 在响应式设计流行之前，网页布局通常是固定的或流动的。固定布局使用固定的像素宽度，而流动布局使用相对单位（如百分比）来调整页面的宽度。这些方法 阅读全文

摘要： 多列布局是一种非常常见的布局方式，适用于内容丰富的页面，如新闻网站、杂志或博客。 一、CSS多列布局概述 CSS多列布局允许我们将内容分成多个垂直列，使页面布局更加灵活和多样化。多列布局的主要属性包括 ​​column-count​​、​​column-width​​ 和 ​​column-gap​ 阅读全文

摘要： CSS定位是一个非常重要的布局工具，它允许我们精确地控制元素的位置，从而创建复杂的布局效果。定位允许你从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。 一、文档流 在讨论CSS定位之前，我们首先需要理解“文档流”这一概念。文档流是 阅读全文

摘要： ​​float​​ 属性最初的设计目的是在文本块内使图像浮动，从而让文字环绕在图像的左右两侧，这种效果在报纸版面中很常见。随着时间的推移，这一属性已成为网页设计中实现多列布局的常用工具。最开始，​​float​​ 主要用于在文本列中调整图像位置，创造简单的布局。后面Web 开发人员发现​​float 阅读全文

摘要： CSS 网格布局是一种二维布局系统，用于网页设计。通过使用网格，你可以将内容以行和列的形式进行排列。此外，网格布局还能够简便地实现一些复杂的布局结构。 一、什么是网格布局？ CSS网格布局是一种二维布局系统，它允许我们创建复杂的网页布局，既可以处理行也可以处理列。与传统的布局方法不同，网格布局将网页 阅读全文

摘要： 弹性盒子是一种一维布局方法，用于根据行或列排列元素。元素可以扩展以填补多余的空间，或者缩小以适应较小的空间，为容器中的子元素提供灵活的且一致的布局方式。 一、什么是弹性盒子？ CSS 弹性盒子（Flexible Box Layout，简称 Flexbox）是 CSS3 中引入的一种布局模式，提供一种 阅读全文

摘要： CSS（层叠样式表）作为现代网页设计的基础之一，其布局功能一直是开发者关注的重点。了解CSS常规流布局是掌握网页布局的第一步。 一、什么是常规流布局？ 常规流布局（Normal Flow Layout）是CSS布局的基础，也是网页布局的默认方式。在常规流中，所有的元素都按照文档中的顺序依次排列。这种 阅读全文

摘要： CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。 一、正常布局流（Normal Flow） CSS的布局基础是“正常流”，也就是页面元素在没有特别指定布局方式时的默认排列方式。正常流分为两种主要类型： 块级元素：默认情况下，块级元素会 阅读全文