工业UI开发技术-课件 2-2-4 CSS布局-2.pptxVIP

CSS布局深圳市信息职业技术学院

FlexBox布局01目录Grid布局02绝对和相对布局03

本节目标 本任务通过学习CSS基本概念，CSS语法结构，选择器，属性，学习如何通过CSS设置HTML标签的样式与布局。通过本节学习可以：掌握CSS概念掌握CSS语法掌握CSS选择器与属性掌握CSS盒子模型掌握CSS布局方式

02Grid布局

网格布局概念容器：采用网格布局的区域，称为容器（container）。项目：容器内部采用网格定位的子元素，称为项目（item）行和列：容器里面的水平区域称为行（row），垂直区域称为列（column）单元格：行和列的交叉区域，称为单元格（cell）。正常情况下，n行和m列会产生nxm个单元格。比如，3行3列会产生9个单元格。网格线：划分网格的线，称为网格线（gridline）。水平网格线划分出行，垂直网格线划分出列。正常情况下，n行有n+1根水平网格线，m列有m+1根垂直网格线，比如三行就有四根水平网格线。

容器属性display属性 display:grid指定一个容器采用网格布局。默认情况下，容器元素都是块级元素，但也可以设成行内元素：display:inline-grid。grid-template-columns属性，grid-template-rows属性 该属性设置在容器上，容器指定了网格布局以后，接着就要划分行和列。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。grid-row-gap属性，grid-column-gap属性，grid-gap属性 grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。grid-template-areas属性 网格布局允许指定区域（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。grid-auto-flow属性 划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是先行后列，即先填满第一行，再开始放入第二行

容器属性justify-items属性，align-items属性，place-items属性 justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。justify-content属性，align-content属性，place-content属性 justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。grid-auto-columns属性，grid-auto-rows属性 grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。grid-template属性，grid属性 grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。grid属性是grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

子元素属性grid-column-start属性，grid-column-end属性，grid-row-start属性，grid-row-end属性 项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。 grid-column-start属性：左边框所在的垂直网格线 grid-column-end属性：右边框所在的垂直网格线 grid-row-start属性：上边框所在的水平网格线 grid-row-end属性：下边框所在的水平网格线grid-column属性，grid-row属性 grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。grid-area属性 grid-area属性指定项目放在哪一个区域。justify-self属性，align-self属性，place-self属性 justify-self属性设置单元格内容的水平位置（左中右），跟just