CSS 页面布局

网页布局的本质是用CSS来摆放盒子,把盒子摆放到相应位置,CSS提供了三种传统布局方式:浮动、定位和标准流。浮动布局可以让多个块级元素一行内排列显示,但是有局限性且繁琐,不能在移动端很好的布局,所以下面主要讲讲flex布局。

标准流就是标签按照规定好默认方式排列。

块级元素会独占一行,从上向下顺序排列 div hr P h1 ul ol dl form table

行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行 span a i em

flex弹性布局

flex是flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以
指定为flex布局

  • flex布局操作方便极为简单,移动端应用很广泛
  • PC端浏览器支持情况较差,IE11或更低版本,不支持或仅部分支持
  • 当父盒子设为flex布局以后,子元素的float clearvertical-align属性将失效。
  • 又名伸缩布局、弹性布局、伸缩盒布局、弹性盒布局和flex布局

采用Flex布局的元素称为Flex容器。它所有子元素自动成为容器成员,称为Flex项目,容器成员可以横向排列也可以纵向排列。

通过给父盒子添加flex属性,来控制子盒子的位置和排列方式。

常见父项属性

属性说明
flex-direction设置主轴的方向
justify-content设置主轴上的子元素排列方式
flex-wrap设置子元素是否换行
align-content设置侧轴上的子元素的排列方式(多行)
align-items设置侧轴上的子元素排列方式(单行)
flex-flow复合属性,相当于同时设置了flex-direction 和 flex-wrap

flex布局中分为主轴和侧轴两个方向(“行和列”或者叫“×轴和y轴”)Demo

  • 默认主轴× 方向:水平向右
  • 默认侧轴y 方向:水平向下

元素是跟着主轴来排列的

div {
  /* 1. row默认值主轴x,是从左到右排列的, */
  flex-direction: row;

  /*  row-reverse主轴x翻转,从右到左排列的, */
  flex-direction: row-reverse;

  /* 2. column 设置主轴y,是从上到下排列的, */
  flex-direction: column;
  
  /* column-reverse 设置主轴y翻转,从下到上排列的, */
  flex-direction: column-reverse;
}

justify-content属性定义了项目在主轴上的对齐方式 Demo

使用此属性之前一定要确定好主轴是哪个,默认主轴是x

justify-content: flex-start;  /* 默认:确认主轴方向,主轴x则从左到右,主轴y 则从上到下 */

justify-content: flex-end;    /* 从尾部开始排列,主轴x则子元素整体贴着右边,主轴y 则子元素整体贴着下面 */   

justify-content: center;      /* 在主轴x上居中对齐;主轴y则水平居中 */        

justify-content: space-around; /* 平分剩余空间 */

justify-content: space-between;/* 先两边贴边 再平分剩余空间(重要) */ 

默认不换行:子元素都排在一条轴线上,一行内显示,如果摆放不下,就会缩小子元素的尺寸 Demo

flex-wrap: nowrap; /* 默认不换行 */
flex-wrap: wrap;   /* 表示要换行 */

该属性是控制子项在侧轴(默认是y轴)上的排列方式,在子项为单项的时候使用 Demo

align-items: flex-start; /* 默认:从上到下 */
align-items: flex-end; /* 从下到上 */
align-items: center; /* 侧轴垂直居中,挤在一起居中 */
align-items: stretch; /* 拉伸,但子盒子不要给高度 */

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行),单行下没有效果 Demo

align-content: flex-start;    /* 默认值在侧轴的头部开始排列 */
align-content: flex-end;      /* 在侧轴的尾部开始排列 */
align-content: center;        /* 在侧轴中间显示 */
align-content: space-around;  /* 子项在侧轴平分剩余空间 */
align-content: space-between; /* 子项在侧轴先分布在两头,再平分剩余空间 */
align-content: stretch;       /* 设置子项元素高度平分父元素高度 */

flex-flow属性是flex-directionflex-wrap属性的复合属性。

flex-flow: column wrap; /* 复合写法 */

/* 同下 */
flex-direction: column;/* 主轴的方向 */
flex-wrap: wrap; /* 换行 */

flex属性定义子项目分配剩余空间,用flex来表示占多少份数 Demo

  • 两端宽度固定,中间适应
  • 宽度没有设定,平均分为3份
  • 宽度没有设定,分为4份,中间部分站两份
section div:nth-child(2) {
    flex: 1;
  }

    
p span {
    flex: 1;
  }
    
p span:nth-child(2) {
    flex: 2;
  }

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性 Demo
默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

  div span:nth-child(3) {
    align-self: flex-start;  /* 默认上面对齐 */
    align-self: flex-end;    /* 下面对齐 */
    align-self: center;      /* 居中对齐 */
  }

数偵越小,排列越靠前,默认0。这个和z-index 属性不一样

    div span:nth-child(2) {
      order: -1;
    }

grid布局

  • grid容器:采用 grid 布局的父元素;
  • grid内容:显示项目的区域
  • grid项目:grid布局中每一个格子内部放置的元素
  • 行:横向
  • 列:纵向
  • 网格线:网格布局中的横向的纵线的线条
  • 单元格:横纵线交汇的区域被称之为单元格
  • 间距:网格与网格之间的距离被称为间距

一个mn列的网格,需要使用m+1条横向,n+1条纵向网格线组成 Demo

display: grid;        /* 块网格 */
display: inline-grid; /* 行内块网格 */

划分行列取值

重点研究的是取值,后面跟几组值,就代表了几行几列,同时也可以使用百分比取值

行列取值

常规取值

grid-template-rows: 100px 100px 100px;    /* 行属性:3行高度100px */
grid-template-columns: 100px 100px 100px; /* 列属性:3列宽度100px */

百分比取值

grid-template-rows: 20% 30% 50%;
grid-template-columns: 100px 100px 100px;

重复函数取值

grid-template-rows: repeat(3, 100px);  /* 行属性:3行,高度100px */
grid-template-columns: repeat(5, 20%); /* 列属性:5列,宽度100px */

/* 等同下面 */
grid-template-rows: 100px 100px 100px;
grid-template-columns: 20% 20% 20% 20% 20%;

自动填充

自动填充auto-fill,应用在重复函数中,是根据需要重复的数值,进行自动填充数量。

grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(auto-fill, 30%); /* 列属性设置30% 只能自动填充3列,多于的10%则留白*/

在这里auto-fill会将列数宽度按照30%的宽度进行划分;盛放不下的话则不在划分列数

auto自动

auto自动代表的是,占剩余宽度和剩余高度的所有。

grid-template-rows: 100px auto 100px;
grid-template-columns: auto 100px 100px;

fr片段划分

片段划分是为了方便表示比例关系,网格布局提供了fr关键字(fraction 的缩写)。如果两列的宽度分别为1fr2fr,就表示后者是前者的两倍。

grid-template-rows: 1fr 2fr 3fr;
grid-template-columns: 100px 100px 100px;

minmax() 函数取值

minmax(num1,num2)函数,可以理解成最小最大值函数,函数中两个参数;参数1代表的是最小值,参数2代表的是最大值;

grid-template-rows: 100px 100px minmax(100px, 200px);
grid-template-columns: 100px 100px 100px;

如果条件允许,则一直使用最大值条件不满足使用中间值剩下的距离不足使用最小值

调整间距属性

grid-gap: num1 num2来实现,第一个参数代表的是行间距,第二个参数代表的是列间距。

grid-gap: 20px 30px;

grid-row-gap: 20px;
grid-column-gap: 30px;

容器中的项目

如果想要给网格中添加项目,我们需要在容器中添加对应的div,这些div被称之为项目,项目会默认自动撑开显示在单元格内部。

添加完对应的项目之后,默认项目是横向依次由左向右进行显示,第一行显示完毕之后,才会在第二行中显示。

项目显示顺序

grid-auto-flow属性有两个取值,分别为:row横向显示 column纵向显示。


grid-auto-flow: row;    /* 默认横向 */
grid-auto-flow: column; /* 默认竖向 */

项目对其方式

给项目添加宽度之后,默认项目是在单元格左上角显示的。默认左上角对齐,默认是垂直方向的

使用justify-items水平对其和 align-items垂直对其来调整项目位于单元格内部的对齐方式。

除了start center end这三个取值之外,另有一个默认值就是stretch拉伸效果但是以上两个属性均为单一属性,是否有对应的复合属性来实现。

/* 复合写法:垂直方向 水平方向 */
place-items: end start ;

justify-items: start;    /* Y轴靠上 */
justify-items: center;   /* Y轴居中 */
justify-items: end;      /* Y轴靠下 */

align-items: start;      /* 左对齐 */
align-items: center;     /* 水平居中 */
align-items: end;        /* 右对齐 */

网格位于容器中的对其

默认情况下网格位于容器的左上角位置显示。

/* 复合写法:垂直方向 水平方向 */
place-content: center center;

/* 水平 */
justify-content: start;
justify-content: center;
justify-content: end;

/* 垂直 */
align-content: start;
align-content: center;
align-content: end;


/* 默认值拉伸 */
justify-content: stretch;

/* 列与列之间的距离 是 贴边列距离父元素的距离的 2倍 */
justify-content: space-around;

/* 贴边显示,中间的间距自动拉开 */
justify-content: space-between;

/* 每一列与每一列距离 和 贴边列距离父元素的距离都是一样的 */
justify-content: space-evenly;
  • stretch代表的是拉伸默认值
  • space-around:行列间距环绕
  • space-between: 行列两端对其
  • space-evenly: 行列间距平分

合并单元格属性

合并单元格是将划分好的网格,通过让元素使用网格线占位的形式,来达到合并的效果。

  • grid-column-start 纵向网格线开始占位
  • grid-column-end 纵向网格线结束占位
  • grid-row-start 横向网格线开始占位
  • grid-row-end 横向网格线结束占位
grid布局合并单元格属性
.box1 {
  grid-row: 1/3;      /* 垂直 */
  grid-column: 2/4;   /* 水平 */

  /* grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 4; */
}

.box2 {
  grid-row: 3/4;
  grid-column: 1/3;

  /* grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 1;
  grid-column-end: 3; */
}

.box3 {
  grid-row: 4/5;
  grid-column: 2/4;

  /* grid-row-start: 4;
  grid-row-end: 5;
  grid-column-start: 2;
  grid-column-end: 4; */
}

原创文章,作者:霍欣标,如若转载,请注明出处:https://www.bigengwu.cn/xue/166.html

霍欣标的头像霍欣标
上一篇 2024-09-20 12:12
下一篇 2024-07-01 10:37

相关推荐

博主人懒,应管局要求暂不开启站内私信和评论功能,如需帮助请发邮件。

邮箱账号:1969600480@qq.com