css文字样式及盒模型

一、文字样式

3.1 color

文字颜色：

属性值：三种色值表示法都可以使用

1 color: #B30000;  //十六进制表示法

2 color: rgb(255,0,0); //rgb()

3 color: red;      //单词表示法

3.2 font-style

设置文字是否倾斜

默认值：normal（正常）

倾斜： oblique(普通倾斜)

倾斜： italic(使用，将有倾斜字体的英文进行替换)

1 .ob {

2  font-style: oblique;

3 }

4 .it {

5  font-style: italic;

6 }

3.3 font-weight

设置文字是否加粗

默认值： normal(正常) 500

加粗： bold   700

属性值：100-900（没有单位）

1 .f700 {

2  font-weight: 700;

3 }

3.4 font-size

字号：单位是px

工作中读取设计师标注

现在需要自己手动测量。

粗略的测量：直接测量文字高度。

浏览器有最小字号，超过最小字号，默认显示最小字号。（chrome最小字号12px）

3.5 line-height

行高：一行文字实际占有的高度。

特点：文字在行高内垂直居中。

单位是px;

1 line-height: 200px;

单行文本垂直居中：盒子的高度和行高相同。

1 div.box1 {

2   300px;

3  height: 100px;

4  font-size: 30px;

5  line-height: 100px;

6 

7 }

百分数表示：%(表示和字号比值)

1 .box2 {

2   400px;

3  height: 100px;

4  border: 1px solid #000;

5  font-size: 20px;

6  /*line-height: 100px;*/

7  /*line-height是相对字号比值： 20 * 500% = 100px*/

8  line-height: 500%;

9 }

3.6 font-family

字体。

一般我们使用字体，使用计算机默认自带字体，特殊的字体，计算上没有，那么不能正常渲染。

英文字体： Arial

中文： Microsoft Yahei,备用字体SimSun;

1 /*字体 先书写英文字体，在书写中文字体*/

2 font-family: "Arial","Microsoft Yahei","SimSun";

font:是一个复合属性，可以书写复合写法。每一个属性用空格隔开。

属性值可以省略，表示默认值，至少要书写字号，字体。

1 font: 是否倾斜 是否加粗 字号/行高 字体; 

2 font: italic bold 30px/100px "Arial","Microsoft Yahei";

文本控制属性：

3.7 text-indent

设置文本首行缩进。

单位是em。2em表示首行缩进2汉字

1 text-indent: 2em;

单位：百分数（相对父盒子宽度的比值）

1 ext-indent: 20%;

单位： px

1 text-indent: 100px;

3.8 text-align

设置文本水平左右居中。

属性值：

默认值： left(靠左)

靠右（right）

居中（center）

1 text-align: center;

img:插入图片（文本）

text-align: center; 设置文本居中（单行，多行）

1 

3.9 text-decoration

文本是否设置下划线

默认值（除了a标签）：

没有下划线： none

下划线： underline

1 text-decoration: none;

2 text-decoration: underline;

二、盒模型

4.1 概述

 盒子内容宽度

height: 盒子内容高度

border: 边框

padding: 内边距

margin: 外边距

内容区域： 

内容宽 = width

内容高 = height

实际占有区域： 

实际占有宽度 = width + padding * 2 + border * 2

实际占有高度 = height + padding * 2 + border * 2

计算：

实际宽 = 500 + 50 * 2 + 10 * 2 = 620px

实际高 = 300 + 50 * 2 + 10 * 2 = 420px

一般经常给出的是盒子占有宽高，需要我们计算出盒子的内容宽和高。

盒子内容宽 width  = 盒子实际宽度 - Padding * 2 - border * 2

盒子内容高 height  = 盒子实际高度 - Padding * 2 - border * 2

盒子宽度是500px,盒子高度是 300px，内边距是50px，边框是20px，计算盒子内容宽和高度

width = 500 - 50 * 2 - 20 * 2 = 360px

height = 300- 50* 2 - 20 *2 = 160px

背景（背景色和背景图）渲染区域：边框以内（padding区域可以渲染背景）

1 background-image: url(images/star.gif);

4.2 padding

内边距： 内容到内边框之间的距离。

1 

padding:也是复合属性，可以按照方向进行拆分

padding-left

padding-right

padding-top

padding-bottom

可以书写复合写法：

四值法：上 右 下 左；

1 padding: 30px 40px 50px 60px;

三值法： 上 右（左） 下；

1 padding: 30px 50px 60px;

二值法： 上（下） 右（左）；

1 padding: 30px 50px;

单值法： 四个方向都相同;

1 padding: 30px;

一般在使用时我们习惯先书写单值法，特殊方向用单一属性层叠掉。

1 padding: 30px;

2 padding-left: 100px;

4.3 margin

外边距： 盒子之间的距离

用法和padding 一样

margin也是复合属性可以按照方向拆分

1 margin-left

2 margin-right

3 margin-top

4 margin-bottom

可以书写复合写法：

四值法： 上 右 下 左；（三值法，二值法，单值法）

1 margin: 20px 30px 40px 50px;css