前端攻城狮---css3布局(1)

编程语言 2018-09-04 22:11:15 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/gaoyouhuang/article/details/82154885

本章节主要讲解css3的一些布局，如百分比布局，弹性盒子模型。

百分比布局

名字就表示这使用方法。百分比布局可以来作为适配方案，因为不需要给视图设置绝对的高宽，参照父视图的高宽的百分比去动态的适配。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        section {
            width: 80%;
            height: 200px;
            margin: 100px auto;
            border: 1px solid red;
        }

        section div {
            width: 33.33%;
            height: 100%;
            float: left;
        }

        section div:nth-child(1) {
            background-color: blue;
        }

        section div:nth-child(2) {
            background-color: orange;
        }

        section div:nth-child(3) {
            background-color: plum;
        }
    </style>
</head>
<body>
   <section>
       <div></div>
       <div></div>
       <div></div>
   </section> 
</body>
</html>

将像上述demo一样，三个div的宽度表示父视图的百分之33.3也就是三分之一，所以不论屏幕有多宽多小，他们的宽度永远都是三分之一。

伸缩布局（弹性盒子模型）

其实伸缩布局就是flex布局。

具体使用就是让父视图设置display:flex。  我们慢慢来解析配合display:flex属性的其他属性

flex:num

用于孩子，表示权重

  <style>
        section {
            width: 80%;
            height: 200px;
            margin: 100px auto;
            border: 1px solid red;
            /* 对父盒子设置flex 伸缩布局模式 这个盒子具有弹性*/
            display: flex;
        }
        section div {
            height: 100%;
        }
        section div:nth-child(1) {
            background-color: blue;
            flex:1;
        }
        section div:nth-child(2) {
            background-color: orange;
            flex: 2;
        }
        section div:nth-child(3) {
            background-color: plum;
            flex: 1;/* 设置子元素占的份数*/
        }
        section div:nth-child(4) {
            background-color: black;
            flex: 1;/* 设置子元素占的份数*/
        }
    </style>
</head>
<body>
   <section>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
   </section> 
</body>

因为div的高度是设置了，那么flex会去影响div的宽度。四个孩子的flex之和为5,第一个div的flex占总的五分之一，那么宽度就是父亲的五分之一，第二个div则占父亲的五分之二，第三个就是五分之一，第四个孩子就是五分之一。

同样的，我们也可以使用flex去给视图做自适应高宽度。就是通过flex，想让flex影响高度，那么高度就不需要设，想影响宽度，那么宽度就不需要设置。

若孩子中有视图是固定宽度，那么flex将会怎么影响呢？我们来把样式改一下

        section div:nth-child(1) {
            background: pink;
            width: 200px;
        }
        section div:nth-child(2) {
            background: purple;
            margin: 0 5px;
            width: 100px;
        }
        section div:nth-child(3) {
            background: skyblue;
            flex: 1;
        }
        section div:nth-child(4) {
            background: yellowgreen;
            flex: 1;
        }

大家可以跑起来看看效果，那么第三个和第四个孩子的宽度其实是父亲的宽度减去固定宽度的孩子的宽度的一半。为什么是一半呢？因为总的flex为2，他们各占二分之一。

也就是说flex的作用的值是父亲的宽度-固定宽度的孩子的宽度。

flex-direction

使用对象父视图，用于改变孩子的排列方向，是水平排列的还是竖直排列的。可以理解为设置父容器的主轴的方向，侧轴与其相反。

有以下几种常用的值

  • row     水平排列(默认)，设置水平方向为主轴，反之侧轴就在垂直方向
  • row-reverse  倒叙的水平排列，设置水平方向为主轴，反之侧轴就在垂直方向
  • column   垂直排列，设置垂直方向为主轴，反之侧轴就在水平方向
  • column-reverse    倒叙的垂直排列，设置垂直方向为主轴 ，反之侧轴就在水平方向

那么我们就可以利用flex来做一个导航栏

导航栏demo

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  	*{
  		margin: 0;
  		padding: 0;
  	}
  	nav{
  		width: 100%;
  		height: 50px;
      border:1px solid black;
      display: flex;
 flex-direction:row-reverse;
  	}
    div{
      flex:1;
      height: 100%;
      background-color: skyblue;
      border: 1px solid white;
      line-height: 50px;
      text-align: center;
    }
  </style>
</head>
<body>
  <nav>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </nav>
</body>

我们可以看到我们设置了row的倒序，结果在后面的排列在了最前面。

justify-content

以下案例是在flex-direction默认值（row水平）的情况下：

  • justify-content描述孩子在父容器设置了主轴方向上的排列方式。
  • 此时flex-direction反方向也就是column，有align-items决定默认是是flex-start，效果就是紧贴父亲的上边缘（后面会讲解）

一共有5中取值。

    flex-start 紧贴着父亲的左边，孩子之间不留空

    flex-end 紧贴着附近的右边，孩子之间不留空

    center 水平方向上居中，孩子之间不留空

    space-between 个个孩子之间留空

    space-around 个个孩子的前面，后面和间隔都留空

咱们现附上基础代码，然后修改justify-content的值的效果图，一目了然。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
         div {
             width: 250px;
             height: 100px;
         }
         section {
             width: 800px;
             height: 200px;
             margin: 100px auto;
             border: 1px solid #ccc;
             display: flex;
             justify-content: flex-start;
         }
         div:nth-child(1) {
             background-color: red;
         }
         div:nth-child(2) {
             background-color: green;
         }
         div:nth-child(3) {
             background-color: blue;
         }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>
</html>
flex-start
flex-end
center
space-around
space-between

 order

用于表示flex布局中，孩子排列的先后顺序，越大则在后面。

大家可以在上诉的案例中，加入order的值，不同的值会改变div显示的位置。

align-items

以下案例是在flex-direction默认值（row水平）的情况下：

  • align-items描述孩子在父容器设置的侧轴上的排列方式。
  • 此时flex-direction方向也就是row默认是flex-start，紧贴父亲的左边。

一共有4个值

    flex-start 表示在竖直方向的最顶上

    flex-end 表示在竖直方向的最底下

    center 表示竖直方向的居中

    stretch 表示子元素不设置高度的前提下，撑满父元素的高度。

咱们现附上基础代码，然后修改align-items的值的效果图，一目了然。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
         div {
             width: 250px;
             /* height: 100px; */
         }
         section {
             width: 1000px;
             height: 600px;
             margin: 100px auto;
             border: 1px solid #ccc;
             display: flex;
             align-items: stretch;
         }
		 div{
		 	width: 50px;
		 	height: 50px;
		 }
         div:nth-child(1) {
             background-color: red;
         }
         div:nth-child(2) {
             background-color: green;
         }
         div:nth-child(3) {
             background-color: blue;
         }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>
</html>
flex-start
flex-end
center

把div的高宽去掉，stretch才能效果

stretch

来一个分割线表强调，我们我们在讲解justify-content和align-items的时候，强调了flex-direction属性？还强调在默认情况下（row）的效果？

我们不妨把justify-content的案例里面给section添加flex-direction：column；为了使效果更加明显，我们把section的height：500px，justify-content：space-around。那么我们来看看效果图

是不是发现方向不对？上面的案例方向是水平的，为什么这里就是竖直的？这就和我们强调的flex-direction有关。

justify-content的方向和flex-direction的方向一致，因为上一个案例中flex-direction是默认的值也就是row，所以是水平的，这里我们这是了column，所以就作用到竖直方向。align-items同理。

若flex-direction：row

      justify-content作用的是水平方向的

      align-items作用的是竖直方向

若flex-direction：column

      justify-content作用的是竖直方向的

      align-items作用的是水平方向

也就是说align-items的作用方向是侧轴的方向，justify-content的作用的方向是主轴的

flex-wrap

在默认的flex-direction（row）的情况下分析

用于控制，当孩子在水平排列与父亲将要超出父亲的宽度时，是否换行还是强制一行显示。

flex-wrap有两个属性：nowrap（不换行，强制一行显示） wrap（换行）

wrap
nowrap

再附上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
         div {
             width: 250px;
             height: 100px;
         }
         section {
             width: 1000px;
             height: 400px;
             margin: 100px auto;
             border: 1px solid #ccc;
             display: flex;
             justify-content: space-around;
             flex-wrap: nowrap;
         }

         div:nth-child(1) {
             background-color: red;
         }

         div:nth-child(2) {
             background-color: green;
         }

         div:nth-child(3) {
             background-color: blue;
         }

         div:nth-child(4) {
             background-color: pink;
         }

         div:nth-child(5) {
             background-color: navy;
         }

         div:nth-child(6) {
             background-color: navy;
         }

         div:nth-child(7) {
             background-color: navy;
         }

         div:nth-child(8) {
             background-color: navy;
         }

         div:nth-child(9) {
             background-color: navy;
         }

         div:nth-child(10) {
             background-color: navy;
         }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>
</html>

align-self

表示子视图单独的在侧轴上的排列位置。

有以下取值

      stretch：不设置高/宽的时候，高/宽有撑满父元素。

      flex-start：表示在侧轴方向上，容器的开头。

      flex-end：表示在侧轴方向上，容器的末尾。

      baseline：位于容器的基线上。

      center：表示在侧轴方向上居中。

效果图如上，就是给第二个div设置了align-self:flex-end。

由于篇幅有限在css3布局(2)中还会介绍其他布局，若表达有误请指出，望共同进步。

猜你喜欢

转载自blog.csdn.net/gaoyouhuang/article/details/82154885
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022