qq_18230327 2021-06-17 10:38 采纳率: 100%
浏览 47
已采纳

盒子嵌套模型求大神指点

求具体代码，我试了好多次，不是这有问题就是那有问题

  • 写回答

2条回答 默认 最新

  • CSDN专家-文盲老顾 2021-06-17 10:49
    关注
    <!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  body > * {width:800px;margin:0 auto;}
  nav > * {width:120px;height:32px;background:#cdf;color:black;display:block;text-align:center;line-height:32px;}
  </style>
 </head>
 <body>
  <header style="height:60px;background:#ccc;"></header>
  <nav style="display:flex;justify-content:space-between;background:#eee;">
	<a>nav1</a>
	<a>nav1</a>
	<a>nav1</a>
	<a>nav1</a>
	<a>nav1</a>
  </nav>
  <main style="display:flex;">
	<div style="margin-right:10px;background:#ccc;width:300px;height:260px;"></div>
	<div style="flex:1;background:#ccc;height:260px;"></div>
  </main>
  <footer style="background:#eee;height:60px;"></footer>
 </body>
</html>

    使用margin:0 auto;让元素横向居中分布

    使用flex弹性布局，可让子元素在一行上布局

    justify-content设置横向布局方式，space-between是平均分布

    flex:1 是弹性伸缩到占满剩余空间

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

  • 初学者应该怎么学习前端？web前端的发展路线大剖析！
    2019-07-18 16:47
    IT小默的博客 此套前端课程的知识体系包括：html，css，html5，css3，JavaScript，jquery，bootstrap，Ajax，vue.js，node.js等等。从初级到高级框架应有尽有， 另外教程里面除超清视频课件以外，最...能够以最短的时间进入前端...
  • 51c大模型~合集179
    2025-09-07 00:16
    whaosoft-143的博客 然而，在更具挑战性的评估和实际使用中，准确度会固定在 100% 以下，因为有些问题的答案由于各种原因（例如信息不可用、小型模型的思维能力有限或需要澄清的歧义）而无法确定。OpenAI 举了个例子，当向不同的广泛...
  • 51c大模型~合集160
    2025-07-27 19:19
    whaosoft-143的博客 该方案由灵初智能全栈自研，包含便携式外骨骼触觉手套数采套装、大规模 in the wild 数采数据管线、基于世界模型和强化学习的跨本体数据迁移模型，并已率先将采集到的人类数据应用于物流等真实场景。同时，灵初智能...
  • web前端的发展分析
    2020-04-10 14:56
    buybuybuy-的博客 前端工程师至少都要满足四类客户的需求： 1、产品经理。这些是负责策划应用程序的一群人。他们会想出很多新鲜的、奇怪的、甚至是不可能实现的应用。一般来说，产品经理都追求丰富的功能。 2、UI设计师。这些人...
  • 如何帮助前端新人入门和提高？
    2019-05-06 13:54
    asdfkiyomi的博客 前端开发是计算机专业同学在大学期间都会接触到的一门课程，而学习网页制作所用的第一个集成开发环境(IDE)想必大多是Dreamweaver，这种所见即所得的“吊炸天”IDE为我们制作网页带来了极大的方便。 入门快、见效快让...
  • 前端面试题(基础部分)
    2019-08-12 18:58
    ZH_TX的博客 1.Doctype的作用？标准模式与兼容模式各有什么区别? ... 标准模式 的排版和JS都是以浏览器支持的最高的标准运行 兼容模式 页面以宽松向后兼容的方式显示，模仿老式浏览器，防止站点无法工作 ...盒子模型由conte...
  • java学习 Web前端开发学习路线及建议
    2019-02-22 19:58
    skwyhdhwh的博客 java学习 Web前端开发学习路线及建议
  • 关于自学Web前端开发（供自己使用）
    2017-12-30 18:43
    weixin_30335575的博客 别人的警告：大多数初学者学习网页制作所用的集成开发环境（IDE）大多是...正确的方向胜过无谓的努力：也不知道它对不对，没有大神指导的铝孩纸也是没办法了： 第一阶段--HTML学习：超文本标记语言（Hyp...
  • 独家分享——大牛教你如何学习Web前端开发
    2015-07-11 11:52
    me_lawrence的博客 　同时CSS中的盒子模型、相对布局、绝对布局等能够实现对网页中各对象的位置排版进行像素级的精确控制。通过此阶段的学习，我们就可以顺利完成“一幢楼房”的建设。 　“楼房”建设完成之后，我们可以交给...
  • 前端面试题杂烩part1
    2016-10-03 21:17
    二次猿的博客 前端开发面试知识点大纲： HTML&CSS： 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应 JavaScript： 数据类型、面向对象、继承、...
  • 没有解决我的问题, 去提问