css页面布局

luqiuwen 发布于2019-08-29 17:27 / 2723人阅读

摘要：回顾复习页面布局三栏布局左右固定中间自适应部分同一如下中间自适应方法一原理利用第一和第二个盒子的左右浮动，使得与第三个盒子在一行缺点当宽度小于时，会繁发生换行以及中间高度大于时，会有两边覆盖其实中间的宽度就是可以利用解决方法二原理利用绝对定

回顾复习css页面布局 三栏布局

左右固定中间自适应：
html部分同一如下

  
  
  
    中间自适应

style方法一：

    div {
      height: 300px;
    }
    .box1 {
      float: left;
      width: 300px;
      background: red;
    }
    .box2 {
      float: right;
      width: 300px;
      background: blue;
    }
    .box3 {
      background: yellow;
    }

原理：利用第一和第二个盒子的左右浮动，使得与第三个盒子在一行
缺点：当宽度小于600px时，会繁发生换行；以及中间高度大于300px时，会有两边覆盖（其实中间的div宽度就是width：100%;可以利用overflow: hidden解决）
style方法二：

    div {
      height: 300px;
    }
    .box1 {

      width: 300px;
      background: red;
      position: absolute;
      left: 0;
    }
    .box2 {
      position: absolute;
      right: 0;
      width: 300px;
      background: blue;
    }
    .box3 {
      background: yellow;
      height: 500px;
      position: absolute;
      left: 300px;
      right: 300px;
    }

原理：利用绝对定位，来实现left=300px; right=300px
优点：当中间自适应的高度大于两边时不会发生重叠；但是当视窗大小小于600px时，中间会发生重叠，不换行
style方法三：

原理：外部flex布局；中间利用flex: 1;即flex-basis： 0宽度中间取其容器最大
优点：自适应强，宽度小于600时，会缩小两边宽度；
缺点：低版本浏览器对flex兼容性不好；
style方法四：

    .wrap {
      display: table;
      width: 100%;
    }
    .box {
      height: 300px;
      display: table-cell;
    }
    .box1 {
      width: 300px;
      background: red;
    }
    .box2 {

      width: 300px;
      background: blue;
    }
    .box3 {
      background: yellow;
      height: 300px;
    }

原理：利用table布局，来达到自使用，外部divwidth：100%，不然无法填充
优点：自适应强
缺点：中间高度改变会影响两边
style方法五：

    .wrap {
      display: grid;
      width: 100%;
      grid-template-rows: 100px;
      grid-template-columns: 300px auto 300px;
      
    }
    .box1 {
      background: red;
    }
    .box2 {
      background: yellow;
    }
    .box3 {
      background: blue;
    }

原理：利用网格布局
优点：编写简单，自适应较强

两栏布局：

同理上面的·方法：
方法一网格布局：

    .wrap {
      display: grid;
      grid-template-rows: 100px;
      grid-template-columns: 100px auto
      
    }
    .box1 {
      background: red;
    }
    .box2 {
      background: yellow;
    }
    .box3 {
      background: blue;
      /* height: 500px; */
    }

方法二table布局

    .wrap {
      display: table;
      width: 100%;
    }
    .box {
      display: table-cell
    }
    .box1 {
      width: 100px;
      background: red;
    }

    .box2 {
      background: blue;
    }

方法三flex布局

    .wrap {
      display: flex;
    }

    .box1 {
      width: 100px;
      background: red;
    }

    .box2 {
      background: blue;
      flex: 1;
    }

方法四绝对定位

    .box1 {
      width: 300px;
      position: absolute;
      left: 0;
      background: red;
      height: 100px;
    }

    .box2 {
      background: blue;
      position: absolute;
      left: 300px;
      right: 0;
    }

方法五浮动布局：

    .box1 {
      width: 300px;
      float: left;
      background: red;
      height: 100px;
    }

    .box2 {
      background: blue;
      /* overflow: hidden; */
    }

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114335.html

H5多列布局

摘要：多列布局基本概念多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。在网页制作时采用层叠样式表技术，可以有效地对页面的布局字体颜色背景和其它效果实现更加精确的控制。多列布局基本概念 1、多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。 2、跨列属性可以控制横跨列的数量 /*列数*/ -webkit-column-count: 3; /*分割线*/ -webkit...

Jingbin_ 2019-08-29 16:15 评论0 收藏0
H5多列布局

摘要：多列布局基本概念多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。在网页制作时采用层叠样式表技术，可以有效地对页面的布局字体颜色背景和其它效果实现更加精确的控制。多列布局基本概念 1、多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。 2、跨列属性可以控制横跨列的数量 /*列数*/ -webkit-column-count: 3; /*分割线*/ -webkit...

mayaohua 2019-08-02 11:08 评论0 收藏0
CSS及布局

摘要：经过半年的打磨，正式发布，主要是新增了一些常用组件，并使用命名，为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看...

jaysun 2019-08-29 14:04 评论0 收藏0
移动端布局与适配

摘要：实战之微信钱包腾讯服务界面网格布局是让开发人员设计一个网格并将内容放在这些网格内。对于移动端适配，不同的公司不同的团队有不同的解决方案。栅格系统用于处理页面多终端适配的问题。 grid实战之微信钱包腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格，实际上是你将一个元素声明为一个网格容器，并把元素内容置于网格中。移动端页面适配—...

Clect 2019-08-29 14:08 评论0 收藏0
CSS 常用布局在小程序中的应用

摘要：常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。具体实现，可以使用微信小程序的单位，以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用所有css布局的根本都是3个基本概念：定位、浮动、外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。正常文...

garfileo 2019-08-30 11:25 评论0 收藏0
CSS 常用布局在小程序中的应用

摘要：常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。具体实现，可以使用微信小程序的单位，以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用所有css布局的根本都是3个基本概念：定位、浮动、外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。正常文...

CoderDock 2019-08-30 15:44 评论0 收藏0