CSS常规流

最新推荐文章于 2022-08-25 06:45:17 发布

实力比头发更重要

最新推荐文章于 2022-08-25 06:45:17 发布

阅读量255

点赞数

分类专栏： Web前端开发文章标签： css 开发语言 css3

本文链接：https://blog.youkuaiyun.com/qq_62217723/article/details/126370760

版权

Web前端开发专栏收录该内容

10 篇文章

订阅专栏

本文深入探讨了HTML和CSS中的常规流布局，包括盒模型、视觉格式化模型的基本概念。重点讲解了常规流布局下块盒的排列规则，如宽度、边距的处理，以及高度百分比的计算。此外，还提到了上下外边距的合并现象。通过实例展示了如何利用这些规则进行网页设计，以实现内容的有序展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、常规流

盒模型：规定单个盒子的规则

视觉格式化模型（布局规则）：页面中的多个盒子排列规则

视觉格式化模型，大体上将页面中盒子的排列分为三种方式：

常规流
浮动
定位

1、常规流布局

常规流、文档流、普通文档流、常规文档流

所有元素，默认情况下，都属于常规流布局

总体规则：块盒独占一行，行盒水平依次排列

包含块（containing block）:每个盒子都有它的包含块，包含块决定了盒子的排列区域。

绝大部分情况下：盒子的包含块，为其父元素的内容

块盒

每个块盒的总宽度，必须等于包含块的宽度
宽度默认值是auto
auto：将剩余空间吸收掉
margin的取值也可以是auto，默认值0
width吸收能力强于margin
若宽度、边框、内边距计算后，仍然有剩余空间，该剩余空间被margin-right全部吸收

        .child{
             border:2px solid;
             height:100px;
             background: red;
             width:100px;
             /* 在常规流中，块盒在其包含块中居中，可以定宽、然后左右margin设为auto */
            margin-right: auto;
            margin-left: auto;
        }

每个块盒垂直方向上的auto值
height：auto，适应内容的高度
margin：auto，表示0
百分比取值
padding、宽高、margin可以取值百分比
以上的所有百分比相对于包含块的宽度。

高度的百分比：
1）. 包含块的高度是否取决于子元素的高度，设置百分比无效
2）. 包含块的高度不取决于子元素的高度，百分比相对于父元素的高度

上下外边距的合并
两个常规流块盒，上下外边距相邻，会惊醒合并。
两个外边距取最大值。

二、常规流练习

在这里插入图片描述
设计网页

1、index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">

</head>
<body>
    <article class="article-container">
      <header>
        <h1>这是文章的标题</h1>
        <div class="original-link">
            原文地址：<a href="">http://www.baidu.com
            </a>
        </div>
      </header>
      <section>
          <h2>章节1</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam laboriosam obcaecati, quod sapiente placeat officia in sint quia illum dolor id ex cum, iure quam? Facere similique nihil quos laudantium.</p>
          <p>Placeat, dolore, voluptates, repellendus ut magni dicta minima error iste quas ex eaque odit molestiae iusto temporibus eligendi optio vero sunt corporis qui dolorem mollitia! Ullam error cupiditate illo a!</p>
          <p>Amet eos consectetur, ab accusamus reiciendis, dolorum quos eligendi, fuga delectus tempora cupiditate provident quod velit eum laudantium dolore? Consequuntur, doloremque. Temporibus nobis non blanditiis recusandae quaerat assumenda veritatis quisquam.</p>
      </section>
      <section>
          <h2>章节2</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse nihil quo repellendus expedita architecto. Consectetur obcaecati eaque dolores, voluptates repellendus, ipsam explicabo blanditiis culpa pariatur consequatur iusto illum nobis iste!</p>
          <p>Dolorum ab aperiam iusto consectetur quos sunt dolores animi dolore nulla vero quibusdam, ipsum vitae possimus labore commodi expedita cum, totam illum minima distinctio ullam hic pariatur? A, dolorum quis.</p>
          <p>Quibusdam enim provident rem ad ut quis molestiae porro, consequuntur ullam iste aut quia impedit dolorem, eaque beatae, natus earum non accusantium quo laudantium tenetur. Quasi earum adipisci et suscipit.</p>
      </section>
      <section>
          <h2>章节3</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas excepturi aperiam ab et fuga odit fugiat beatae eligendi quasi modi autem, perspiciatis iure rem mollitia dolor voluptatibus tenetur alias sint?</p>
          <p>Unde, ipsam. Doloribus impedit excepturi, nemo architecto quisquam inventore odit! Aliquid culpa perspiciatis dolore consequatur a eaque! Sit totam similique consectetur dolore velit laudantium quae, maiores beatae, aperiam sequi modi!</p>
          <p>Facilis voluptatibus inventore maxime quidem fuga magni quod, praesentium placeat minus totam accusamus ipsum ratione possimus, ex esse dolorem soluta optio. Enim praesentium quo nihil, libero quaerat maiores animi suscipit!</p>
      </section>
      <section>
          <h2>章节4</h2>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Asperiores ipsum doloribus sequi laboriosam modi omnis dicta corrupti consectetur molestiae? Eaque culpa voluptas veniam magnam aspernatur nulla voluptate minus eligendi dolores!</p>
          <p>Iusto, saepe. Vitae ullam praesentium, similique ut fuga perspiciatis voluptate voluptates quis rem possimus laboriosam eveniet eius dolorem repellat tenetur reiciendis nihil eaque reprehenderit quos ipsum facere architecto? Quam, iure!</p>
          <p>Itaque totam vel incidunt sed enim accusamus. Eligendi, hic magni! Accusantium aspernatur, illum reprehenderit at explicabo ut placeat, iusto ea debitis ex suscipit esse quaerat alias quos nemo sed possimus.</p>
      </section>
      <section>
          <h2>章节5</h2>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus temporibus voluptas distinctio velit? Iste unde eum, iusto exercitationem natus sunt porro minus rerum fuga temporibus cupiditate, minima velit quod et!</p>
          <p>Consequuntur pariatur recusandae consectetur rerum accusantium veniam labore maxime odio. Velit tempore impedit fugiat quos. Totam molestias nobis non, illo sit harum repudiandae alias sed atque autem deleniti natus dignissimos?</p>
          <p>Omnis architecto minus nihil dolores deserunt quasi culpa illo sit optio, similique at fugiat dolore alias ullam? Accusamus labore ducimus repellendus possimus sed earum expedita, non eaque. Voluptatem, itaque necessitatibus?</p>
      </section>
    </article>
</body>
</html>

2、index.css

body{
    background: #4d4a40;
    padding:20px 0;
    /* width:1902px; */
    line-height:2;
    min-width:1000px ;
}
.article-container{
    background: #fff;
    /* width:1713px; */
    width:90%;
    margin:0 auto;
    padding:30px 0;
}
.article-container header{
    background: #267890;
    color:#fff;
    /* 文字：白色，居中 */
    text-align: center;
   border:5px solid #14414e;
   margin: 0 -34px;
}
.article-container h1{
    font-size: 42px;
    /* 字体加粗 */
    font-weight: bold;
}
.article-container .original-link{
    color:#dbdbdb;
    margin:26px;

}
.article-container .original-link a{
    text-decoration: underline;
}
.article-container .original-link a:hover{
    color:#fff;
}
.article-container section{
    width:90%;
    margin:0 auto;
    /* text-align: center; */
}
.article-container section p{
    margin:1em 0;
}
.article-container section h2{
    font-size: 32px;
    font-weight:bold;
    border-top:1px dashed;
    border-bottom: 1px dashed;
}

3、reset.css

q::before,
q::after{
    content:'';
    content:none;
}

table{
    border-collapse: collapse;
    border-spacing: 0;

}
a{
    text-decoration:none ;
    color:inherit;
    
}