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. Coroutines in Android - One Shot and Multiple Values

    Coroutines in Android - One Shot and Multiple Values 在Android中, 我们用到的数据有可能是一次性的, 也有可能是需要多个值的. 本文介绍An ...

  2. WPF 使用Win32API 让控件置于WebBrowser上方

    WPF中Webbrowser控件使用HwndHost所以webbrowser会在所有控件的前方.所以webbrowser会覆盖所有同级的控件. 现在通过使用Win32API 可以避免这个情况. 最主要 ...

  3. ThinkPHP5——route(路由)的详解

    路由在框架中的作用打个比方的话,路由好比是WEB应用的总调度室,对于访问的URL地址,路由可以拒绝或者接受某个URL请求,并进行分发调度,而且还有一个副作用是因为路由规则可以随意定义,因此可以让你的U ...

  4. 使用cookies弹出层每24小时弹出一次

    第一步:下载cookies的库 https://github.com/js-cookie/js-cookie 第二步:设置Cookies的失效时间,这里有两种方法,按天计算和按小时计算 functio ...

  5. 大型情感剧集Selenium：1_介绍 #华为云·寻找黑马程序员#

    学习selenium能做什么? 很多书籍.文章中是这么定义selenium的: Selenium 是开源的自动化测试工具,它主要是用于Web 应用程序的自动化测试,不只局限于此,同时支持所有基于web ...

  6. Xcode10：The operation couldn’t be completed. (DVTCoreSimulatorAdditionsErrorDomain error 0.)

    目录 Xcode10 build success,但是模拟器Simulator不能正常启动,报错如下: 解决方案: Xcode10 build success,但是模拟器Simulator不能正常启动 ...

  7. 大数据之Linux基本指令

    1:文件操作类指令 ls 是英文单词list 的简写, 其功能为列出目录的内容,是最常用的命令之一 -a all 显示指定目录下所有子目录与文件, 包含隐藏文件 -l 以列表方式显示文件的详细信息 - ...

  8. 🔥🔥🔥Spring Cloud进阶篇之Eureka原理分析

    前言 之前写了几篇Spring Cloud的小白教程,相信看过的朋友对Spring Cloud中的一些应用有了简单的了解,写小白篇的目的就是为初学者建立一个基本概念,让初学者在学习的道路上建立一定的基 ...

  9. Zookeeper Watcher接口

    在ZooKeeper中,接口类Watcher用于表示一个标准的事件处理器,其定义了事件通知相关的逻辑,包含KeeperState和EventType两个枚举类,分别代表了通知状态和事件类型,同时定义了 ...

  10. [TimLinux] django context_processor介绍

    1. context django里面 render 函数,HttpResponse,都有一个参数,context={},这个参数用于将视图层处理得到的数据传递到模板层. 2. context_pro ...