[前端学习]css部分学习笔记，第三天

块级元素

• 块级元素（block-level）常见的有<div>,<p>,<ul><ol>,<h>等等。
• 它最明显的特点就是：每个块级元素会单独占一行，可以设置宽度、高度、对齐方式等。默认宽度是父级元素宽度。可以容纳任何类型元素。
• 注意：<p>,<h>,<dt>等文本类块级元素内不能放块级元素，否则会出错。

行内元素

-行内元素（inline-level），也叫内联元素，常见的有<span>,<a>,<em>,<strong>,<ins>等等。

• 它最明显的特点就是：和相邻行内元素同在一行显示。不能设置宽度高度，默认宽度是由内容来撑开。
• 行内元素内只能容纳行内元素。a标签除外。

行内块元素

• 行内块元素（inline-block），常见的有<img>,<input>,<td>等等。
• 他结合了行内元素和块级元素的特点，本身与其他行内元素同在一行显示，默认宽度是内容的宽度，但是它又能设置宽度和高度。

元素模式转换

• 在实际工作中，几个类型的元素都会进行转换。例如a标签，可能就会转换为块级元素或者行内块元素。
• 转换为块级元素：display:block
• 转换为行内元素：display:inline
• 转换为行内块元素：display:inline-block

text-decoration

• text-decoration用来设置字体修饰样式：
  • none:没有任何样式(默认值)
  • underline:下划线
  • blink:闪烁
  • overline:上划线
  • line-through：贯穿线，类似于删除线的样式。

链接伪类

• 伪类实际上是一些css新加入的功能，为了便于区分，所以取名叫伪类。
• 常用的链接伪类如下：
  • :link 代表未被点击过的链接状态
  • :visited 代表被点击过的链接状态
  • :hover 代表鼠标悬停在链接时的状态
  • :active 代表鼠标按下且不松开时的状态
  • :focus 当光标焦点定位到时的状态(IE8以上才支持，常用于文本输入框)
  • 如果要写全这四个伪类，那么一定要按照l>v>h>a的顺序来书写，否则会出错。但是实际工作中，:hover以及:visited用得要多一点。
• 注意：这里只说的链接伪类，实际上其他标签也能应用这些伪类，但是只有IE8及其以上的版本才支持这些功能。

伪元素

• 伪元素与伪类使用方法相同，但是意义上是有区别的。
• 几个伪元素介绍：
  • ::first-letter 应用到文本的第一个字符
  • ::first-line 应用到文本的第一行（有自适应效果）
  • ::before 在元素前添加内容
  • ::after 在元素后添加内容
  • 在css2中写法是单冒号:，在css3中是双冒号::。可以应用于任何标签。

css中如何获取到有序列表中的第三行

• ol>li:first+li+li这样就能获取到有序列表中的第三项

如何用测量工具来查出行高

• w3c的解释为：行号是基线到基线之间的距离。什么是基线可以搜索了解，那么直接用测量工具把图片中两行的基线和基线之间距离量出来，就是行高了。当然不用切图的话也可以直接在调试工具里查看行高是多少。

用行高实现在盒子里垂直居中（较难理解）

• 首先要明白一个原理，行高是由什么组成的？行高=字体大小+上边距+下边距来组成。然后，上边距和下边距是绝对相等的。就是说行高为100，字体为40，那么剩余的60就平均分配给上边距和下边距，同等于30。
  在一行里上下完全相等，那么文字本身就是处于一个垂直居中的状态，如果不理解可以自己画图尝试下。
• 所以怎么在盒子里垂直居中就好理解了，因为文字在行高里是垂直居中的，那么把行高设置与盒子高度一样，不就是说明字体在盒子里是垂直居中的吗？
• 所以结论就是，行高等于盒子的高度，那么中间的元素就能垂直居中。

行高的单位

• 行高单位有三种书写方式，%或者em或者不写。三种写法对它的效果都是一样的，但是如果该元素为父元素，那三种写法对子元素就有不同的影响了。
  • 1.如果行高带单位（%等价于em）,那么它的子元素直接继承它的行高值。
    例如：本身字体大小为30，行高为150%，那么它的行高为45，子元素也为45；
  • 2.如果不带行高单位，那么子元素继承它的行高比，然后根据自己的字体大小来计算。
    比如：本身字体大小为30，行高为1.5。子元素只会继承1.5这个倍数，然后用自己的字体大小来计算。
  • 当然如果子元素自己设置了行高，那么就直接覆盖了。