1. 布局相关
-
display：定义元素的显示类型。block：元素呈块级显示，占据整行。inline：元素呈行内显示，占据内容空间，不会换行。inline-block：结合inline和block特性，允许元素在同一行中显示，但又能设置宽高。flex：启用弹性布局，使子元素能够在容器内灵活分配空间。grid：启用网格布局，按行列排列子元素。none：元素不显示，占用空间为 0。
-
position：定义元素的定位类型。static：默认定位方式，元素按文档流排布。relative：相对定位，相对于其正常位置偏移。absolute：绝对定位，相对于最近的已定位父元素（非static）定位。fixed：固定定位，相对于视口定位，滚动页面时元素位置不变。sticky：粘性定位，元素在滚动时会保持在屏幕上，直到达到某个阈值。
-
top,right,bottom,left：设置元素的位置偏移，通常与position属性配合使用。- 例如：
top: 10px;将元素向下偏移 10px。
- 例如：
-
flex：设置弹性项目的伸缩能力。flex-grow：定义项目如何伸展，占据剩余空间。flex-shrink：定义项目如何收缩。flex-basis：定义项目的初始主轴尺寸。justify-content：主轴对齐方式，控制项目在主轴（横向）上的对齐。- 常见值：
flex-start、flex-end、center、space-between、space-around。
- 常见值：
align-items：交叉轴对齐方式，控制项目在交叉轴（纵向）上的对齐。- 常见值：
flex-start、flex-end、center、stretch。
- 常见值：
flex-direction：定义弹性布局的主轴方向。- 常见值：
row、column、row-reverse、column-reverse。
- 常见值：
flex-wrap：定义弹性项目是否换行。- 常见值：
nowrap（不换行）、wrap（换行）。
- 常见值：
-
grid：设置网格布局。grid-template-columns：定义列的宽度。grid-template-rows：定义行的高度。grid-gap：设置行与列之间的间隙。grid-template-areas：通过命名区域定义网格布局。justify-items：控制网格项目在行轴上的对齐。align-items：控制网格项目在列轴上的对齐。
2. 盒模型相关
-
width,height：设置元素的宽度和高度，单位可以是px,%,vw,vh,em等。 -
padding：设置元素的内边距。padding-top、padding-right、padding-bottom、padding-left：分别设置元素的上、右、下、左内边距。
-
border：设置元素的边框。border-width：设置边框宽度。border-style：设置边框样式（如：solid实线、dashed虚线、dotted点）。border-color：设置边框颜色。
-
margin：设置元素的外边距。margin-top、margin-right、margin-bottom、margin-left：分别设置元素的上、右、下、左外边距。
-
box-sizing：设置宽高是否包括内边距和边框。content-box：宽高只包括内容区域，不包括内边距和边框。border-box：宽高包括内边距和边框。
3. 文本和字体相关
-
font-family：设置字体类型。- 示例：
font-family: "Arial", sans-serif;
- 示例：
-
font-size：设置字体大小。- 示例：
font-size: 16px;
- 示例：
-
font-weight：设置字体粗细。- 常见值：
normal（正常）、bold（粗体）、lighter（更细）。
- 常见值：
-
font-style：设置字体样式。- 常见值：
normal（普通）、italic（斜体）、oblique（倾斜）。
- 常见值：
-
line-height：设置行高，影响文本的行间距。- 示例：
line-height: 1.5;
- 示例：
-
text-align：设置文本的水平对齐方式。- 常见值：
left、right、center、justify。
- 常见值：
-
text-decoration：设置文本装饰（如下划线）。- 常见值：
underline（下划线）、line-through（在文字中间加横线）、none。
- 常见值：
-
text-transform：设置文本大小写转换。- 常见值：
uppercase（大写）、lowercase（小写）、capitalize（首字母大写）。
- 常见值：
-
letter-spacing：设置字符间距。- 示例：
letter-spacing: 2px;
- 示例：
-
word-spacing：设置单词间距。- 示例：
word-spacing: 4px;
- 示例：
-
white-space：控制文本是否换行。- 常见值：
normal、nowrap、pre、pre-wrap。
- 常见值：
4. 背景相关
-
background-color：设置元素的背景颜色。- 示例：
background-color: #f0f0f0;
- 示例：
-
background-image：设置元素的背景图片。- 示例：
background-image: url('image.jpg');
- 示例：
-
background-position：设置背景图片的位置。- 示例：
background-position: center center;
- 示例：
-
background-size：设置背景图片的大小。- 常见值：
cover、contain、auto。
- 常见值：
-
background-repeat：设置背景图片的重复方式。- 常见值：
repeat、no-repeat、repeat-x、repeat-y。
- 常见值：
-
background-attachment：设置背景图片的滚动行为。- 常见值：
scroll、fixed、local。
- 常见值：
5. 颜色和透明度相关
-
color：设置文本颜色。- 示例：
color: red;
- 示例：
-
opacity：设置元素的透明度，值在0到1之间。- 示例：
opacity: 0.5;
- 示例：
6. 边框相关
-
border-radius：设置元素的圆角。- 示例：
border-radius: 10px;
- 示例：
-
border-width：设置边框宽度。- 示例：
border-width: 2px;
- 示例：
-
border-style：设置边框样式。- 常见值：
solid、dashed、dotted。
- 常见值：
-
border-color：设置边框颜色。- 示例：
border-color: #333;
- 示例：
-
border-left,border-right,border-top,border-bottom：分别设置四个边的宽度、样式和颜色。
7. 过渡与动画相关
-
transition：设置过渡效果，控制元素的过渡行为。- 示例：
transition: all 0.3s ease;（解释：变化不会立刻完成，而是会在 0.3 秒内完成一个平滑的过渡）
- 示例：
-
animation：设置动画效果，允许元素在多个关键帧之间切换状态。- 示例：
animation: fadeIn 2s ease-in-out;（解释：让元素在 2秒内 以 淡入（从透明到完全不透明） 的方式出现，并且动画的速度是 缓入缓出（ease-in-out） 的）
- 示例：
8. 可视化和浮动相关
-
visibility：控制元素是否可见。- 常见值：
visible（可见）、hidden（不可见）、collapse（隐藏并不占空间）。
- 常见值：
-
z-index：设置元素的层叠顺序，控制元素在堆叠上下文中的位置。- 示例：
z-index: 10;（数字越大，层级越高）
- 示例：
-
overflow：设置元素的溢出行为。- 常见值：
visible（默认可见）、hidden（隐藏）、scroll（有滚动条）、auto。
- 常见值：
-
float：设置元素的浮动方式。（用的少）- 常见值：
left、right、none。
- 常见值：
-
clear：控制元素是否绕过浮动元素。- 常见值：
left、right、both、none。
- 常见值：
9. 定位和层叠相关
top,right,bottom,left：用于绝对定位、固定定位或相对定位时，设置元素的偏移。z-index：控制重叠元素的显示顺序，值越大越在上面。
10. 响应式布局相关
@media：用于定义响应式设计，依据屏幕宽度或其他条件应用不同的样式。- 例如：
@media (max-width: 768px) { ... }。
- 例如：
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
