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

块级元素

• 块级元素（block-level）常见的有
  ,

  ,

  ,等等。
  1. 它最明显的特点就是：每个块级元素会单独占一行，可以设置宽度、高度、对齐方式等。默认宽度是父级元素宽度。可以容纳任何类型元素。
  2. 注意：

     ,,

     等文本类块级元素内不能放块级元素，否则会出错。

  行内元素

  -行内元素（inline-level），也叫内联元素，常见的有,,,,等等。

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

  行内块元素

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

  元素模式转换

  • 在实际工作中，几个类型的元素都会进行转换。例如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这个倍数，然后用自己的字体大小来计算。
    • 当然如果子元素自己设置了行高，那么就直接覆盖了。