积累CSS样式属性：padding、margin、display:flex、font、position、cursor、:hover、:nth-child()、border-radius

好好研究

1268人浏览 · 2025-07-15 20:59:34

好好研究 · 2025-07-15 20:59:34 发布

一、padding - 内边距

padding叫做内边距，用于设置元素内容与其边框之间的距离。

1. padding的四个方向

padding-top：顶部内边框；
padding-right：右侧内边框；
padding-bottom：底部内边框；
padding-left：左侧内边框。

单方向设置
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

2. padding简写

简写顺序： 上、右、下、左（顺时针方向）。
简写规则：

一个值：四个方向均使用这个值；
两个值：第一个值设置上、下，第二个值设置右、左；
三个值：第一个值设置上，第二个值设置右、左，第三个值设置下；
四个值：分别设置上、右、下、左（顺时针方向）。

简写
padding: 10px;                /* 所有方向：上、右、下、左均为10px */
padding: 10px 20px;           /* 上下10px，左右20px */
padding: 10px 20px 30px;      /* 上10px，左右20px，下30px */
padding: 10px 20px 30px 40px; /* 上、右、下、左分别设置 */

3. padding的属性值

长度值：像素px、百分比%、相对于当前字体大小em、相对于根元素字体大小rem等；
inherit：继承父元素的padding值；
initial：重置为默认值（默认值为0）；
unset：根据上下文重置为inherit或initial。
注意：padding不支持负值，也不支持auto。

4. 示例

*{
  margin: 0;
  padding: 0;
}

.menu{
  background: red;
  padding: 20px;
}

效果图：图中白框就是设置的内边距距离。

二、margin - 外边距

margin叫做外边距，控制元素与元素之间的距离。

1. margin的四个方向

margin-top：元素的顶部外边框，即元素顶部与其上面元素的距离；
margin-right：元素的右侧外边框，即元素右侧与其右侧元素的距离；
margin-bottom：元素的底部外边框，即元素底部与其下面元素的距离；
margin-left：元素的左侧外边框，即元素左侧与其左侧元素的距离。

单方向设置
margin-top: 10px;
margin-right: 20px;
margin-bottom: -10px;/* 与下方元素重叠*/
margin-left: 40px;

2. margin简写

简写顺序： 上、右、下、左（顺时针方向）。
简写规则：

一个值：四个方向均使用这个值；
两个值：第一个值设置上、下，第二个值设置右、左；
三个值：第一个值设置上，第二个值设置右、左，第三个值设置下；
四个值：分别设置上、右、下、左（顺时针方向）。

 简写
margin: 10px;                /* 所有方向：上、右、下、左均为 10px */
margin: 10px 20px;           /* 上下 10px，左右 20px */
margin: 10px 20px 30px;      /* 上 10px，左右 20px，下 30px */
margin: 10px 20px 30px 40px; /* 上、右、下、左（顺时针） */

3. margin的属性值

长度值：像素px、百分比%、em、厘米cm等；
inherit：继承父元素的margin值；
auto：由浏览器自动计算外边距，通常用于水平居中布局；
负值：用负值使元素向反方向移动，使其与其他元素重叠或产生间距；
initial：重置为默认值（默认值为0）；
unset：根据上下文重置为inherit或initial。

4. 示例

*{
  margin: 0;
  padding: 0;
}

.menu{
  background: red;
  margin: 20px;
}

效果图：图中蓝框就是设置的外边距距离。

三、display:flex; - 弹性盒子

弹性盒子：子元素默认始终横向布局。
使用弹性盒子找父元素，将父元素设置为弹性盒子，则子元素为横向布局。

常用的弹性盒子属性

1. `justify-content`属性

justify-content：设置弹性盒子内子元素的分布方式。
属性值：

flex-start（）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目间间隔相等
space-around：每个项目两侧间隔相等
space-evenly：项目间和边缘间隔完全相等

2. `align-items`属性

align-items：设置弹性盒子内子元素在垂直方向上的对齐方式。
属性值：

stretch：拉升填满容器高度
flex-start：起点对齐
flex-end：终点对齐
center：居中对齐
baseline：第一行文字的基线对齐

示例


<body>
  <!-- html代码 -->
  <div class="menu">
    <ul>
      <li>新闻</li>
      <li>hao123</li>
      <li>地图</li>
      <li>贴吧</li>
      <li>视频</li>
      <li>图片</li>
      <li>网盘</li>
      <li>文库</li>
      <li><img src="../img/下载.png"></li>
      <li>更多</li>
    </ul>
    <div class="btn">
    <span>设置</span>
    <span>登录</span>
  </div>
  </div>
</body>

/* css代码 */
*{
  margin: 0;
  padding: 0;
}

.menu{
  background: red;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

效果图：
弹性盒子

四、font - 字体

`font-family`：字体族

定义元素的字体族（字体家族），可以指定多个字体作为备选。
要求：

多个字体用逗号分隔；
包含空格的字体名需要用引号包围；
浏览器会从左到右尝试使用可用的字体；
最后通常指定一个通用字体族（如 serif, sans-serif, monospace 等）。

`font-size` ：字体大小

属性值：数字

`font-weight`：字体粗细

属性值：

normal:正常
bold：加粗
数字：100到900，400=normal，700=bold，500以下变细，600以上变粗
lighter：比父元素更细
bolder：比父元素更粗

`font-style`：字体样式

属性值：

normal:正常
italic：斜体
oblique：倾斜体

`line-height`：行高

设置行间距。
属性值：

无单位：相当于当前字体的大小
px：固定值
%：百分比

`color`：字体颜色

设置文本内容的颜色。
属性值：

颜色关键字
十六进制表示法：六位数；
RGB：rgb(red, green, blue) - 每个参数取值 0-255 或 0%-100%
RGBA：rgba(red, green, blue, alpha) - 增加了透明度通道（0-1）

`font-variant`：字体样式

控制小型大写字母的显示。
属性值：

normal:正常
small-caps：小型大写字母

`font`：简写

将多个字体属性合并为一个简写。
属性值与属性值之间用空格隔开。
基本格式：

p {
  font: [font-style] [font-variant] [font-weight] font-size[/line-height] font-family;
}

示例：

p {
  font: italic small-caps bold 16px/1.5 "Microsoft YaHei", sans-serif;
}

五、position - 定位

决定了元素在文档中的定位方式。

1. 属性值：

static：静态定位（默认值）
relative：相对定位
- 原位置仍保留；
- 可以使用top、right、botton、left进行偏移；
- 偏移量相对于元素自身原本的位置；
- 常用作为absolute定位元素的参照物。
absolute：绝对定位
- 可以使用top、right、botton、left进行定位；
- 常用于创建浮动元素、对话框、下拉菜单等。
fixed：固定位置
- 元素相对于浏览器视口进行定位，即使页面滚动也不会移动；
- 常用于固定导航栏、返回顶部按钮等。
sticky：粘性定位
- 相对定位和固定定位的混合；
- 在视口到达指定位置（如 top: 0）时变为固定定位；
- 需要指定至少一个阈值（top/right/bottom/left）；
- 常用于表头、导航栏等需要"粘住"的效果。

2. 定位相关属性

与position配合使用的属性：

top / right / bottom / left - 定位偏移量
z-index - 控制堆叠顺序（仅对非 static 元素有效）

3. 示例

.menu ul li img{
  height: 14px;
  position: relative;
  top: 2px;
}

效果图：

六、cursor - 鼠标样式

用于指定鼠标指针在元素上时显示的光标样式。

常用光标值

1. 通用光标

auto：浏览器自动决定光标（默认值）
default：默认箭头光标
none：隐藏光标

2. 链接和状态光标

pointer：手形光标（表示链接可点击）
help：帮助光标（带问号的箭头）
wait：等待光标（通常为沙漏或旋转圆圈）
progress：进行中光标（箭头旁有旋转圆圈）

3. 文本选择光标

text：文本选择光标（I型）
vertical-text：垂直文本选择光标（横向I型）

4. 拖拽和移动光标

move：移动光标（十字箭头）
grab：可抓取光标（张开的手）
grabbing：抓取中光标（紧握的手）

5. 调整大小光标

e-resize/w-resize：东西方向调整大小（作用箭头）
n-resize/s-resize：南北方向调整大小（上下箭头）
ne-resize/nw-resize/se-resize/sw-resize：对角线调整大小
ew-resize：东西双向调整（双向左右箭头）
ns-resize：南北双向调整（双向上下箭头）
nesw-resize/nwse-resize：对角线双向调整

6. 滚动光标

all-scroll：全方位滚动光标（四向箭头）

7. 禁用光标

nob-allowed：禁止操作光标（带斜线的圆圈）
no-drop：不可放置光标（带斜线的手形）

8. 缩放光标

zoom-in：放大光标（带加号的放大镜）
zoom-out：缩小光标（带减号的放大镜）

9. 自定义光标

使用图像作为自定义光标。

.custom-cursor {
  cursor: url('cursor.png'), auto;
}

说明：

第一个值是要使用的图像 URL；
第二个值是备用光标（当自定义图像不可用时使用）；
可以指定热点位置（默认为图像左上角）：

cursor: url('cursor.cur') 4 12, auto;

七、:hover - 悬停状态

:hover是一个伪类选择器。
其作用：定义将鼠标悬停在元素上时的样式效果。

基本格式

元素与:hover之间没有空格。

元素:hover {
  /* 悬停时应用的样式 */
  属性:属性值;
}

八、:nth-child() - 指定找某一元素

:nth-child()也是一种伪类选择器，允许根据元素在其父元素中的位置来精确选择元素。

基本格式

元素:nth-child(参数) {
  属性:属性值;
}

参数说明：
:nth-child()接受一个参数：

数字（如 3）：选择第3个子元素；
关键字（odd 或 even）：
- odd：选择奇数位置的元素（1, 3, 5…）
- even：选择偶数位置的元素（2, 4, 6…）
公式（an+b）：
- a：周期长度
- n：计数器（从0开始）
- b：偏移量

九、border-radius - 圆角

border-radius是设置元素圆角的属性，可以让元素的边角变得圆润。

基本格式

selector {
  border-radius: 值;
}

属性值

单独设置每个角的属性

border-top-left-radius：左上角
border-top-right-radius：右上角
border-bottom-right-radius：右下角
border-bottom-left-radius：左下角

.box {
  border-top-left-radius: 10px;     /* 左上角 */
  border-top-right-radius: 20px;    /* 右上角 */
  border-bottom-right-radius: 30px; /* 右下角 */
  border-bottom-left-radius: 40px;  /* 左下角 */
}

简写

一个值：四角设置统一
两个值：对角设置，第一个值是左上角和右下角，第二个值是右上角和左下角；
三个值：第一个值是左上角，第二个值是右上角和左下角，第三个值是右下角；
四个值：顺时针顺序，左上、右上、右下、左下
斜杠语法：椭圆角

.box {
  border-radius: 10px; /* 四个角都是10px圆角 */
  border-radius: 10px 20px; /* 左上和右下:10px, 右上和左下:20px */
  border-radius: 10px 20px 30px;/* 左上:10px, 右上和左下:20px, 右下:30px */
  border-radius: 10px 20px 30px 40px;/* 左上:10px, 右上:20px, 右下:30px, 左下:40px */
  border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;/* 水平半径 / 垂直半径 */
}

https://edu.csdn.net/learn/39067/627173?utm_source=2019755004

汇聚全球AI编程工具，助力开发者即刻编程。

更多推荐

只要13个单词，就能给ChatGPT“下毒”？「美版贴吧」Reddit，正沦为AI“投毒基地”

AI编程社区

零基础也能做！用 AI 提示词一键生成 Three.js 3D 中国地图

AI编程社区

Claude Code + 电商微服务Docker+K8s实战项目（个人练手）

电商微服务Docker+K8s实战项目｜落地规划、服务器选型、时间拆解&避坑指南规划：买几台云服务器。然后让claude code给我搞一个电商项目，电商项目只有用户、商品、订单、交易记录等简易电商功能，目的是为了实现模拟支付、筛选、高可用、高并发的处理。然后在云服务器上，或者使用云厂商搭建好的k8s，使用K8s完成nginx、nacos、redis集群、mongodb、mysql（高可用）、ra

AI编程社区

所有评论(0)

查看更多评论

好好研究

@m0_64928156

已为社区贡献1条内容

积累CSS样式属性：padding、margin、display:flex、font、position、cursor、:hover、:nth-child()、border-radius

好好研究

目录

一、padding - 内边距

1. padding的四个方向

2. padding简写

3. padding的属性值

4. 示例

二、margin - 外边距

1. margin的四个方向

2. margin简写

3. margin的属性值

4. 示例

三、display:flex; - 弹性盒子

常用的弹性盒子属性

1. justify-content属性

2. align-items属性

示例

四、font - 字体

font-family：字体族

font-size ：字体大小

font-weight：字体粗细

font-style：字体样式

line-height：行高

color：字体颜色

font-variant：字体样式

font：简写

五、position - 定位

1. 属性值：

2. 定位相关属性

3. 示例

六、cursor - 鼠标样式

常用光标值

1. 通用光标

2. 链接和状态光标

3. 文本选择光标

4. 拖拽和移动光标

5. 调整大小光标

6. 滚动光标

7. 禁用光标

8. 缩放光标

9. 自定义光标

七、:hover - 悬停状态

基本格式

八、:nth-child() - 指定找某一元素

基本格式

九、border-radius - 圆角

基本格式

属性值

单独设置每个角的属性

简写

所有评论(0)

温馨提示：您尚未绑定手机号

好好研究

1. `justify-content`属性

2. `align-items`属性

`font-family`：字体族

`font-size` ：字体大小

`font-weight`：字体粗细

`font-style`：字体样式

`line-height`：行高

`color`：字体颜色

`font-variant`：字体样式

`font`：简写