本文目录一览：
- 1、在css中flex-direction属性如何使用
- 2、css如何使用宽度
- 3、css伪类:not()在筛选元素中如何使用
- 4、css定位position属性如何使用
- 5、css字体属性font-family、font-size、font-weight如何使用
- 6、css颜色过渡transition-color如何使用
在css中flex-direction属性如何使用
1、flex-direction属性用于定义Flex容器中子元素的排列方向，通过设置主轴方向控制子项布局顺序。 具体使用方法如下：属性作用定义Flex容器内子元素的排列方向（水平或垂直）。决定主轴方向，影响子项的布局顺序和空间分布。需应用于已设置为display： flex的容器。
2、在 CSS 中，若需使用 flex 属性同时保持列表样式，可通过调整 flex-direction 和 list-style-position 实现。 具体方法如下： 问题根源：display： flex 对列表样式的影响当对 元素应用 display： flex 时，默认的列表样式（如圆点、数字）可能被覆盖。
3、适度使用：过度依赖order可能导致CSS难以维护，建议优先通过flex-direction和合理的HTML结构实现布局。
4、启用弹性布局通过 display： flex 或 display： inline-flex 将父容器设为弹性容器：display： flex：块级弹性容器，子元素默认横向排列，独占一行。display： inline-flex：内联弹性容器，不独占一行，与其他内联元素共存。
5、实现CSS容器垂直排列最直接且现代的方式是使用Flexbox布局，通过设置display： flex和flex-direction： column，使子元素沿垂直方向排列。
css如何使用宽度
1、示例：元素最小宽度 300px，最大宽度 500px，宽度在 300px~500px 之间自适应。
2、在CSS中设置表格宽度主要有以下几种方法：设置固定宽度通过width属性直接指定表格的固定像素值，例如table { width： 100px； }。此方法简单直观，兼容性极佳，所有浏览器均支持。缺点是当内容超出设定宽度时，可能导致内容溢出或布局错乱，适用于内容量可控的场景。
3、基础CSS设置img { max-width： 100%； /* 图片最大宽度不超过父容器 */ height： auto； /* 高度自动按比例调整 */ display： block； /* 可选：消除行内元素默认间隙 */}max-width： 100%：确保图片宽度始终不超过父容器宽度，避免横向溢出。
4、要使用 CSS Flexbox 创建宽度可变、间距相等且左对齐的元素布局，可以按照以下步骤实现：核心属性组合：通过 display： flex 激活弹性布局，结合 flex-wrap： wrap 实现自动换行，再通过 gap 控制间距。
5、元素宽度固定为500px。单位选择：推荐使用px（固定值）或ch/em（相对单位，适应字体大小）。移动端适配：结合媒体查询（@media）可针对不同屏幕尺寸调整min-width和max-width。通过合理使用min-width和max-width，可显著提升页面的响应式能力和用户体验，避免因屏幕尺寸变化导致的布局问题。
6、新建一个html文件，命名为test.html。在test.html文件内，创建一个div模块，在div标签内，使用ul、li标签创建一个无序列表。在test.html文件内，设置div的class为mydiv，主要用于设置div的css样式。在css标签内，通过class设置div的宽度为300px，高度为200px，背景颜色为灰色。
css伪类:not()在筛选元素中如何使用
基本语法：not（选择器）参数为简单选择器（如类名、ID、元素、属性或伪类），不能嵌套复合选择器（早期版本限制，CSS Level 4 已支持逗号分隔的多选择器）。
排除特定标签场景：选中某一类元素，但排除某个标签类型。示例：is（input， select， textarea）：not（textarea） { border： 1px solid #ccc；}效果：为 input、select 和 textarea 添加边框，但排除 textarea 标签（实际更简洁的写法是直接针对 input 和 select）。
常见用法 排除特定类或ID示例1：所有按钮添加蓝色背景，但排除class=cancel的按钮。button：not（.cancel） { background-color： blue； color： white；}示例2：所有div添加边框，但排除id=sidebar的div。
css定位position属性如何使用
1、CSS的position属性通过定义元素定位方式实现页面布局，包含static、relative、absolute、fixed、sticky五种类型，需配合top、left等属性使用，合理设置父级上下文可避免布局错乱。 具体使用方法如下：static（默认定位）元素按正常文档流排列，不响应top、left等偏移属性。
2、需指定方向属性（如bottom： 20px）。示例：.back-top { position： fixed； bottom： 20px； right： 20px； } sticky（粘性定位）元素在滚动到特定阈值前表现为相对定位（relative），之后变为固定定位（fixed），需指定方向属性（如top： 0）生效。
3、使用CSS的position属性实现元素定位，可通过设置static、relative、absolute、fixed、sticky五种值，结合偏移属性（top、right、bottom、left）控制位置。 以下是具体用法及示例： static定位（默认）特性：元素按正常文档流排列，偏移属性（top、right、bottom、left）无效，不参与特殊定位。
4、CSS中的定位属性允许你控制元素在页面上的位置。主要有三种定位方式：static、relative 和 absolute。其中，相对定位（relative）和绝对定位（absolute）是最常用的两种。相对定位 （relative）相对定位是相对于元素自身原来的位置进行偏移。
5、CSS的position属性用于指定元素的定位方式，共有五个常用值，每种定位方式都有其独特的行为和应用场景。以下是详细说明： static（静态定位）默认值，元素遵循正常文档流。特点：不受top、bottom、left、right属性影响。示例：普通段落或未设置定位的元素。
css字体属性font-family、font-size、font-weight如何使用
CSS常用字体属性通过font-family、font-size、font-weight、font-style和line-height设置，可分别控制字体类型、大小、粗细、样式和行高，合理搭配可提升文本可读性与美观度，且支持简写属性合并设置。
核心文本样式属性font-family：定义字体栈，优先使用系统字体，后跟备用字体。例如：font-family： PingFang SC， Helvetica Neue， sans-serif；font-size：控制文本大小，推荐使用 rem（相对根元素）或 em（相对父元素）实现响应式布局。
字体相关属性font-family：设置字体类型指定一个或多个字体名称，浏览器按顺序尝试使用。若字体名称含空格，需用引号包裹。示例：p { font-family： Arial， Helvetica， sans-serif； } 通用字体系列（备选）：serif（衬线）、sans-serif（无衬线）、monospace（等宽）。
css颜色过渡transition-color如何使用
使用CSS transition优化文字颜色过渡的核心方法是：通过transition： color属性定义颜色变化的时间和缓动函数，结合状态触发（如：hover或类名切换），并优化渲染性能以避免闪烁或卡顿。
正确设置transition属性针对border-color单独过渡：若只需颜色变化，推荐仅指定border-color，避免不必要的性能消耗。
基础颜色过渡实现使用transition属性时需明确三个参数：过渡属性、时长、缓动函数。
基础语法与参数transition 是复合属性，可简写为：transition： property duration timing-function delay；property：指定过渡的CSS属性（如background-color、transform），或用all表示所有可动画属性。建议：仅指定必要属性，避免all带来的性能开销。duration：过渡持续时间，单位为s或ms（如0.3s或300ms）。
使用简写属性transition同时控制多个CSS属性通过逗号分隔的方式，为不同属性设置各自的过渡效果，包括过渡时间、缓动函数等。
property：指定过渡的CSS属性（如width、opacity），或用all表示所有可动画属性。duration：过渡持续时间（如0.3s或300ms），必须设置。timing-function：速度曲线（如ease、linear、cubic-bezier（）。delay：过渡开始前的延迟时间（如0.1s）。
