排列
-
css flexbox主轴交叉轴理解与应用
主轴由flex-direction决定，justify-content控制主轴对齐，align-items和align-content分别控制交叉轴上单行或多行元素的对齐方式，从而实现灵活布局。 在使用 CSS Flexbox 布局时，理解主轴（main axis）和交叉轴（cross axis）是…
-
如何用css background-repeat和background-position调整图片
background-repeat控制背景图重复方式，background-position设置其位置；通过no-repeat、center等值可实现不重复居中显示，常用于美化页面与响应式设计，两者结合简写更高效。 使用 CSS 的 background-repeat 和 background-po…
-
如何通过css实现导航栏响应式折叠
实现响应式导航栏需结合HTML结构、CSS媒体查询与JavaScript交互：桌面端通过flex布局水平排列导航项；移动端用媒体查询隐藏列表，显示汉堡按钮；点击按钮通过JavaScript切换.nav-links的active类控制显隐，配合transition可添加过渡效果。关键在于结构语义化、状…
-
css盒模型box-shadow对盒子大小有影响吗
box-shadow是CSS中用于添加阴影的属性，它渲染在border box外但不影响布局，不改变元素尺寸或位置，也不参与盒模型计算，仅作为视觉效果存在。 box-shadow 不会影响 CSS 盒模型中盒子的布局大小。 box-shadow 是什么 box-shadow 用于给元素添加阴影效果，…
-
css响应式导航栏图标与文字适配
通过媒体查询在小屏幕隐藏文字仅显示图标，大屏幕同时显示图标和文字；2. 使用Flex布局实现导航项自适应排列与对齐；3. 采用相对单位和SVG等高设置确保图标响应式缩放。 在移动端和桌面端都能良好显示的导航栏，关键在于图标与文字的合理适配。响应式设计中，图标的大小、位置以及是否显示文字，都需要根据屏…
-
css响应式网格布局自动填充子元素
使用 Grid 布局结合 repeat(auto-fill, minmax()) 可实现响应式网格，根据屏幕尺寸自动调整列数并均匀分布子元素；.container 设置 display: grid 和 grid-template-columns: repeat(auto-fill, minmax(2…
-
如何通过css实现多行flex布局
要实现多行 Flex 布局，需设置 flex-wrap: wrap 使子元素换行。1. 启用 display: flex 和 flex-wrap: wrap 或简写为 flex-flow: row wrap；2. 子项通过 width、flex-basis 或 flex: 0 0 设置宽度以控制换行…
-
b站历史记录查看在哪里 b站历史记录查看位置使用方法图文教程
在B站（哔哩哔哩）查看历史记录，可以帮助你快速找回之前观看过的视频。无论是电脑端还是手机端，操作都很简单。下面详细介绍B站历史记录的查看位置和使用方法，附图文说明。 一、手机App查看历史记录 这是最常用的查看方式，适合日常追番或看视频的用户。 步骤如下：打开B站App，登录你的账号。 点击右下角的…
-
css盒模型margin与border如何影响元素尺寸
border会增加元素总尺寸，如width:100px;padding:10px;border:5px时，实际宽为130px；使用box-sizing:border-box可使border不增大全局尺寸；margin影响布局间距，垂直方向可能合并，水平方向累加，透明不可见但决定空白区域。 在CSS盒…
-
css浮动元素如何与flexbox共存
浮动与Flexbox布局可共存但机制不同，前者脱离文档流用于文本环绕，后者通过弹性容器控制子元素排列；2. 在display: flex容器中，子元素的float属性会被忽略，因flex项目遵循自身的对齐规则；3. 应避免在flex容器内使用浮动，以防止布局冲突和预期外的渲染效果。 浮动元素和Fle…
