Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.5k views
in Technique[技术] by (71.8m points)

设置理想视口后,如果内部元素设置的宽度大于视口宽度,为什么body不会撑开,元素会超出body?

image

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: #999;
    }

    .box {
      background-color: #6cf;
      width: 750px;
      height: 10px;
      margin: auto;
    }

    .line {
      margin-top: 20px;
      height: 10px;
      background-color: #000;
      width: 100%;
    }
  </style>
  <div class="box"></div>
  <div class="line"></div>
</body>
</html>

如果去掉理想视口,margin:auto; 会多出边距;

image


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

常规流(normal flow)中:

默认情况下,块级元素将占据这一内联方向1的所有空间,因此我们的段落会铺开分布在多行,尽可能排满他的包含块。

注意这里说它是占据这一内联方向的所有空间,而不是由自己包含的内容撑开,所以包含内容过宽的时候就看 overflow 怎么设的了。
行内元素和行内块元素则是由内容撑开。


  1. 个人理解,像英文等横向排版的内联方向为横向,回鹘式蒙古文等纵向排版的内联方向为纵向。 ?

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...