您的位置: 首页  >  文章  >  网页排版布局方法加伸缩布局

网页排版布局方法加伸缩布局

分类: 文章 • 2023-11-14 12:46:40

一、表格布局

  • 设置表格给各个单元填充即可网页排版布局方法加伸缩布局

二、frameset框架

  • 特点: 替代了body标签
  • 作用: 主要是用来搭建整个网站的布局框架 快速
    横向框架 rows和纵向框架cols
    内嵌框架 iframe
    不会替代body 可以写在body中
  • 注：在HTML5已经淘汰了

三、浮动定位加css+div来布局
四、伸缩布局

  • 如何让水平排版
    ----前提没有给父元素设置高度

  • 块元素转换为行内元素

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>伸缩布局</title>
 <style>
  *{
   padding: 0px;
   margin: 0px;
  }
  ul{
   width: 600px;
   list-style: none;
   border: 1px solid #000;
   margin: 200px auto;
  }
  ul>li{
   width: 100px;
   height: 100px;
   line-height: 100px;
   text-align: center;
   font-size: 30px;
   background: red;
   display: inline-block;
  }
  li:nth-child(2){
   background: green;   
  }
  li:nth-child(3){
   background:skyblue;
  }
 </style>
</head>
<body>
 <ul>
  <li>1</li><li>2</li><li>3</li>
 </ul>
</body>
</html>
  • 浮动
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>伸缩布局</title>
 <style>
  *{
   padding: 0px;
   margin: 0px;
  }
  ul{
   width: 600px;
   list-style: none;
   border: 1px solid #000;
   margin: 200px auto;
overflow;hidden;
  }
  ul>li{
   width: 100px;
   height: 100px;
   line-height: 100px;
   text-align: center;
   font-size: 30px;
   background: red;
   float: left;////////
  }
  li:nth-child(2){
   background: green;
   
  }
  li:nth-child(3){
   background:skyblue;

  }
 </style>
</head>
<body>
 <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
 </ul>
</body>
</html>

网页排版布局方法加伸缩布局
----浮动后脱离标准流清除浮动：父元素加overflow;hidden;

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>伸缩布局</title>
 <style>
  *{
   padding: 0px;
   margin: 0px;
  }
  ul{
   width: 600px;
   list-style: none;
   border: 1px solid #000;
   margin: 200px auto;
   /*父元素·伸缩布局*/
   display: flex;
  }
  ul>li{
   width: 100px;
   height: 100px;
   line-height: 100px;
   text-align: center;
   font-size: 30px;
   background: red;
   
  
  }
  li:nth-child(2){
   background: green;
   
  }
  li:nth-child(3){
   background:skyblue;

  }
 </style>
</head>
<body>
 <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
 </ul>
</body>
</html>

伸缩容器：给那个元素加display:flex;那个就是伸缩容器
伸缩项：他的子元素就是伸缩项

在伸缩布局中，默认情况下水平方向是主轴，默认情况下主轴的起点在伸缩容器的左边，默认情况下所有的伸缩项时从主轴的起点开始的，但是可以通过属性来修改主轴的起点位置
flex-direction:用于修改主轴起点的位置;
----参数：
1、flex-direction:row:起点在伸缩容器的最左边，终点在伸缩容器的最右边，从左到右排版
2、flex-direction:row-reverse;从右到左排版

网页排版布局方法加伸缩布局
3、flex-direction:column;（列）把主轴的起点改为上 从上到下
网页排版布局方法加伸缩布局

4.flex-direction:column-reverse;把主轴的起点改为下 从下到上
网页排版布局方法加伸缩布局

  • 注意点：
    在伸缩布局中主轴和侧轴都是十字交叉的，只要主轴的方向发生变化，侧轴也会发生变化
    ####主轴对齐方式（x先排版在对齐）
  • 格式：
    justify-content: flex-start;主轴上伸缩项对齐默认值
    ----参数：
    1、flex-start和主轴的起点对齐
    网页排版布局方法加伸缩布局

2、flex-end和主轴的终点对齐

网页排版布局方法加伸缩布局
3.center和主轴的中点对齐

网页排版布局方法加伸缩布局
4、space-between；两端对齐
网页排版布局方法加伸缩布局

5.space-around；
网页排版布局方法加伸缩布局

ul{
width: 600px;
list-style: none;
border: 1px solid #000;
margin: 200px auto;
display: flex;
/告诉浏览器主轴的起点在伸缩容器的最左边，告诉浏览器从左到右排版/
flex-direction: row;
/告诉浏览器排版好的伸缩项和主轴的起点对齐/
justify-content: flex-start;
}

####侧轴的对齐方式

  • 格式
    align-items: flex-end;

网页排版布局方法加伸缩布局
flex-start和侧轴的起点对齐
----注意点：
没有两端对齐和环绕对齐
**align-items:baseline;**基线对齐 让所有所以伸缩项中的基线在一条直线上对齐

网页排版布局方法加伸缩布局
align-items:stretch;拉伸/等高对齐
-----让所有的伸缩项的高度变为侧轴的高度

  • 注意点
    如果需要设置拉伸对齐，那么伸缩项不能设置高度
    如果设置了高度，那么拉伸对齐就会失效
    网页排版布局方法加伸缩布局

######如果在伸缩容器中通过align-items：来控制伸缩项的对齐方式，是一次性控制所有伸缩项的对齐方式 如果想单独的控制某一个伸缩项在侧轴上的对齐方式，那么需要将控制对齐的方式的属性写道伸缩项中
align-items:写到伸缩容器中/控制所有伸缩项
align-self:写到伸缩项中/控制编写对应代码的那个伸缩项中
两个取值一样只是控制的范围不一样
默认情况下如果伸缩容器的一行放不下所有的伸缩项，那么系统会自动等比压缩所有的伸缩项
flex-wrap:nowrap;在伸缩容器中有一个flex-wrap属性，专门用于控制放不下是否需要换行的
flex-wrap:nowrap;不换行
flex-wrap:wrap;换行
flex-wrap:wrap-reverse;换行反转
#####换行对齐方式
align-content:;是专门用于设置换行之后的对齐方式的
—取值；
flex-start；换行之后和侧轴的起点对齐，一行接一行
flex-endt;换行之后和侧轴的终点对齐，将所有换行之后的内容当作一个整体来操作
center换行之后和侧轴的中点对齐
space-between换了之后在侧轴上两端对齐
space-around每一行上下都有空间
stretch以行为单位进行拉伸，拉伸的部分以空白填充，保证拉伸之后所有的行加起来能够填满侧轴，

  • 注意：
    伸缩项的排序问题默认情况下每一个伸缩项都有一个order属性，用于决定排序的先后顺序
    默认0 从小到大排序
  • 给伸缩项里面加’’'order:值；
    #####伸缩项扩充问题:
    flex-grow：值；用来控制当所有伸缩项的宽度综合小于伸缩容器宽度的时候如何扩充自己，以使所有伸缩像宽度的综合能够填满伸缩容器默认为0 表示我们设置的宽度是多少就按多少来显示，不进行任何扩充
    只有当所有伸缩项的宽度小于伸缩容器的宽度的时候flex-grow才有效
    -----扩充公式
    1、伸缩容器宽度-所有伸缩项的宽度=剩余空间
    2、利用剩余空间除以所有需要扩充分数的总和（例如给不同的伸缩项设置不同的值然后加起来）
    3、利用当前伸缩项的宽度+需要的份数
    本来宽度100 扩充n
    100+（2）计算的值乘以n
    ####伸缩项缩小：伸缩容器小于伸缩项总和
    flex-shrink:值；用来控制当所有伸缩项的宽度综合大于伸缩容器宽度的时候如何缩小自己，以便于所有伸缩项宽度的总和能够填满整个伸缩容器
    默认情况下取值为1，表示当所有伸缩项宽度的总和大于伸缩容器的宽度的时候等比缩小自己
    注意点：
    只有当所有伸缩项的宽度综合大于伸缩容器宽度的时候才有效
    -----缩小公式
    1、利用所以伸缩项的宽度总和-伸缩容器的宽度=溢出的宽度
    2、计算权重值
    利用每一个伸缩项需要的份数当前伸缩项的宽度，然后再相加
    3、计算每个伸缩项需要缩小的宽度
    （溢出的宽度    当前伸缩项的宽度*当前伸缩项需要的份数）/权重值
    ###伸缩布局–宽度设置
    flex-basis:100px;给伸缩项设置宽度比width的优先级高
    #####伸缩项属性连写
    flex：扩充 缩小 宽度;

相关推荐