字体属性 font

div{
  color: red;
  font-size: 12px;
  font-weight: bolder;
  font-style: italic;
  font-family: "Times New Roman","宋体";
}

字体大小 font-size

默认的字体大小为16px，最小的字体大小为12px

字体加粗 font-weight

属性值:

• normal 正常(默认值)
• bold 加粗
• bolder 更加粗

字体倾斜 font-style

属性值:

• normal 正常(默认值)
• italic 倾斜
• oblique 倾斜
  • oblique的幅度要大一点。但一般浏览器对它们的区分不明显

字体家族 font-family

/*中文字体或多个英文单词组成的字体加双引号*/
/*若是写了多种字体，则字体之间用逗号隔开*/
font-family:"lemon","Times New Roman","楷体","宋体";

字体颜色 color

属性值：

• 英文单词
• 十六进制
  • 一共六位字符，每一位字符取值都是0-9、a-f。
  • 光色模式：前两位表示红色，中间两位表示绿色，后两位表示蓝色
  • 表示同一个颜色的两位数都一样，可以都省略成一个（三位数）

文本属性 text

检索文本的大小写 text-transform

属性值：

• none 不转换(默认)
• capitalize 首字母大写
• uppercase 全部转成大写
• lowercase 全部转成小写

文本修饰 text-decoration

属性值：

• none 不要修饰(默认)
• underline 下划线
• overline 上划线
• line-through 删除线
• blink 闪烁

首行缩进 text-indent

常用单位：em(以当前字体大小为基准)

代码示例：codepen.io/lemonyyye/p…

字间距 letter-spacing

词间距 word-spacing(以空格作为标记)

代码示例：codepen.io/lemonyyye/p…

文本在容器中的水平对齐方式 text-align

一般都用于单行文本上 属性值:

• left 向左靠齐(默认)
• right 向右靠齐
• center 居中靠齐
• justify 自动调整(两端对齐，只对英文有效)

代码示例：codepen.io/lemonyyye/p…

文本在垂直方向上的对齐方式 vertical-align

针对于行内元素 属性值:

• baseline 基线(默认)
• middle 中线
• top 顶线
• bottom 底线

代码示例：codepen.io/lemonyyye/p…

行高 line-height

行高 = 字体大小 + 文字的上下间距

• 文字的上间距=下间距
• 文字一定在行高中垂直居中

容器溢出 overflow

代码示例：codepen.io/lemonyyye/p…

属性值：

• visible可见
• hidden隐藏
• scroll始终出现滚动条
• auto判断需要滚动条才出现滚动条 overflow-x控制水平方向

overflow-y垂直方向

当只设置了某个方向的overflow不为visible，另外一个方向会自动为auto

列表属性 list

1. 列表样式类型list-style-type

属性值：

• disc实心圆(默认)
• circle空心圆
• square正方形
• none没有

2. 列表样式图片list-style-image

list-style-image:url("../images/arror.jpg");

3. 列表样式位置list-style-position

属性值:

• outside 在列表外面(默认)
• inside 在列表里面

总属性list-style:1||2 3；

边框 border

1. 边框宽度border-width

2. 边框样式border-style

属性值:

• solid实线
• dashed虚线
• dotted点线
• double双线

3. 边框颜色border-color

总属性border:1 2 3;

border:10px solid #ccc;

• border-方位: 1 2 3;
  • 方位：top上边 bottom下边 left左边 right右边 border-right: 10px solid #ccc;
• border-方位-分属性 border-left-style: solid ;

行高 line-height

行高 = 字体大小 + 文字的上下间距

• 文字的上间距=下间距
• 文字一定在行高中垂直居中

背景属性 background

背景颜色 background-color

背景图片 background-image

background-image: url(""); 若是容器尺寸大于背景图片尺寸，则背景图片会默认平铺满

若是容器尺寸小于背景图片尺寸，则背景图片会部分丢失

若是容器尺寸等于背景图片尺寸，则刚好放下

背景图片的平铺 background-repeat

属性值：

• repeat 默认平铺
• no-repeat 不平铺
• repeat-x 水平平铺
• repeat-y 垂直平铺

背景图片在容器中的定位background-position

background-position: 水平方向 垂直方向; 属性值：

• 数字、
• 方位(left、right、center、top、bottom、center)

背景图片的固定 background-attachment

注意：记得用在有滚动条的地方 属性值：

• scroll滚动(默认)
• fixed固定

浮动 float

属性值:

• none 不浮动
• left 左浮动
• right 右浮动

特点：

1. 浮动后的元素会脱离标准流(不会脱离文本流)
2. 浮动后的元素相当于行内块级元素（一行显示多个、可以设置宽高）
3. 若是一行放不下所有的浮动元素，则会换行显示。换行的元素会根据其上一个元素的最低点进行摆放。

案例：文本环绕图片