Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > Web 前端 - CSS - 常用的属性
Blogger Information
Blog 33
fans 0
comment 0
visits 27907
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Web 前端 - CSS - 常用的属性
郴
Original
1105 people have browsed it

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 水平和垂直居中
  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>div水平和垂直居中</title>
  7.     <style>
  8.       /*父元素display: table-cell + vertical-align: middle实现子块的垂直居中*/
  9.       .d1 {
  10.         width: 500px;
  11.         height: 700px;
  12.         background-color: lightblue;
  13.         display: table-cell;
  14.         vertical-align: middle;
  15.       }
  16.       /*子块display: margin: auto实现水平居中*/
  17.       .d2 {
  18.         width: 200px;
  19.         height: 400px;
  20.         background-color: lightpink;
  21.         margin: auto;
  22.       }
  23.     </style>
  24.   </head>
  25.   <body>
  26.     <div class="d1">
  27.       <div class="d2"></div>
  28.     </div>
  29.   </body>
  30. </html>

  • 文字水平和垂直居中
  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>文字水平和垂直居中</title>
  7.     <style>
  8.       /*height等于line-height实现垂直居中，text-align: center实现水平居中*/
  9.       div {
  10.         width: 200px;
  11.         height: 200px;
  12.         background-color: lightblue;
  13.         text-align: center;
  14.         line-height: 200px;
  15.       }
  16.     </style>
  17.   </head>
  18.   <body>
  19.     <div>
  20.       你好，世界
  21.     </div>
  22.   </body>
  23. </html>

八、课程总结

  • 今天学习了 CSS 中一些常用的属性，通过上课认真听讲和认真完成老师布置的作业，使得我对 CSS 的理解和运用更加深入和熟悉。最主要的知识点是明白了盒模型及浮动和定位的特点，以及了解并熟悉了常见属性如 font、position 等的用法。
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：这些都是基础, 简单且重要
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post