琐碎知识点6

行高（line height）

1.行高指的是文字占有的实际高度。

　　-可以通过line-height来设置行高。

　　-行高可以直接指定一个大小（px em）。

　　-也可以直接为行高设置一个整数。

　　　　-如果是一个整数的话，行高将会是字体的指定的倍数。

　　　　-行高经常还用来设置文字的行间距。

　　　　　　-行间距 = 行高 - 字体大小

 

 

字体框

1.字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度。

2.行高会在字体框的上下平均分配。

　　-利用这一点，可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中。

 

 

字体的简写属性

 

1.font 可以设置字体相关的所有属性。

　　-语法：

　　　　-font: 字体大小/行高 字体族

　　　　-行高 可以省略不写 如果不写使用默认值

div {
    font: 50px/2 微软雅黑,'Times New Roman',Times,serif;
    font: normal normal 50px/2 微软雅黑,'Times New Roman',Times, serif;
    font: bold italic 50px/2 微软雅黑,'Times New Roman',Times,serif;
}

2.font-weight (字重 字体的加粗) 

　　-可选值：

　　　　-normal 默认值 不加粗

　　　　-bold 加粗

　　　　-100-900 九个级别（没什么用）

3.font-style (字体的风格)

　　-可选值：

　　　　-normal 正常的

　　　　-italic 斜体

 

 

文本的样式

1.text-align 文本的水平对齐

　　-可选值：

　　　　-left 左侧对齐

　　　　-right 右对齐

　　　　-center 居中对齐

　　　　-justify 两端对齐

2.vertical-align 设置元素垂直对齐的方式

　　-可选值：

　　　　-baseline 默认值 基线对齐

　　　　-top 顶部对齐

　　　　-bottom 底部对齐

　　　　-middle 居中对齐

 

 

背景

 

1.background-color 设置背景颜色。

2.background-image 设置背景图片。

3.可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色。

4.背景图片与元素之间的大小关系：

　　-如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满。

　　-如果背景的图片大于元素，将会一个部分背景无法完全显示。

　　-如果背景图片和元素一样大，则会直接正常显示。

5.background-repeat 用来设置背景的重复方式。

　　-可选值：

　　　　-repeat 默认值 ， 背景会沿着x轴 y轴双方向重复

　　　　-repeat-x 沿着x轴方向重复

　　　　-repeat-y 沿着y轴方向重复

　　　　-no-repeat 背景图片不重复

6.background-position 用来设置背景图片的位置。

　　-设置方式：

　　　　-通过 top left right bottom center 几个表示方位的词来设置背景图片的位置使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center。

background-position: center center；

　　-通过偏移量来指定背景图片的位置：

　　　　-水平方向的偏移量 垂直方向变量。

 

background-position: 100px -100px;　

7.background-clip 设置背景的范围。

　　-可选值：

　　　　-border-box 默认值，背景会出现在边框的下边。

　　　　-padding-box 背景不会出现在边框，只出现在内容区和内边距。

　　　　-content-box 背景只会出现在内容区。

8.background-origin 背景图片的偏移量计算的原点。

　　-可选值：　　
　　　　-padding-box 默认值，background-position从内边距处开始计算。

　　　　-content-box 背景图片的偏移量从内容区处计算。

　　　　-border-box 背景图片的变量从边框处开始计算。

9.background-size 设置背景图片的大小。

　　-第一个值表示宽度

　　-第二个值表示高度

　　-如果只写一个，则第二个值默认是 auto

　　-cover 图片的比例不变，将元素铺满

　　-contain 图片比例不变，将图片在元素中完整显示

10.background-attachment 背景图片是否跟随元素移动。

　　-可选值：

　　　　-scroll 默认值 背景图片会跟随元素移动。

　　　　-fixed 背景会固定在页面中，不会随元素移动。

11.backgound 背景相关的简写属性。

　　-所有背景相关的样式都可以通过该样式来设置，并且该样式没有顺序要求，也没有哪个属性是必须写的。

　　-注意：

　　　　-background-size必须写在background-position的后边，并且使用/隔开。

　　　　-background-position/background-size。

　　　　-background-origin background-clip 两个样式 ，orgin要在clip的前边。

 

学识浅薄，如有错误，恳请斧正，在下不胜感激。

标签：知识点,background,可选值,设置,对齐,font,琐碎,背景图片
来源： https://www.cnblogs.com/yin-jie/p/13764623.html