标签：tab 宽度 weight sim ott man 划线 12px 居中
文字颜色：
属性值：三种色值表示法都可以使用
|
1 color: #B30000; //十六进制表示法 2 color: rgb(255,0,0); //rgb() 3 color: red; //单词表示法 |
设置文字是否倾斜
默认值：normal（正常）
倾斜： oblique(普通倾斜)
倾斜： italic(使用，将有倾斜字体的英文进行替换)
|
1 .ob { 2 font-style: oblique; 3 } 4 .it { 5 font-style: italic; 6 } |
设置文字是否加粗
默认值： normal(正常) 500
加粗： bold 700
属性值：100-900（没有单位）
|
1 .f700 { 2 font-weight: 700; 3 } |
字号：单位是px
工作中读取设计师标注
现在需要自己手动测量。
粗略的测量：直接测量文字高度。
浏览器有最小字号，超过最小字号，默认显示最小字号。（chrome最小字号12px）
行高：一行文字实际占有的高度。
特点：文字在行高内垂直居中。
单位是px;
|
1 line-height: 200px; |
单行文本垂直居中：盒子的高度和行高相同。
|
1 div.box1 { 2 width: 300px; 3 height: 100px; 4 font-size: 30px; 5 line-height: 100px; 6 7 } |
百分数表示：%(表示和字号比值)
|
1 .box2 { 2 width: 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 } |
字体。
一般我们使用字体，使用计算机默认自带字体，特殊的字体，计算上没有，那么不能正常渲染。
英文字体： Arial
中文： Microsoft Yahei,备用字体SimSun;
|
1 /*字体 先书写英文字体，在书写中文字体*/ 2 font-family: "Arial","Microsoft Yahei","SimSun"; |
font:是一个复合属性，可以书写复合写法。每一个属性用空格隔开。
属性值可以省略，表示默认值，至少要书写字号，字体。
|
1 font: 是否倾斜 是否加粗 字号/行高 字体; 2 font: italic bold 30px/100px "Arial","Microsoft Yahei"; |
文本控制属性：
设置文本首行缩进。
单位是em。2em表示首行缩进2汉字
|
1 text-indent: 2em; |
单位：百分数（相对父盒子宽度的比值）
|
1 ext-indent: 20%; |
单位： px
|
1 text-indent: 100px; |
设置文本水平左右居中。
属性值：
默认值： left(靠左)
靠右（right）
居中（center）
|
1 text-align: center; |
img:插入图片（文本）
text-align: center; 设置文本居中（单行，多行）
|
1 |
文本是否设置下划线
默认值（除了a标签）：
没有下划线： none
下划线： underline
|
1 text-decoration: none; 2 text-decoration: underline; |
width: 盒子内容宽度
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); |
内边距： 内容到内边框之间的距离。
|
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; |
外边距： 盒子之间的距离
用法和padding 一样
margin也是复合属性可以按照方向拆分
|
1 margin-left 2 margin-right 3 margin-top 4 margin-bottom |
可以书写复合写法：
四值法： 上 右 下 左；（三值法，二值法，单值法）
|
1 margin: 20px 30px 40px 50px;css |
标签：tab 宽度 weight sim ott man 划线 12px 居中
原文地址：https://www.cnblogs.com/feiyang-dabao/p/9517495.html
