【CSS学习】CSS中常用样式大全

文本样式

• Font-Family：定义字体，如“Times New Roman”

• Font-Size：字体大小，如“18px”

• Color：字体颜色，如“#666”

• Text-Align：文本的水平对齐方式，如“left”、“right”、“center”、“justify”

• Line-Height：文本行高，如“52px”

• Letter-Spacing：文本字间距，如“0.5px”、“0.5em”

边框和背景

• Border：定义边框元素，边框颜色（Border-color），边框左缩进（Border-left）

• Background：设置背景元素，如背景颜色：Background-Color

• Background-Color：背景颜色

• Opacity：调整页面元素透明度，0：完全透明，1：完全不透明

• Outline：制定页面元素轮廓

定位

• Position：改变元素相对正常流动定位所处位置“static”：静态定位、“fixed”：固定定位、“relative”：相对定位，当做绝对定位元素的参照，跟随绝对定位改变。在relative后设置：top：距离本来位置上方偏移距离

• Z-Index：布局出现顺序，数字越大，置于越前面

• Top：上方偏移量

• Bottom：指定元素在文档中的垂直位置 20px：移动到文档的20px下方

• Left：左方偏移量

• Right：右方偏移量

尺寸

• Width：宽度，可设置px等尺寸，也可设置百分比：100%

• Height：高度，与Width同理

• Min-Width：指定元素最小宽度，如果屏幕显示小于指定值，根据适应调整

• Max-Width：指定元素最大宽度，如果屏幕显示大于指定值，根据适应调整

• Min-Height：指定元素最小高度，如果屏幕显示小于指定值，根据适应调整

• Max-Height：指定元素最大高度，如果屏幕显示大于指定值，根据适应调整

其他

• Margin：（调整外部）简单解释：元素四周的间距 0 0 0 0分别对应上、右、下、左边缘距

• Padding：（调整内部）调整元素内部间距，与Margin用法类似

• Float：文本浮动元素 left左浮动，right右浮动，可当作左右对齐

• Clear：允许内部元素浮动或定位，none：正常渲染，不能被浮动元素或定位元素影响。left：左边不能被浮动元素覆盖，right：右边不能被浮动元素覆盖。（用来布局某些复杂元素）