CSS_12——网页布局(简单记录)

1. 网页布局

CSS_12——网页布局(简单记录)

居中布局

CSS_12——网页布局(简单记录)

CSS_12——网页布局(简单记录)

整体居中方法

CSS_12——网页布局(简单记录)

CSS_12——网页布局(简单记录)

居于整个页面居中

CSS_12——网页布局(简单记录)

CSS_12——网页布局(简单记录)

CSS_12——网页布局(简单记录)

单列布局

头部、内容、尾部

header、main、footer

两列布局

三列布局

浮动法、绝对定位法、margin负值法(应用最广)

双飞翼布局和圣杯布局

CSS_12——网页布局(简单记录)

瀑布流布局

弹性盒布局

display:flex(弹性容器)

flex-wrap

CSS_12——网页布局(简单记录)

垂直排列flex-direction

CSS_12——网页布局(简单记录)

CSS_12——网页布局(简单记录)

弹性盒布局的对齐

主轴和垂轴

CSS_12——网页布局(简单记录)

CSS_12——网页布局(简单记录)

CSS_12——网页布局(简单记录)

主轴上的对齐方式

justify-contnet

CSS_12——网页布局(简单记录)

垂轴方向上的对齐方式

CSS_12——网页布局(简单记录)

align-content

CSS_12——网页布局(简单记录)

压缩弹性元素

放大弹性元素

栅格布局(重要)

二维布局

CSS_12——网页布局(简单记录)

相应的属性

CSS_12——网页布局(简单记录)

grid-template-columns和grid-template-rows

定义行列的数量和宽度

1:2:3=1fr:2fr:3fr

grid-template-area

完成对区域的定义

CSS_12——网页布局(简单记录)

CSS_12——网页布局(简单记录)

grid-column-gap和grid-row-gap

行列之间的间距,可合写:grid-gap

一些关键字和函数

fr:按份占比

auto:按浏览器决定空间的长度

min-contnet&max-content:计算最小空间和最大空间

repeat:repeat(6,200px) 6个参数份额

auto-fill:调整数量

minmax():

auto-fit

fit-content

栅格布局的对齐方式

CSS_12——网页布局(简单记录)

justify-container

align-content

justify-items

align-items

justify-self

align-self

等同于

CSS_12——网页布局(简单记录)

栅格线

可以给栅格线定义每条线的名字

CSS_12——网页布局(简单记录)

以上四个可以等同于grid-area

修改重叠的顺序

定义栅格元素的放置规则

grid-auto-flow

grid-auto-rows

grid属性:以下的简写

CSS_12——网页布局(简单记录)

CSS_12——网页布局(简单记录)

CSS_12——网页布局(简单记录)

栅格元素的特性

总结

相比较于旧技术的布局,近几年来随着弹性盒布局和栅格布局,使得布局整体简单美化。

上一篇:剑指 Offer 65. 不用加减乘除做加法


下一篇:python base64.b64decode 等号可以随便加