tags: [ 文档排版布局 ]
categories: 重学前端系列笔记
浏览器默认排版 - 正常流
浏览器默认的排版方式是,从左到右,从上到下。这种排版方式称之为正常流,它包含了顺次排布和折行等规则,这种规则跟我们平时正常的书写排版一样
浏览器默认的文字排版规则:规定了行模型及文字在行模型中的排版。行模型中规定了,文字的行顶、行底、中心(文字区域)、基线几种对齐方式。一般默认是基线对齐。
浏览器不仅支持文字排版,还支持文字与其他元素排版。元素被定义为拥有一定区域的盒子。这个盒子由:元素内容、内边距、边框、外边距组成。
浏览器排版,还包括:flex布局(这里主要是通过display的属性控制排版方式) 、定位布局(这里包括绝对定位、相对定位,固定定位)、浮动布局 、还有老式的table布局。
盒模型
讲到布局,就不能不讲一下盒模型,
一般元素都具有盒模型特征,主要由
- content (内容)
- padding(内边距)
- border(边框)
- margin(外边距)
元素还分为三类:
- 行内元素(inline):这类元素无法赋值宽高,元素的宽高由内容撑开,上内边距赋值之后无法生效。上下的外边距赋值之后是无法生效
- 行内块元素(inline-block):这类元素可以的赋值宽高,也可以设置内外边距
- 块级元素(block):这类元素独占一行,不管元素是否有一行的宽,宽高内外边距都可以赋值。
flex布局
display:flex;
justify-content: center;
align-items: center;
详细的可以看我之前的文章 flex布局总结
另外说一点就是。 display
这个属性的不同的值可以改变元素的布局方式
定位布局
相对定位
position
为 absolute
属性的元素,这类元素根据父级元素定位,一层层向上查找,如果没找到。最终会找到 body
,这类布局不参与正常流排版,他自有自己的一套排版规则。按照这种定位布局之后,将在文档中不占位置
绝对定位
position
为 relative
属性的元素,这类元素是根据自己定位,定位移动的话,是根据自己自身移动,自身本身占据的位置不管是随着如何移动,依然在文档中占据位置
固定定位
position
为 fixed
属性的元素,这类元素是根据浏览器可视定位。最大宽高是浏览器视口的宽高。超出部分会被裁剪隐藏。定位移动是根据浏览器定位移动,在正常文档流中不占据位置。
浮动布局
当元素使用 float: right
或者 float:left
的时候,就可以开启浮动布局。不过相对于其他的布局来说, float
的布局,浏览器会先将其排入正常流,然后再其排到其父元素最左/最右。移动之后的浮动元素,在没清除浮动之前,其父级元素是不占据位置。同级的浮动元素处于同一空间内,在浮动空间内的布局的规则,很像正常元素在正常流上的布局。
table布局(表格布局)
顾名思,就是讲网页分割成一个个网格,然后对网格进行排版
<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布局(网格布局)
这种布局和
flex
布局很像,但是grid
布局更倾向于二维布局。
前言
- 在
Grid
布局中,采用布局的区域称之为“容器”,容器内采用网格布局的子元素称之为 “项目”<article> <div> <p>一生一世一双人</p> </div> <div> <p>一生一世一双人</p> </div> <div> <p>一生一世一双人</p> </div> </article>
上面的
article
就可以作为一个容器,作为他的子元素div
便是 项目 ,但是作为子元素的子元素p
便不是项目,项目只能是容器的顶层子元素,不包含项目的子元素,比如上面代码的p
元素就不是项目。Grid
布局只对项目生效
- 行(row)与列(column):正常的是横为行,竖为列
- 单元格(cell) : 行与列相交的地方,称之为单元格
- 网格线 : 划分单元格的线称之为网格线
属性介绍
开启grid布局
display:grid /*这种元素独占一行*/
display:inline-grid /*这种布局类似于inline-block*/
注意,设为网格布局以后,容器子元素(项目)的
float、display: inline-block、display: table-cell、vertical-align 和 column-*
等设置都将失效。
划分行与列布局
/*下面定义是宽高都是200px的三行三列网格*/
grid-template-columns: 200px 200px 200px; /*这里的单位不仅可以使用固定单位,也可以使用百分比*/
grid-template-rows: 200px 200px 200px;
重复数值 repeat()
grid-template-columns: reqeat(3,200px);
grid-template-rows: reqeat(3,200px);
repeat()
接受两个值,第一个值为重复的次数,第二个值是重复的数值。
重复的次数自动填充
grid-template-columns: reqeat(auto-fill,200px);
grid-template-rows: reqeat(3,200px);
auto-fill
可以按照重复的数值,将子元素铺满父元素,超出便会换行
fr 关键词
这关键词有点类似 flex
布局的 flex:1
grid-template-columns: 1fr 2fr; /* 2fr相当于1fr的两倍 */
行间距、列间距
grid-row-gap: 20px; /*行间距*/
grid-column-gap: 20px; /*列间距*/
排列先后问题 grid-auto-flow
grid-auto-flow: column;
grid-auto-flow:row /*默认*/
更详细的可以去看下阮一峰老师的grid教程