1、table方式布局

效果图：

直接用table等标签布局,table布局自动垂直居中

亦可用 display:table == <table>、display:table-cell == <td>等css属性代替table标签的效果

代码示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

</head>

<style>

    .main{

        width:200px;

        height:100px;

    }

    .left{

        background-color:lightsalmon;

    }

    .right{

        background-color:lightskyblue;

    }

</style>

<body>

    <table class="main">

        <tbody>

            <tr>

                <td class="left">1</td>

                <td class="right">2</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

2、经典的盒子模型

百度百科的经典图：

通过控制div等盒子的margin(外边距)，padding(内填充)，border(边框)，width(宽)，height(长)等数据构造合适的布局

3、flex布局

推荐阮一峰老师的flex教程

弹性盒子，顾名思义宽和高是有弹性的，会自适应（不设置宽高会自动填充）

效果图：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

</head>

<style>

    .main{

        display:flex;

        width:300px;

        height:100px;

        /* 排列方向  flex-direction

        row：从左到右 row-reverse:从右到左

        column:从上到下 column-reverse:从下到上

        */

        flex-direction: row;

        /* 换行 flex-wrap

        nowrap:(默认) 不换行

        wrap: 换行 第一行在上

        wrap-reverse: 换行 第一行在下

         */

        flex-wrap: nowrap;

        /* flex-flow 是 flex-direction 和 flex-wrap 的简写

        模板为 flex-flow: <flex-direction> || <flex-wrap>

         */

         /* 主轴上的对齐方式 justify-content

         flex-start:(默认)左对齐

         flex-end:右对齐

         center:居中

         space-between:两端对齐，项目之间间隔相等

         space-around:每个项目之间两侧的间隔都相等

          */

          justify-content: space-between;

          /* 交叉轴上对齐 align-items

          flex-start:交叉轴起点对齐

          flex-end:交叉轴终点对齐

          center:交叉轴中点对齐

          baseline:项目的第一行文字对齐

          stretch:(默认)如果项目未设置高度或auto，将占满整个容器的高度

           */

           align-items:center;

           /* align-content 定义多根轴线的对齐方式 */

    }

    .left{

        width:50px;

        background-color:lightsalmon;

    }

    .contain{

        width:50px;

        background-color:lightskyblue;

    }

    .right{

        width:50px;

        background-color:lightgreen;

    }

</style>

<body>

    <div class="main">

        <div class="left">1</div>

        <div class="contain">2</div>

        <div class="right">3</div>

    </div>

</body>

</html>

除了盒子整体的属性外，可以给盒子里的每个项目设置具体的属性

  • order: integer || 0，数值越小，排列越靠前，默认为0
  • flex-grow: number || 0，定义项目的放大比例，默认为0
  • flex-shrink:number || 1，定义项目中的缩小比例，默认为1
  • flex-basis: length || auto，定义了在分配多余空间之前，项目占据的主轴空间（main size）
  • flex： flex-grow flex-shrink ? || flex-basis //定义三个属性的简写
  • align-self 设置单个项目与其他项目不一样的对齐方式，默认继承父元素的继承方式

关于css布局的记录(一) --table和flex布局的更多相关文章

  1. CSS Flex布局整理

    Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...

  2. CSS Flex布局属性整理

    Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...

  3. FreeMusic项目优化（一）——flex布局学习记录

    参考博客:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html flex布局是w3c于09年提出的,用于简便,整洁,响应式地解决布局问题的手 ...

  4. CSS布局之Flex布局

    Flex布局,可以简便.完整.响应式地实现各种页面布局. 浏览器支持:得到所有浏览器的支持.(注:Flex布局将成为未来布局的首选方案)   一. Flex布局的概念 Flex是Flexible Bo ...

  5. CSS学习笔记：flex布局

    目录 一.Flex布局简介 1. Flex布局的主要作用 2. Flex布局应用场景 二.Flex布局的使用 1. Flex布局的两种相关元素 2. 父项属性 2.1 flex- direction ...

  6. 一劳永逸的搞定 flex 布局

    一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮, ...

  7. 今天学习了flex布局

    前言:这个网站详细讲了水平.垂直.水平垂直的css方法.https://css-tricks.com/centering-css-complete-guide/ 布局的传统解决方案,基于盒状模型,依赖 ...

  8. 1.display:flex布局笔记

    /*display:flex布局方式主要运用于垂直居中的效果*/ 一.Flex译为Flexible Box(弹性盒子),任何一个容器都可以指定为Flex布局 注:设置为Flex布局之后,子元素的flo ...

  9. CSS3 Flex布局整理(一)

    一.说明 1.在以往的布局方案中,都是基于盒装模型,依赖display属性+position属性+float属性等. 他对于那些特殊布局非常不方便,比如,垂直居中等. 并且不同浏览器的盒模型还有些差异 ...

随机推荐

  1. CentOS 7 Cobbler 安装

    Cobbler介绍 Cobbler是一个Linux服务器快速网络安装的服务,而且在经过调整也可以支持网络安装windows. 使用python开发,小巧轻便(才15k行python代码),可以通过网络 ...

  2. python中的局部变量和全局变量

  3. 第四章 开始Unity Shader学习之旅（1）

    1. 一个最简单的顶点/片元着色器 现在,我们正式开始学习如何编写Unity Shader,更准确的说是,学习如何编写顶点/片元着色器 2.顶点/片元着色器的基本结构 我们在以前已经讲过了Unity ...

  4. Spring之junit测试集成

    简介 Spring提供spring-test-5.2.1.RELEASE.jar 可以整合junit. 优势:可以简化测试代码(不需要手动创建上下文,即手动创建spring容器) 使用spring和j ...

  5. 前端js，如何在结构化与性能中做取舍。

    js发展中的问题 随着前端web技术的发展,js要解决的问题也变得越来越多,越来越复杂. 解决更复杂的问题,需要更好的结构. 解决更复杂的问题,也需要更好的性能. 结构的优化在一定程度上会牺牲性能,同 ...

  6. Seata AT 模式启动源码分析

    从上一篇文章「分布式事务中间件Seata的设计原理」讲了下 Seata AT 模式的一些设计原理,从中也知道了 AT 模式的三个角色(RM.TM.TC),接下来我会更新 Seata 源码分析系列文章. ...

  7. HTML <input> placeholder 属性

    css ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909; } :-moz-placeholder { /* Mo ...

  8. openlayers5-webpack 入门开发系列结合 echarts4 实现散点图(附源码下载)

    前言 openlayers5-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载 ...

  9. LNMP架构的搭建

    第9章 LNMP架构的搭建 9.1 什么是LNMP 9.1.1 LNMP的组成 L                linux N                nginx:实现静态的服务处理 M    ...

  10. 【JS】368- 浅析JavaScript异步

    一直以来都知道 JavaScript是一门单线程语言,在笔试过程中不断的遇到一些输出结果的问题,考量的是对异步编程掌握情况.一般被问到异步的时候脑子里第一反应就是 Ajax, setTimseout. ...