微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > Web 前端 - CSS - 常用的属性

博主信息

博文 33

粉丝 0

访问量 35134

专题推荐

更多>

Web 前端 - CSS - 常用的属性

[toc]

一、定位属性

1. 属性

序号	属性	描述
1	`display`	指定元素怎样生成盒模型
2	`float`	控制元素是否浮动
3	`position`	规定元素的定位方式
4	`overflow`	规定内容溢出框时发生的事情
5	`vertical-align`	设置元素的垂直对齐方式

2. 值

序号	属性	描述	适用属性
1	`none`	元素隐藏	`display`
2	`inline`	内联元素	`display`
3	`block`	块级元素	`display`
4	`inline-block`	内联块元素	`display`
5	`table`	块级表格	`display`
6	`flex`	弹性伸缩盒	`display`
7	`left`	向左浮动	`float`
8	`right`	向右浮动	`float`
9	`relative`	相对定位	`position`
10	`absolute`	绝对定位	`position`
11	`fixed`	固定定位	`position`
12	`hidden`	内容会被裁减	`overflow`
13	`middle`	父元素的中间位置	`vertical-align`

盒模型

序号	项	描述
1	解释	html 文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒模型
2	组成	（由内到外）：content（内容）、padding（内边距）、border（边框）、margin（外边距）

绝对定位、相对定位和固定定位的区别

序号	类型	描述
1	绝对定位	相对于上一个已定位的父级元素的位置进行定位，会脱离文档流
2	相对定位	相对于它在正常文档流的位置进行定位，不会脱离文档流
3	固定定位	相对于浏览器窗口进行定位

二、外边距和内边距属性

序号	属性	描述
1	`margin`	复合属性。设置外边距的距离，顺序为上右下左
2	`padding`	复合属性。设置内边距的距离，顺序为上右下左

三、边框属性

1. 属性

序号	属性	描述
1	`boder`	复合属性。设置边框属性。分别为 width、style、color 的值
2	`boder-width`	设置边框的宽度
3	`boder-style`	设置边框的样式
4	`boder-color`	设置边框的颜色
5	`boder-radius`	设置圆角边框
6	`box-shadow`	向边框添加阴影

2. 值

序号	属性	描述	适用属性
1	`thin`	细边框	`boder-width`
2	`medium`	中等边框	`boder-width`
3	`thick`	粗边框	`boder-width`
4	`solid`	实线	`boder-style`
5	`dashed`	虚线	`boder-style`
6	`h-shadow`	水平阴影的位置	`box-shadow`
7	`v-shadow`	垂直阴影的位置	`box-shadow`
8	`spread`	阴影的大小	`box-shadow`
9	`color`	阴影的颜色	`box-shadow`

四、背景属性

1. 属性

序号	属性	描述
1	`background`	复合属性。设置背景属性。分别为 color、image、position、size、repeat、attachment 的值
2	`background-color`	设置背景的颜色
3	`background-image`	设置背景图像
4	`background-position`	设置背景图像的位置
5	`background-size`	设置背景图像的大小
6	`background-repeat`	设置背景图像的铺排填充方式
7	`background-attachment`	设置背景图像是随着内容滚动还是固定

2. 值

序号	属性	描述	适用属性
1	`center`	图像居中	`background-position`
2	`no-repeat`	不会重复	`background-repeat`
3	`fixed`	图片不会随页面滚动而滚动	`background-attachment`

五、文本属性

1. 属性

序号	属性	描述
1	`text-align`	设置水平对齐方式
2	`line-height`	设置行高

2. 值

序号	属性	描述	适用属性
1	`center`	居中	`text-align`

六、字体属性

1. 属性

序号	属性	描述
1	`font`	复合属性。设置字体属性。分别为 style、weight、size、family 的值
2	`font-style`	设置字体的样式
3	`font-weight`	设置字体的粗细
4	`font-size`	设置字体的大小
5	`font-family`	设置字体族
6	`@font-face`	复合属性。设置自定义字体族。分别为 `font-family`、`src` 的值

2. 值

序号	属性	描述	适用属性
1	`italic`	斜体	`font-style`
2	`lighter`	细的	`font-weight`
3	`bold`	粗体	`font-weight`
4	`bolder`	更粗的	`font-weight`

五种通用字体族

序号	属性	描述	示例
1	`serif`	衬线字体	`Times`,`New Century`,`Ceorgia`
2	`sans-serif`	无衬线字体	`Helvetica`,`Geneva`,`Verdana`,`Arial`
3	`monospace`	等宽字体	`Menlo`, `Monaco`, `'Courier New'`,`Consolas`
4	`cursive`	草书字体	`Helvetica`,`Geneva`,`Verdana`,`Arial`
5	`fantasy`	艺术字体	`Author`,`Comic Sans`,`Zapf Chancery`

常用字体文件格式

序号	格式	全称	描述
1	EOT	Embedded OpenType	IE 专用字体
2	OTF	OpenType	非 IE 通用字体
3	SVG	Scalable Vector Graphics	基于 SVG 方式渲染
4	TTF	TrueType	通用原始字体
5	WOFF	Web Open Font Format	Web 通用字体

七、小技巧

div 水平和垂直居中

<!DOCTYPE html>
<html lang="zh_hans">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>div水平和垂直居中</title>
    <style>
      /*父元素display: table-cell + vertical-align: middle实现子块的垂直居中*/
      .d1 {
        width: 500px;
        height: 700px;
        background-color: lightblue;
        display: table-cell;
        vertical-align: middle;
      }
      /*子块display: margin: auto实现水平居中*/
      .d2 {
        width: 200px;
        height: 400px;
        background-color: lightpink;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="d1">
      <div class="d2"></div>
    </div>
  </body>
</html>

文字水平和垂直居中

<!DOCTYPE html>
<html lang="zh_hans">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文字水平和垂直居中</title>
    <style>
      /*height等于line-height实现垂直居中，text-align: center实现水平居中*/
      div {
        width: 200px;
        height: 200px;
        background-color: lightblue;
        text-align: center;
        line-height: 200px;
      }
    </style>
  </head>
  <body>
    <div>
      你好，世界
    </div>
  </body>
</html>