CSS常规流

文章目录

一、常规流
- 1、常规流布局
二、常规流练习

一、常规流

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

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

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

常规流
浮动
定位

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;
        }
1
2
3
4
5
6
7
8
9

每个块盒垂直方向上的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>Documenttitle>
    <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>章节1h2>
          <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>章节2h2>
          <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>章节3h2>
          <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>章节4h2>
          <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>章节5h2>
          <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

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;
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

3、reset.css

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

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

}
a{
    text-decoration:none ;
    color:inherit;
    
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

最后网页：http://127.0.0.1:5500/CSS/%E5%B8%B8%E8%A7%84%E6%B5%81/index.html

相关阅读:
【概率论基础进阶】随机变量的数字特征-矩、协方差和相关系数
 Spring的AOP开发-基于xml配置的AOP
Torchtext快速入门（二）——文本预处理
 MyBatis04（关联关系映射）
解决kkFileView4.4.0版本pdf、word不能预览问题
 问卷答案的整理
 如何利用Ping命令测试本地最佳MTU值的方法
 在生产中部署ML前需要了解的事
 Linux系统中驱动框架基本概述
 2022大厂高频面试题之HTML篇
原文地址：https://blog.csdn.net/qq_62217723/article/details/126370760