无心 | 人生若只如初见，何事秋风悲画扇
2019-04-08 | 重学前端系列笔记 | UNLOCK

8.文档排版布局

浏览器默认排版 - 正常流

浏览器默认的排版方式是，从左到右，从上到下。这种排版方式称之为正常流，它包含了顺次排布和折行等规则，这种规则跟我们平时正常的书写排版一样

浏览器默认的文字排版规则：规定了行模型及文字在行模型中的排版。行模型中规定了，文字的行顶、行底、中心（文字区域）、基线几种对齐方式。一般默认是基线对齐。

浏览器不仅支持文字排版，还支持文字与其他元素排版。元素被定义为拥有一定区域的盒子。这个盒子由：元素内容、内边距、边框、外边距组成。

浏览器排版，还包括：flex布局（这里主要是通过display的属性控制排版方式） 、定位布局（这里包括绝对定位、相对定位，固定定位）、浮动布局 、还有老式的table布局。

盒模型

讲到布局，就不能不讲一下盒模型，

一般元素都具有盒模型特征，主要由

  • content （内容）
  • padding（内边距）
  • border（边框）
  • margin（外边距）

元素还分为三类：

  • 行内元素（inline）无法赋值宽高，元素的宽高由内容撑开，上内边距无法生效上下的外边距无法生效
  • 行内块元素（inline-block）：这类元素可以的赋值宽高，也可以设置内外边距
  • 块级元素（block）：这类元素独占一行，不管元素是否有一行的宽，宽高内外边距都可以赋值。

flex布局

1
2
3
display:flex;
justify-content: center;
align-items: center;

详细的可以看我之前的文章 flex布局总结

另外说一点就是。 display 这个属性的不同的值可以改变元素的布局方式

定位布局

相对定位

position 为 absolute 属性的元素，这类元素根据父级元素定位，一层层向上查找，如果没找到。最终会找到 body ，这类布局不参与正常流排版，他自有自己的一套排版规则。按照这种定位布局之后，将在文档中不占位置

绝对定位

position 为 relative 属性的元素，这类元素是根据自己定位，定位移动的话，是根据自己自身移动，自身本身占据的位置不管是随着如何移动，依然在文档中占据位置

固定定位

position 为 fixed 属性的元素，这类元素是根据浏览器可视定位。最大宽高是浏览器视口的宽高。超出部分会被裁剪隐藏。定位移动是根据浏览器定位移动，在正常文档流中不占据位置。

浮动布局

当元素使用 float: right 或者 float:left 的时候，就可以开启浮动布局。不过相对于其他的布局来说， float 的布局，浏览器会先将其排入正常流，然后再其排到其父元素最左/最右。移动之后的浮动元素，在没清除浮动之前，其父级元素是不占据位置。同级的浮动元素处于同一空间内，在浮动空间内的布局的规则，很像正常元素在正常流上的布局。

table布局（表格布局）

顾名思，就是讲网页分割成一个个网格，然后对网格进行排版

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
  div{
    /*这里记得给宽高\(^o^)/~*/
    display:table-cell;
    text-align:center;
    vertical-align: middle;
  }
</style>
<body>
  <div>
    <em>爱是一种病，你病的不轻，还从来没有好过。</em>
  </div>
</body>
  • 当父元素是要 display : table-row， 子元素使用 display : table-cell 的时候。子元素是等高的
  • 当父元素是要 display : table-row， 子元素使用 display : table-row 的时候。子元素是等宽的

    Grid布局（网格布局）

    这种布局和 flexgrid** 布局更倾向于二维布局。

前言

  • 在 Grid“容器”“项目”
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <article>
        <div>
            <p>一生一世一双人</p>
        </div>
        <div>
            <p>一生一世一双人</p>
        </div>
        <div>
            <p>一生一世一双人</p>
        </div>
    </article>

上面的 article 就可以作为一个 容器作为他的子元素 div 便是项目 ，但是作为子元素的子元素 p 便不是项目，项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的 p 元素就不是项目。 Grid 布局只对项目生效

  • 行（row）与列（column）：正常的是横为行，竖为列
  • 单元格（cell）： 行与列相交的地方，称之为单元格
  • 网格线： 划分单元格的线称之为网格线

属性介绍

开启grid布局
1
2
display:grid /*这种元素独占一行*/
display:inline-grid /*这种布局类似于inline-block*/

注意，设为网格布局以后，容器子元素（项目）的 float、display: inline-block、display: table-cell、vertical-align 和 column-* 等设置都将失效。

划分行与列布局
1
2
3
/*下面定义是宽高都是200px的三行三列网格*/
grid-template-columns: 200px 200px 200px; /*这里的单位不仅可以使用固定单位，也可以使用百分比*/
grid-template-rows: 200px 200px 200px;

重复数值 repeat()

1
2
grid-template-columns: reqeat(3,200px); 
grid-template-rows: reqeat(3,200px);

repeat() 接受两个值，第一个值为重复的次数，第二个值是重复的数值。

重复的次数自动填充
1
2
grid-template-columns: reqeat(auto-fill,200px); 
grid-template-rows: reqeat(3,200px);

auto-fill 可以按照重复的数值，将子元素铺满父元素，超出便会换行

fr 关键词

这关键词有点类似 flex 布局的 flex:1 

1
grid-template-columns: 1fr 2fr; /* 2fr相当于1fr的两倍 */
行间距、列间距
1
2
 grid-row-gap: 20px; /*行间距*/
grid-column-gap: 20px; /*列间距*/
排列先后问题 grid-auto-flow
1
2
grid-auto-flow: column;
grid-auto-flow:row /*默认*/

更详细的可以去看下阮一峰老师的grid教程

文档排版布局

评论加载中