加入收藏 | 设为首页 | 会员中心 | 我要投稿 汽车网 (https://www.0577qiche.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 教程 > 正文

外边距实现单列布局

发布时间:2023-03-29 08:47:36 所属栏目:教程 来源:
导读:单列布局可以有很多种的方式去实现它,我们将运用最简单的 CSS 技术,然后由浅入深,最简单的 CSS 技术就代表了最优越的兼容性,无论多么老旧的浏览器,几乎都没有不认识外边距这个语法的。

这种方法不仅兼容性也
单列布局可以有很多种的方式去实现它,我们将运用最简单的 CSS 技术,然后由浅入深,最简单的 CSS 技术就代表了最优越的兼容性,无论多么老旧的浏览器,几乎都没有不认识外边距这个语法的。

这种方法不仅兼容性也非常的优异,同时也是最简单最好用的:

<!DOCTYPE html>
<html lang="en">
<head>
  <Meta charset="UTF-8">
  <Meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 清除默认样式 */
    * { padding: ; margin: ; }
    /* 令html和body全屏显示, 并有一个灰色背景 */
    html, body { height: ; background: gray; }
    .center {
      /* 给个宽高方便查看 */
      width: ;
      height: ;
      /* 外边距上下为0、左右为自动 */
      margin:  auto;
      /* 白色背景 */
      background: white;
    }
  </style>
</head>
<body>
  <div class="center"></div>
</body>
</html>

这样的一个最简单的单列布局就形成啦!



 

(编辑:汽车网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章