CSS笔记-overflow

如果值为scroll，不论是否需要，用户代理都会提供一种滚动机制，如果值为inherit，规定应该从父元素继承overflow的值。如果值为visible，内容不会被修剪，会出现在元素框之外。如果值为hidden，内容会被修剪，内容不可见，如果值为auto，则会显示滚动条显示其余的内容。

阅读目录导航栏导航栏=链接列表垂直导航栏垂直导航条实例激活/当前导航条实例创建链接并添加边框全屏高度的固定导航条水平导航栏内联列表项浮动列表项水平导航条实例链接右对齐添加分割线固定导航条源码示例 1CSS 下拉菜单基本下拉菜单实例解析下拉菜单 导航栏 熟练使用导航栏，对于任何网站都非常重要。 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。 导航栏=链接列表 作为标准的HTML基础一个导航栏是必须的。 在我们的例子中我们将建立一个标准的HTML列表导航栏。 导航条基本上是一个链接列表，所以使用

1、java文件内只能有一个public类， 2、一个类对应一个.class文件 3、public类名必须和文件名一致 4、main方法是入口方法，有固定格式

css(层叠样式表) CSS的发展历程 从HTML被发明开始，样式就以各种形式存在不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制 最初的HTML只包含很少的显示属性 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能 但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿于是CSS便诞生了. CSS的出现，拯救了混乱的HTML，当让更加拯救了我们web开发者 让我们的网页更加丰富多彩 CSS初识 Cascading Style Sheets

目录选择器的权重和优先级盒模型标准盒模型和替代模型（IE）块级盒子与内联盒子隐藏一个元素Position文档流定位z-index浮动如何清除浮动包含块与控制框BFC外边距折叠（合并外边距与BFC、margin叠加）margin塌陷BFC 可以包含浮动的元素（清除浮动）BFC 解决文字环绕的问题层叠上下文层叠水平层叠上下文的特性DisplayFlex布局Grid布局各种居中块级元素水平居中（左右居中）块级元素垂直居中负外边距绝对居中容器内居中**视区内居中**变形（Transform）flex块中不定行的文字

Next.js 是一个基于 React 的全栈框架，其灵活的样式系统支持多种方案，包括 CSS 模块、Sass、Tailwind CSS 和 CSS-in-JS。这些方案各有特点，适用于不同场景：CSS 模块提供局部作用域，避免样式冲突；Sass 提供变量、嵌套等高级功能；Tailwind CSS 通过实用类加速开发；CSS-in-JS 实现动态样式。无论是在 App Router（app/ 目录）还是 Pages Router（pages/ 目录），Next.js 都提供了无缝集成这些样式方案的能力。

overscroll-behavior是CSS中控制滚动边界行为的属性，能有效解决弹窗、侧边栏等场景下的“滚动穿透”问题。通过contain（阻止穿透但保留弹性效果）或none（完全禁用边界行为）等值，可精准控制滚动链传递。相比传统JS方案更简洁高效，支持与-webkit-overflow-scrolling等属性配合优化体验。需注意兼容性（Chrome 63+、Firefox 59+等主流浏览器支持），是提升交互细节的实用工具。

snipaste是一个简单但强大的截图工具，也可以让你将截图贴回屏幕上。常用的快捷方式：1、F1可以截图，同时测量大小，设置箭头 书写文字等2、F3在桌面置顶显示3、点击图片，alt可以取色（按shift可以切换取色模式）4、按下esc可以取消图片显示。

下面我们来进一步学习如何使用CSS来修改文本样式。

本篇文章更加深入的讲解了Sacc的知识点以及他的特性，用生动形象的话语使得读者更加容易接受。再去结合实战案例更加稳固了知识点

Flex 布局是 CSS3 中一种强大的布局方式，2009年由 W3C 提出，2012年成为正式标准。它能够简便、完整、响应式地实现各种页面布局。

CSS包含块与百分比取值机制指南 核心概念： CSS包含块是元素布局的参考框架，决定了元素的定位和百分比计算基准。不同定位方式的元素具有不同的包含块确定规则：常规流元素参考最近的块级祖先内容区，绝对定位元素参考最近的非static定位祖先内边距区，固定定位元素则始终参考视口。 百分比计算机制： 宽度/高度：基于包含块的对应尺寸 内外边距：垂直方向也基于包含块宽度（非常规认知） 定位偏移：top/bottom基于高度，left/right基于宽度

CSS新增的:is()和:where()伪类是两个强大的选择器简化工具，能够将多个重复的选择器合并成简洁的形式。它们的核心功能相同，但:is()会继承参数列表中最高的优先级，而:where()始终保持0优先级。这两个伪类支持嵌套使用，能处理复杂选择器组合，特别适合响应式布局、样式重置和组件状态管理等场景。使用时需注意浏览器兼容性和优先级陷阱，合理运用可以显著提升CSS代码的可读性和可维护性。

【代码】css线性渐变。

代码在网页布局设计中，合理处理内容的排列方式直接影响用户体验与信息传达效率。通过 CSS 实现div容器禁止换行并配合滚动条的设计，看似简单却蕴含着对特定场景的精准适配，成为现代界面开发中不可或缺的技术方案。​。

回流(Reflow)和重绘(Repaint)是影响网页性能的关键概念。回流指元素几何属性改变触发的布局重新计算，代价较高；重绘则是元素外观样式变化但不影响布局。常见触发因素包括元素尺寸、位置改变（回流）和颜色、背景变化（重绘）。优化建议包括：避免频繁样式操作、使用文档片段批量处理DOM、优先使用transform/opacity等不会触发回流的属性。理解这些机制有助于编写更高效的代码，提升页面性能。