css行内元素转块级元素块级元素转行内元素_css中将内元素转为块元素-优快云博客

本文链接：https://blog.youkuaiyun.com/wujian_csdn_csdn/article/details/121101581

一个超链接打开一个页面，正常情况下只是在这个超链接上点击才可以打开目标页面，有时候优化需要在一个区域范围内（有宽度、高度）点击，都可以打开超链接，这个时候就需要将行内元素转化成块元素，使用到属性display : block 属性即可；如果是块级元素转行元素，则需要display:inline，配置后，发现高度和宽度都无效了；如果需要转行内块元素，则使用display:inline-block
举例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    a {
      width: 200px;
      height: 50px;
      background-color: red;
      display: block;
    }
    div {
      width: 200px;
      height: 100px;
      background-color: rosybrown;
      display: inline;
    }
  </style>
</head>

<body>

  <a href="https://wwww.baidu.com" target="_self" id="1">百度</a>
  <a href="https://wwww.baidu.com" target="_self" id="1">百度</a>

  <div>123</div>
  <div>456</div>
</body>

</html>