CSS元素显示模式

块元素

常见的块元素:<h1>~<6> <p> <div> <ul> <ol> <li>等

特点：
    独占一行
    高度、宽度、外边距以及内边距都可以控制
    宽度默认是容器（父级宽度）的100%
    是一个容器及盒子，里面可以放行内或块级元素
   
注意：
    文字类的元素不能使用块级元素
    <p> 以及 <h1>~<h6>

行内元素

<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span>
<span>是最典型的，行内也叫内联元素

特点：
    相邻行内元素在一行上，一行可以显示多个
    高、宽直接设置是无效的
    默认宽度就是它本身内容的宽度
    行内元素只能文本或其他行内元素
    
注意：
    链接里面不能放链接
    特殊情况下，a里面可以包含块级元素，但是给<a>转换一下块级模式最安全
    

行内块元素

<img/> <input/> <td>等

特点：
    一行可以放多个
    可以设置宽度和高度
    默认它本身内容的宽度和高度
    

显示模式的转换

转换为块元素
display: block

例如：
a {
    width: 300px;
    height: 200px;
    display: block;
}

转换成行内元素
display: inline

转换成行内块元素
display: inline-block

小工具：snipaste

常用的快捷方式
    F1可以截图，同时测量大小，设置箭头、书写文字等
    F3在桌面置顶显示
    点击图片,alt取色（shift可以切换取色模式）
    按下esc取消图片显示

单行文字垂直居中

解决方案：让文字的行高等于盒子的高度