字体设置:

基本字体属性:

font-family:设置字体类型​

作用​​：定义元素使用的字体。

font-family: "字体名称", 备用字体, 通用字体族;

示例:

body {
  font-family: "Microsoft YaHei", Arial, sans-serif;
}

font-size- 设置字体大小​:

​​作用​​：定义文字尺寸。

常用单位​​：

px（像素）：固定大小，如 16px

em：相对于父元素的字体大小（如 1.5em是父元素字体的 1.5 倍）

rem：相对于根元素（<html>）的字体大小

%：百分比（如 150%）

vw/ vh：视窗宽度/高度的百分比（如 2vw）

示例:

h1 {
  font-size: 2rem; /* 通常是 32px（假设根字体为 16px） */
}
p {
  font-size: 16px;
}

font-weight设置字体粗细​:

作用​​：控制字体的粗细程度。

常用值​​：

normal（默认，400）

bold（加粗，700）

100~900（数字越大越粗，需字体支持）

示例:

.title {
  font-weight: bold;
}
.light-text {
  font-weight: 300;
}

font-style:设置字体风格​

​​作用​​：控制斜体或倾斜效果。

normal（默认，正常）

italic（斜体，使用字体的斜体版本）

oblique（强制倾斜，无斜体字体时模拟斜体）

em {
  font-style: italic;
}

line-height:

作用​​：控制行间距（影响可读性）。

​​常用值​​：

无单位数字（如 1.5，相对于当前字体大小）

固定值（如 24px）

normal（默认，通常是 1.2）

示例:

p {
  line-height: 1.6; /* 字体大小的 1.6 倍 */
}

复合属性font:

作用​​：用一行代码设置多个字体属性。

语法:

font: font-style font-weight font-size/line-height font-family;

背景属性:

基本背景属性:

background-color:

作用​​：定义元素的背景颜色。

语法:

background-color: 颜色值;

示例:

body {
  background-color: #f0f0f0;
}
.alert {
  background-color: rgba(255, 0, 0, 0.2); /* 半透明红色 */
}

background-image:

作用​​：定义元素的背景图片。

语法:

background-image: url("图片路径")

多背景图片:

.banner {
  background-image: url("bg1.png"), url("bg2.png");
}

 background-repeat:

作用​​：决定背景图片是否重复平铺。

常用值:

repeat（默认，水平和垂直重复）

repeat-x（仅水平重复）

repeat-y（仅垂直重复）

no-repeat（不重复）

space（均匀分布，不裁剪）

round（拉伸填充，不留空白）

示例:

.tile {
  background-image: url("pattern.png");
  background-repeat: repeat;
}
.logo {
  background-image: url("logo.png");
  background-repeat: no-repeat;
}

background-position:

作用​​：控制背景图片的起始位置。

语法:

background-position: x轴位置 y轴位置;

常用词:

关键字:left;right;center;top;bottom;

百分比:50%,50%

background-size:控制背景图片尺寸​

在网页中x与y轴的分布:

background-size:

作用:用来控制图片背景尺寸

常用值:

auto:默认尺寸

cover:覆盖整个元素，可能裁剪图片

contain:完全显示图片,可能留白

具体尺寸：100px 200px, 50% 80%

.full-cover {
  background-size: cover; /* 完全覆盖背景区域 */
}

background-attachment:

作用:用来控制背景图片是否随页面滚动

常用值:

scroll:默认，背景随元素滚动

fixed:背景固定，不随页面滚动

local:背景随元素内容滚动

示例:

.parallax {
  background-attachment: fixed; /* 视差滚动效果 */
}

圆角矩形:border-radius

作用:用于设置元素边框圆角的属性，可以让元素的边角变得圆润，从而创建更柔和的视觉效果。

基本用法:

border-radius: 值;

这个值是是内切圆的半径. 数值越大, 弧线越强烈

示例:

.box {
  border-radius: 10px; /* 四个角都设置 10px 圆角 */
}

设置四个角的圆角矩形:

border-radius: 左上 右上 右下 左下;

示例:

.box {
  border-radius: 10px 20px 30px 40px; /* 左上 10px，右上 20px，右下 30px，左下 40px */
}

调试工具--查看CSS属性

打开方式:

(1)浏览器鼠标右击点检查

(2)快捷键:F12

核心面板功能:

面板

主要功能

快捷键

​​Elements​​

查看和编辑HTML/CSS

Ctrl + Shift + C

​​Console​​

运行JavaScript，查看日志

Ctrl + Shift + J

​​Sources​​

调试JavaScript，查看源代码

Ctrl + O

​​Network​​

分析网络请求和性能

Ctrl + Shift + I→ Network

​​Performance​​

分析运行时性能

​​Application​​

查看存储、缓存等

​​Security​​

检查安全问题

element标签页解析:

(1)双击HTML元素或属性可直接修改

(2)拖动元素改变DOM结构

(3)ctrl + 滚轮进行缩放, ctrl + 0 恢复原始大小

元素的显示模式:

块级元素:

特点:

(1)独占一行

(2)默认宽度(撑满父元素宽度)

(3)可以通过CSS来设置宽和高

(4)margin和 padding在所有方向生效。

常见块级元素:

<div>, <p>, <h1>~<h6>, <ul>, <ol>, <li>, <table>, <form>, <section>, <article>

行内元素:

特点:

(1)不换行(与其他行内元素在同一行显示)

(2)设置width和height无效

(3)水平方向（margin-left, margin-right, padding-left, padding-right）生效。

(4)垂直方向（margin-top, margin-bottom, padding-top, padding-bottom）​​不影响布局​​（但可能覆盖其他元素）。

常见行内元素:

<span>, <a>, <strong>, <em>, <img>, <input>, <button>, <label>

核心区别:

特性

块级元素 (Block)

行内元素 (Inline)

​​默认显示​​

独占一行

与其他行内元素共享一行

​​宽度/高度​​

可设置

​​不可设置​​（由内容决定）

​​边距/内边距​​

全部方向生效

​​水平方向生效​​，垂直方向可能影响布局

​​包含关系​​

可包含块级和行内元素

通常只包含文本或其他行内元素

​​典型标签​​

<div>, <p>, <h1>~<h6>, <ul>, <li>

<span>, <a>, <strong>, <img>, <input>

通过CSS中的display我们可以在行内元素和块级元素中转换:

display值

效果

示例

block

转为块级元素

span { display: block; }

inline

转为行内元素

div { display: inline; }

示例:

/* 让行内元素支持宽高 */
.button {
  display: inline-block;
  width: 120px;
  height: 40px;
}

/* 让块级元素同行显示 */
.menu-item {
  display: inline;
}

盒模型:

每一个 HTML 元素就相当于是一个矩形的 "盒子" 这个盒子由这几个部分构成:

内容区:显示文本图片等具体内容

内边距:内容与边框之间的透明区域

边框:围绕内容和内边距的线条

外边距:盒子与其他元素之间的透明区域

类似于下面这张图片:

边框:

基础属性:

粗细: border-width

样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框

颜色: border-color

示例:

 <div>test</div>
 div {
 width: 500px;
 height: 250px;
 border-width: 10px;
 border-style: solid;
 border-color: green;
 }

内边距:

padding: 10px;             /* 四个方向 */
padding: 10px 20px;        /* 上下 | 左右 */
padding: 10px 20px 30px;   /* 上 | 左右 | 下 */
padding: 10px 20px 30px 40px; /* 上 | 右 | 下 | 左 */

外边距:

margin: 10px;              /* 四个方向 */
margin: 10px auto;         /* 上下 | 水平居中 */
margin-top: 20px;         /* 单独设置 */

块级元素水平居中:

前提:指定宽度(如果不指定宽度, 默认和父元素一致)

把水平 margin 设为 auto

示例:

.container {
  width: 800px;
  margin: 0 auto; /* 水平居中 */
}

边框与边距会撑大盒模型所以我们优先使用border-box​​：避免 padding和 border破坏布局。

弹性布局:flexbox

Flexbox 是 CSS 中最强大的布局工具之一，专为​​一维布局​​（行或列）设计。它通过简单的属性即可实现复杂布局，彻底改变了传统的浮动和定位方式。

基础概念:被设置为 display:flex 属性的元素, 称为 flex container

(1)主轴方向

值

效果

示例

row（默认）

水平排列（左→右）

flex-direction: row;

row-reverse

水平反向（右→左）

flex-direction: row-reverse;

column

垂直排列（上→下）

flex-direction: column;

column-reverse

垂直反向（下→上）

flex-direction: column-reverse;

(2)主轴对齐

值

效果

示例

flex-start（默认）

向主轴起点对齐

justify-content: flex-start;

flex-end

向主轴终点对齐

justify-content: flex-end;

center

居中

justify-content: center;

space-between

两端对齐，间距均分

justify-content: space-between;

space-around

每个项目两侧间距相等

justify-content: space-around;

space-evenly

所有间距完全相等

justify-content: space-evenly;

 
.container {
  justify-content: space-between;
}

(3)换行控制

值

效果

示例

nowrap（默认）

不换行（可能溢出）

flex-wrap: nowrap;

wrap

换行（多行显示）

flex-wrap: wrap;

wrap-reverse

反向换行

flex-wrap: wrap-reverse;

 
.container {
  flex-wrap: wrap; /* 允许换行 */
}

(4)交叉轴对齐:

值

效果

示例

stretch（默认）

拉伸填满容器高度

align-items: stretch;

flex-start

向交叉轴起点对齐

align-items: flex-start;

flex-end

向交叉轴终点对齐

align-items: flex-end;

center

居中

align-items: center;

baseline

按基线对齐

align-items: baseline;

 
.container {
  align-items: center; /* 垂直居中 */
}

它的所有子元素立刻称为了该容器的成员, 称为 flex item

flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)

注意:当父元素设置为 display: flex 之后, 子元素的 float, clear, vertical-align 都会失效.

启用弹性布局:

.container {
  display: flex; /* 或 inline-flex */
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

# 学习
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

【LTAI深度学习训练平台使用说明】

avatar 2048 AI社区
cover

AI内容工作台是什么？包含哪些功能？一文看懂企业级AI工作台架构

avatar 2048 AI社区
cover

实证论文破局关键：虎贲等考 AI 数据分析，零代码跑出期刊级结果

avatar 2048 AI社区