自身不设置宽度，让这个盒子居中起来？

最新推荐文章于 2022-05-21 22:28:02 发布

李特丽

最新推荐文章于 2022-05-21 22:28:02 发布

阅读量490

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_42493393/article/details/116056775

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

反思一些css认知误区系列（一）

1. 自身不设置宽度，让这个盒子居中起来？

这个问题能成立起来，其实有很多前置条件。
① 不设置宽度也就是继承body或者父亲的宽度100%，所以一般的解题思路就是外面套盒子，给外面的盒子宽度。用定位或者margin：0 auto;实现居中效果。本质上是外盒有宽度居中了，内盒是100%继承外盒的宽度。比如：

<body>
  <div class="outer">
    <div class="inner">我居中了</div>
  </div>
</body>
<style>
  .outer {
    width: 300px;
    margin: 0 auto;
    text-align: center;
  }
  .inner {
    background-color: cyan;
  }
</style>

②前置条件：自身显示模式的改变。宽度靠内容撑开。也就是说必须是有内容的，但是又不是宽度继承父亲的，推导出这个盒子显示模型为inline-block或者是inline。这样只需把外层盒设置为text-align:center;即可居中。

<body>
  <span class="outer">我没有宽度，我父亲是body
  </span>
</body>
<style>
  body {
    text-align: center;
  }
</style>

③前置条件：父亲的显示模式改变。body改成flex显示模型后，自己这个盒子默认被设置为flex: none;显示模式同inline,由内容撑开了。

<body>
  <div class="outer">我没有宽度，我父亲是body,我的父亲设置了flex
  </div>
</body>
<style>
  body {
    display: flex;
    justify-content: center;
  }
  .outer {
    background-color: cyan;
  }
</style>

总结一下就是，所有的css样式其实均围绕着layout（display显示模型，宽高设置）和text(关于文字的显示）以及Appearance(clour\cursor等用户行为，表单样式特征）三大方面去实现的。

李特丽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自身不设置宽度，让这个盒子居中起来？

1. 自身不设置宽度，让这个盒子居中起来？这个问题能成立起来，其实有很多前置条件。① 不设置宽度也就是继承body或者父亲的宽度100%，所以一般的解题思路就是外面套盒子，给外面的盒子宽度。用定位或者margin：0 auto;实现居中效果。本质上是外盒有宽度居中了，内盒是100%继承外盒的宽度。比如：<body> <div class="outer"> <div class="inner">我居中了</div> </div&gt
复制链接

扫一扫