块级元素
-
块级元素（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这个倍数，然后用自己的字体大小来计算。 - 当然如果子元素自己设置了行高，那么就直接覆盖了。
- 1.如果行高带单位（%等价于em）,那么它的子元素直接继承它的行高值。
网友评论