CSS元素的显示模式

元素的显示模式

• 块元素
• 行内元素
• 行内块元素

元素显示模式的转换

如：将行内元素<a>转化为块级元素：display：block；

a{
  width: 150px;
  height: 50px;
  background-color: pink;
  display: block;//核心语句
}

将块级元素<div>转化为行内元素：display：inline；

div{
   /*width: 150px;*/
   /*height: 300px;*/
   background-color: pink;//为了方便查看宽高变化
   display: inline;//核心元素
}

将行内元素<span>转化为行内块元素：display：inline-block

span{
  width:100px;
  height: 30px;
  background-color: pink;
  display: inline-block;
}

快捷小工具：snipaste软件，快速截图钉在桌面并且保持置顶、快速取色得到十六进制颜色代码等

 单行文字垂直居中的代码

CSS没有提供文字垂直居中的代码，解决方案：让文字的行高等于盒子的高度

<style>
        div{
            width: 200px;
            
            /* 盒子的高度 */
            height: 40px;
            background-color: pink;

            /* 文字的行高 */
            line-height: 40px;
        }
    </style>