flex 、 table 、 float 、position 页面布局

最新推荐文章于 2022-10-30 14:37:00 发布

龙龙老表

最新推荐文章于 2022-10-30 14:37:00 发布

阅读量530

点赞数 1

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/qq_32466937/article/details/106171824

版权

表格布局

这是一种比较老的布局方式，就是采用表格进行网页布局，这种布局方式在一些小型网站中用起来比较方便，如果是大型网站，仅仅采用表格布局肯定有点力不从心。你也可以在网站的某一个部分采用表格布局。

<html>
  <head>
    <title>
      表格布局
    </title>
    <style>
      table {
    
        width: 800px;
      }
      td {
    
        height: 100px;
        border: 1px solid rgba(0, 0, 0, 0.2);
      }
    </style>
  </head>
  <body>
    <table cellspacing="0">
      <tr>
        <td rowspan="2"></td>
        <td></td>
        <td rowspan="3"></td>
      </tr>
      <tr>
        <td></td>
      </tr>
      <tr>
        <td colspan="2"></td>
      </tr>
      <tr>
        <td colspan="3"></td>
      </tr>
    </table>
  </body>
</html>

当然也可以用 div 模拟表格

<html>
  <head>
    <title>
      表格布局
    </title>
    <style>
      .table {
    
        display: table; /*让元素看起来像是一个 table*/
        width: 800px;
      }
      .table-row {
    
        display: table-row; /*让元素看起来像是一个 tr*/
      }
      .table-cell {
    
        display: table-cell; /*让元素看起来像是一个 td*/
        height: 100px;
        border: 1px solid rgba(0, 0, 0, 0.2);
      }
    </style>
  </head>
  <body>
    <div class="table">
      <div class="table-row">
        <div class="table-cell"></div>
        <div class="table-cell"></div>
        <div class="table-cell"></div>
      </div>
      <div class="table-row">
        <div class="table-cell"></div>
        <div class="table-cell"></div>
        <div class="table-cell"></div>
      </div>
    </div>
  </body>
</html>

布局属性

先解释几种元素特性：

行内元素：行内元素的宽高仅仅由其内容决定，自定义宽高无效，一般情况下，行内元素只能包含数据和其他行内元素

块级元素：一般而言块级元素会独占一行区域，可以自定义宽高，可以包含行内元素和其他块级元素
行内块元素：这种元素对外看起来像是一个行内元素，对内看起来像是一个块级元素，一般而言这种元素会根据内容撑起宽高，但是我们也可以自己指定宽高。

<html>
  <head>
    <title>
      布局属性
    </title>

最低0.47元/天解锁文章

龙龙老表

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex 、 table 、 float 、position 页面布局

表格布局这是一种比较老的布局方式，就是采用表格进行网页布局，这种布局方式在一些小型网站中用起来比较方便，如果是大型网站，仅仅采用表格布局肯定有点力不从心。你也可以在网站的某一个部分采用表格布局。<html> <head> <title> 表格布局 </title> <style> table { width: 800px; } td {
复制链接

扫一扫