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. Xtrabackup 增量备份 和 增量还原

    目录 测试数据准备 进行全量备份 第一次增量插入一条数据 进行第一次增量备份 注意 第二次增量插入一条数据 进行第二次增量备份 注意 查看xtrabackup_binlog_info中的binlog位 ...

  2. 升级Xcode7&iOS9后，出现NSURLSession/NSURLConnection HTTP load failed (kCFStreamErrorDomainSSL, -980X)

    在info.plist里面添加如下内容即可: <key>NSAppTransportSecurity</key> <dict> <key>NSAllow ...

  3. 《Windows内核安全与驱动开发》4.1 文件操作

    <Windows内核安全与驱动开发>阅读笔记 -- 索引目录 <Windows内核安全与驱动开发>4.1 文件操作 从 C:\a.txt 中读取一部分内容并利用 DbgPrin ...

  4. pod install速度慢解决方案

    相信大家已经感受到pod install速度越来越慢了,网上提供了几种解决方案,但是都没有完全解决速度慢的问题. 使用国内镜像的Specs 在pod install时使用命令pod install - ...

  5. 如何在DevOps中实施连续测试

    在过去的十年中,对软件开发的需求已急剧发展.软件已成为公司获得竞争优势的关键优势,特别是如果您的公司属于SaaS范畴.通过在SDLC中实施瀑布等传统流程,组织现在正在向敏捷过渡,以便以更快的速度在市场 ...

  6. 编译安装nginx时配置开机自启

    详细编译安装nginx请参考[Nginx目录结构与配置文件详解]以及[Nginx安装部署],在这里就进行简单安装 安装Nginx 环境介绍 操作系统: [root@localhost ~]# cat ...

  7. Linux中Postfix反病毒和垃圾邮件（十）

    amavisd-new amavisd-new呼叫器是一个连接MTA和内容检测工具(诸如病毒扫描工具和SpamAssassin)的高性能接口程序,使用perl语言写成.它一般通过SMTP.ESMTP或 ...

  8. 每周一练 之 数据结构与算法（LinkedList）

    这是第三周的练习题,原本应该先发第二周的,因为周末的时候,我的母亲大人来看望她的宝贝儿子,哈哈,我得带她看看厦门这座美丽的城市呀. 这两天我抓紧整理下第二周的题目和答案,下面我把之前的也列出来: 1. ...

  9. 【Redis】270- 你需要知道的那些 redis 数据结构

    本文出自「掘金社区」,欢迎戳「阅读原文」链接和作者进行技术交流 ?? 作者简介 世宇,一个喜欢吉他.MDD 摄影.自走棋的工程师,属于饿了么上海物流研发部.目前负责的是网格商圈.代理商基础产线,平时喜 ...

  10. Navicat for mysql 免费破解工具+教程

    转载自:https://blog.csdn.net/BigCabbageFy/article/details/79789833 navicat for mysql带给大家这款高性能数据库管理开发工具的 ...