页面布局layout | 青训营笔记

这是我参与 $\lceil$ 第四届青训营 $\rfloor$ 笔记创作活动的第4天

课程的重点内容

1. 布局（layout）是什么
2. 布局的相关技术
3. 盒模型
4. 常规流布局技术
5. 浮动和绝对定位布局技术
6. 总结

一、布局（layout）是什么

如下图：合理的布局会使得页面的可阅读性提升，方便用户对页面信息进行捕捉。

二、布局的相关技术

常规流：行级、块级、表格布局、FlexBox、Grid布局
浮动
绝对定位

三、盒模型

在进行学习相关技术之前，我们需要对盒模型进行认识和学习

1、盒模型的样子如下

网页中进入开发者模式（一般按F12即可进入），在计算样式中就能看到元素所处的盒模型 2、盒模型中的各种属性

width：

height:

padding:

border: 指定容器边框样式、粗细和颜色

4条边框不同颜色时，会出现下面的样式效果

margin 外边距

通过margin可以进行居中操作，auto情况下会自动计算外边距margin的大小

margin的collapse，折叠现象两个div之间的外边距大小会产生重叠现象，而不是值的累加（a的margin-bottom 和b的margin-top）

-box-sizeing: border-box

在定义height和width时，不会计算padding、border、margin所占的值

对比一下两张图

没错，加了box-sizing: border-box之后，height和width的计算方式改变了，这种更有利于开发。

<p class="a">
  This is the behavior of width and height as specified by CSS2.1. The
  specified width and height (and respective min/max properties) apply to
  the width and height respectively of the content box of the element.
</p>
<p class="b">
  Length and percentages values for width and height (and respective min/max
  properties) on this element determine the border box of the element.
</p>

<style>
  html {
    font-size: 24px;
  }

  .a {
    width: 100%;
    padding: 1em;
    border: 3px solid #ccc;
  }

  .b {
    box-sizing: border-box;
    width: 100%;  //与.a类一样，但是，计算宽度包括padding、border、margin属性值。
    padding: 1em;
    border: 3px solid #ccc;
  }
</style>

2 00_00_00-00_00_30.gif

-overflow属性：visible、hidden、scroll(对于超出盒模型内容的处理方式)

块级、行级盒模型

注意：行级盒模型中的宽高是不适用的

display属性：对元素进行排版角色的设置

四、常规流

行级排版上下文（IFC）

代码示例

<div>
  This is a paragraph of text with long word Honorificabilitudinitatibus. Here is an image
  <img src="https://assets.codepen.io/59477/cat.png" alt="cat">
  And <em>Inline Block</em>
</div>

<style>
  div {
    width: 10em;
    //overflow-wrap: break-word;
    background: #411;
  }

  em {   //对块级元素em的样式选择器
    display: inline-block;
    width: 3em;
    background: #33c;
  }
</style>
//可以看到em元素和img元素在同一行,并且作为inline-block,可以进行设置宽高，调整外观。

块级排版上下文（BFC）

行级内包含块级的代码示例

<span>
  This is a text and
  <div>block</div>
  and other text.
</span>

<style>
  span {
    line-height: 3;
    border: 2px solid red;
    background: coral;
  }

  div {
    line-height: 1.5;
    background: lime;
  }
</style>

当行级内包含块级时，行级元素会被分割成多个块级进行显示效果如下图

FLex Box排版

代码示例

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>
<style>
  .container {
    display: flex;
    border: 2px solid #966;
  }

  .a, .b, .c {
    text-align: center;
    padding: 1em;
  }

  .a {
    background: #fcc;
  }

  .b {
    background: #cfc;
  }

  .c {
    background: #ccf;
  }
</style>

flex box布局中常用的一些属性： flex-direction （flex-driction声明的轴为主轴(row或column或其对应的reverse)，默认为row） 主轴（justify-content）和侧轴（align-items） 默认方向

justify-content的一些属性值

align-items的一些属性值

align-self可以对某个元素进行特殊值对待

order

Flexibility

flex-grow的代码示例

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

<style>
  .container {
    display: flex;
  }

  .a, .b, .c {
    width: 100px;
  }

  .a {
    flex-grow: 2; //类a元素的伸长能力为2
  }

  .b {
    flex-grow: 1;//类b元素的伸长能力为1
  }
  //c类的伸长能力为默认，因此，a、b对剩余空间进行伸长占用，比例增加的空间A：B=2：1
</style>

flex-shrink

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

<style>
  .container {
    display: flex;
  }

  .a, .b, .c {
    width: 400px;
  }

  .a {
    flex-shrink: 0;  //类a元素的收缩能力为0，所以在下图a仍为400px，其他元素进行了对应能力的收缩（b、c同等shrink默认值，所以减少等比例的宽度）
  }
</style>

felx一些属性“缩写”定义时代表的含义

Grid布局

设计Grid布局的逻辑

grid-template进行网格划分

设置子项所占区域首先明确两个定义

选取示例 下图a占了row（1-3），column（1-3）的区域

下图重合的部分被后来者B覆盖

五、浮动 loat属性、定位 podition属性

浮动 float

示例代码：效果如下

<section>
  <img src="https://p4.ssl.qhimg.com/t017aec0e7edc961740.jpg" width="300" alt="mojave" />
  <p>莫哈韦沙漠不仅纬度较高，而且温度要稍微低些，是命名该公园的短叶丝兰——约书亚树的特殊栖息地。约书亚树以从茂密的森林到远远间隔的实例等各种形式出现。除了约书亚树森林之外，该公园的西部包括加州沙漠里发现的最有趣的地质外观；发的哈将对方还发出八号的速度和比赛的话。
  </p>
</section>

<style>
  img {
    float: left;
  }

  p {
    font-size: 20px;
    line-height: 1.8;
  }
</style>

定位 position

position的属性：static、relative、absolute、fixed

position: relative:因为是对照自己原位置偏移，所以需要在常规流里，被计算了原始位置后，才能进行偏移。

position: absolute:脱离常规流,不受流内计算规则的约束了，直接参考于非static属性值的祖先进行定位，不会对流内布局造成影响

示例代码

<h1>页面标题</h1>
<div class="container">
  <div class="box"></div>
  <p>段落内容段落内容 1</p>
  <p>段落内容段落内容 2</p>
  <p>段落内容段落内容 3</p>
  <p>段落内容段落内容 4</p>
</div>

<style>
  .container {
    background: lightblue;
  }

  .box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background: red;
  }
</style>

可见效果图中，.box对应的元素并没有对BFC内布局元素造成挤压

position: fixed:相对于视口进行定位，页面进行滚动时不受影响

<nav>
  <a href="#">首页</a>
  <a href="#">导航1</a>
  <a href="#">导航2</a>
</nav>
<main>
  <section>1</section>
  <section>2</section>
  <section>3</section>
  <section>4</section>
  <section>5</section>
</main>
<a href="#" class="go-top">返回顶部</a>

<style>
  nav {
    position: fixed;
    line-height: 3;
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
  }
  
  .go-top {
    position: fixed;
    right: 1em;
    bottom: 1em;
    color: #fff;
  }

  nav a {
    padding: 0 1em;
    color: rgba(255, 255, 255, 0.7);
  }

  nav a:hover {
    color: #fff;
  }

  body {
    margin: 0;
    font-size: 14px;
  }

  a {
    color: #fff;
    text-decoration: none;
  }

  section {
    height: 100vh;
    color: #fff;
    text-align: center;
    font-size: 5em;
    line-height: 100vh;
  }

  section:nth-child(1) {
    background: #F44336;
  }

  section:nth-child(2) {
    background: #3F51B5;
  }

  section:nth-child(3) {
    background: #FFC107;
  }

  section:nth-child(4) {
    background: #607D8B;
  }

  section:nth-child(5) {
    background: #4CAF50;
  }
</style>

可以看出 导航栏和右下方的“返回顶部”元素都没有改变位置 1 00_00_00-00_00_30.gif

五、总结

老师给予的CSS学习建议

本次课程内容主要介绍了什么是布局、盒模型、块级、行级、布局技术等内容，通过对这些内容的系统了解，自己就有理论知识支撑去设计布局网页，需要经过不断的实践和探索才能形成属于自己的技能。

知识很多，时间有限。了解了本质才能更容易找到学习的方向。

下篇笔记，跟着月影学JavaScript

基础不牢，地动山摇

TO BE CONTINUED