css参数

常用的几个CSS参数及示例如下:

1. float

float用于指定元素向左或向右浮动,取值可以是left、right。

img {
  float: left; 
}

// 使图片向左浮动

2. position

position用于定义元素的定位方式,取值可以是static、relative、absolute、fixed。

div {
  position: absolute;
  top: 100px;
  left: 100px;
} 

// 绝对定位div元素

3. display

display用于定义元素的显示类型,取值如block、inline、flex等。

span {
  display: block;
}

// 将内联元素span转换为块元素

4. box-sizing

box-sizing用于定义元素的盒模型类型,取值可以是content-box、border-box。

div {
  box-sizing: border-box;
}

// 将元素设为怪异盒模型

5. flex

flex用于定义弹性布局,可以通过flex、flex-direction、flex-wrap等属性控制。

.container {
  display: flex;
  flex-direction: row;
}

// 定义一个横向的flex布局

6. width、height

用于设置元素的宽度和高度。

div {
  width: 100px;
  height: 200px; 
}

7. margin、padding

用于设置外边距和内边距。

p {
  margin: 20px; 
  padding: 10px;
}

8. border

用于设置边框样式。

table {
  border: 1px solid #ccc;
}

9. background

用于设置背景色、图片等。

body {
  background: #f2f2f2 url(bg.jpg);
}

10. font-size、font-family

用于设置文字大小和字体。

h1 {
  font-size: 32px;
  font-family: Arial;
}

11. text-align

用于设置文本对齐方式。

p {
  text-align: center; 
}

12. line-height

用于设置行高。

p {
  line-height: 1.5;
}

13. color

设置文本、背景等颜色。

p {
  color: #333;
}

14. list-style

设置列表的样式类型。

ul {
  list-style: none;
}  

15. cursor

设置鼠标移到元素上时的鼠标样式。

a {
  cursor: pointer;
}

16. transition

设置CSS属性变化时的过渡效果。

div {
  transition: width 2s; 
}

17. transform

用于元素进行旋转、缩放、倾斜、移动等转换。

img {
  transform: rotate(30deg);
}

18. box-shadow

设置元素的阴影效果。

div {
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

19. opacity

设置元素的透明度。

img {
  opacity: 0.5;
}

20. overflow

设置内容溢出元素时的显示方式。

div {
  overflow: hidden; 
}

HTML+CSS可以实现非常丰富的页面呈现效果,这些都是一些常用的CSS样式属性,可以灵活运用。