1.切图仔背过的css八股文

1.讲一讲文本和字体的样式

1.1 text-decoration

• text-decoration用于设置文字的装饰线，（decoration装饰）（不是继承属性）

• text-decoration有以下常见的取值

  • none:无任何装饰线（可以去掉a元素默认的下划线）

  • underline：下划线

  • overline：上划线

  • line-through：中划线

• text-decoration属性是一种简写的属性，并且可以使用普通属性三个值的任何一个：

  • text-decoration-line:文本修饰的属性，如下划线underline，删除线line-through；

  • text-decoration-color：文本修饰的颜色

  • text-decoration-style：文本修饰的样式，波浪线wavy、实线solid、虚线dashed

  • text-decoration-thickness：文本修饰先的粗细{px}

• a元素有下划线的本质是被添加了text-decoration:underline属性

1.2 text-transform（了解）

• text-transform 用于设置文字的大小写转换，是继承属性。

• text-transform`有几个常见的值:

  • capitalize：(使…首字母大写, 资本化的意思)将每个单词的首字符变为大写

  • uppercase：(大写字母)将每个单词的所有字符变为大写

  • lowercase：(小写字母)将每个单词的所有字符变为小写

  • none：没有任何影响

• 实际开发中用JavaScript代码转化的更多

1.3 text-indent

• text-indent属性能定义一个块元素首行文本内容之前的缩进量 (是继承属性

1.4text-align（重要）

• text-align`: 直接翻译过来设置文本的水平对齐方式 (是继承属性)(是继承属性)

• text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐

• MDN解释: 定义行内内容（例如文字）如何相对它的块父元素对齐(可以设置图片居中)

• W3C官方文档解释: 设置行内(inline-level)元素(没有填满父元素)在快级父元素的对齐方式

• text-align`常用的值:

  • left：左对齐

  • right：右对齐

  • center：正中间显示

  • justify：对最后一行无效(如果文字只有一行也无效)

• 直接设置对块级元素(例如<div>)无效 可以更改<div>的display为inline-block

  • 例如：

      .box {
      /* 直接设置对快级元素无效*/
        text-align: center;
      }
      div {
        /* 设置为行内元素 */
        display: inline-block;
      }

• 备注:居中一个块元素且不居中它的行内内容的标准兼容的方法是将它的左、右margin设为auto, 例如：margin:auto; 或margin:0 auto; 或margin-left:auto; margin-right:auto;

1.5. letter-word-spacing

• letter-spacing、word-spacing分别用于设置字母、单词之间的间距

• 默认是0，可以设置为负数

 p {
    letter-spacing: 5px;
    word-spacing: 10px;
 }

1.6. font-size

• font-size决定文字的大小(是继承属性)

• 属性值:

  • <length>:

    • 长度值 px(像素) 用像素字体定义使得字体大小不可由用户的浏览器改变font-size: 30px

    • em:em = 希望得到的像素大小 / 父元素字体像素大小 font-size: 1.5em

      • 结果 = em x 父元素字体像素的大小

    • 技巧:设置body元素的字体大小为62.5% (即默认大小16px的62.5%)，等于10px。现在你可以通过计算基准大小10px的倍数，在任何元素上方便的使用em单位。这样有6px = 0.6em, 8px = 0.8em, 12px = 1.2em等

    body {
        font-size: 62.5%;
    } 
    p {
        font: size 1.8em;(相当于18px)
    }

1.7 font-family

• font-family`用于设置文字的字体名称 一般仅设置一次(是继承属性)

• 可以设置1个或者多个字体名称

• 浏览器会选择列表中第一个该计算机上有安装的字体

• 或者是通过 @font-face 指定的可以直接下载的字体

• 备注:一般建一个base.css文件确定整个网页的字体

/* 直接设置body的样式 */
body {
  font-family: "Gill Sans", sans-serif;
  /* 京东设置的字体 */
  /* font-family: "Microsoft YaHei", "Heiti SC", tahoma, arial, "Hiragino Sans GB", "\5B8B\4F53", sans-serif; */
}

1.8 font-weight

• font-weight`用于设置文字的粗细(重量) (是继承属性)

• 属性值：

  • normal：正常粗细，与400等值

  • bold：加粗，大概是700

1.9 font-style

• font-style`用于设置文字的常规、斜体显示 (是继承属性)

• 属性值:

  • normal:常规显示

  • italic(斜体):用字体的斜体显示(通常会有专门的字体)

  • oblique(倾斜):文本倾斜显示(仅仅是让文字倾斜)

1.10 font-varient

• font-variant`可以影响小写字母的显示形式

• 属性值:

  • normal:常规显示

  • small-caps:将小写字母替换为缩小过的大写字母

• 例子: font-variant: small-caps

1.11 line-height

• line-height:两行文字基线(baseline)之间的间距 基线(baseline`):与小写字母x最底部对齐的线

• 行距 = 行高 - 文本高度

• 

属性值:

• normal:取决于用户端。桌面浏览器（包括Firefox）使用默认值，约为1.2，这取决于元素的 font-family

• <数字>:该属性的应用值是这个无单位数字<数字>乘以该元素的字体大小这是设置line-height的推荐方法，不会在继承时产生不确定的结果

• <长度>:指定<长度>用于计算 line box 的高度 以 em 为单位的值可能会产生不确定的结果

• <百分比>:与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。百分比值可能会带来不确定的结果

• height:元素的整体高度line-height`:元素中每一行文字所占据的高度

• 假设div中只有一行文字，如何让这行文字在div内部垂直居中 让line-height等同于height

1.12 font缩写属性

2.说一说text-align居中的条件

• text-align`: 直接翻译过来设置文本的水平对齐方式 (是继承属性)(是继承属性)

• text-align` 并不控制块元素自己的对齐，只控制它的行内内容的对齐

• MDN解释: 定义行内内容（例如文字）如何相对它的块父元素对齐(可以设置图片居中)

3.说一说line-height为什么可以让文字居中

• line-height：两行基线（basceline)之间的间距，基线（baseline）与小写字母x最底部对齐的线

4.说一说伪类和伪元素

• 伪类的话有动态伪类（:hover :link等等），目标伪类（:target），语言伪类（：lang）等等

• 伪元素有

  • ::first-line

  • ::first-letter

  • ::before

  • ::after

• 为了区分伪类和伪元素，伪类采用: 伪元素采用::

• 其中first-line是对首行文本设置属性

• first-letter是对首字母设置属性

• before和after用来在一个元素的内容之前或之后插入其他内容（可以是图片or文字 但是必须添加content）

• .box::before{
    content:""
    这个是必须要有的，如果没有需要添加的，如上输出即可
  }