web样式大全

Web常用CSS样式大全

一、文字字体样式

1. color 文字颜色

2. font-size 字号

3. font-family 字体

4. font-weight 字体粗细 bold加粗

5. font-style 斜体 italic

6. text-align 水平对齐 left/center/right

7. line-height 行高（单行文字垂直居中）

8. text-decoration 下划线 none去掉下划线

9. text-indent 首行缩进

10. letter-spacing 字间距

二、背景样式

1. background-color 背景颜色

2. background-image 背景图片

3. background-repeat 重复 no-repeat不平铺

4. background-position 背景定位

5. background-size 背景尺寸

三、盒子宽高与间距

1. width 宽度

2. height 高度

3. padding 内边距

4. margin 外边距（margin:0 auto 块级居中）

四、边框样式

1. border 统一边框 粗细 线型 颜色

2. border-collapse: collapse 表格细线合并边框

3. border-radius 圆角

五、布局浮动相关

1. float 浮动 left/right

2. clear: both 清除浮动

3. overflow: hidden 溢出隐藏、清除浮动

六、弹性Flex样式（父容器）

1. display: flex 开启弹性

2. justify-content 水平对齐

3. align-items 垂直对齐

4. flex-wrap: wrap 自动换行
   弹性子元素：flex:1 平分宽度

七、文字溢出省略样式

1. white-space: nowrap 文字不换行

2. overflow: hidden 超出隐藏

3. text-overflow: ellipsis 显示省略号

4. -webkit-line-clamp 多行文字折叠

八、鼠标交互伪类样式

:hover 鼠标悬浮样式

九、显示隐藏样式

1. display: none 完全隐藏，不占位置

2. visibility: hidden 隐藏，保留原有空间

十、列表清除样式

list-style: none 去掉列表圆点