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. 移动端touch滑动事件监听

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 静态链表-C语言实现

    1.静态链表是在没有指针的编程语言里对链表的一种实现2.主要是用数组模拟指针3.在这里,使用结构体使数组的每一个空间可以存储一个数据元素(date)和一个游标(cur),游标的作用相当于链表的指针域, ...

  3. Spring 核心技术与产品理念剖析（上）

    IT 技术发展太快了,就像浪潮一样一波接着一波,朝你迎面扑来,稍不留神就会被巨浪卷至海底而不得翻身.我们必须要学会抓住那些不变的本质或规律,只有这样才能屹立潮头而不倒,乘风破浪,做这个巨变时代的弄潮儿 ...

  4. Tensorflow搭建CNN实现验证码识别

    完整代码:GitHub 我的简书:Awesome_Tang的简书 整个项目代码分为三部分: Generrate_Captcha: 生成验证码图片(训练集,验证集和测试集): 读取图片数据和标签(标签即 ...

  5. ajax请求成功，状态却是200

    AJAX状态为200,这类状态代码表明服务器成功地接受了客户端请求.简单的来说成功发送一个AJAX请求,但是就是不进入success事件,进入error事件. $.ajax({ type:'POST' ...

  6. javascript基础修炼(13)——记一道有趣的JS脑洞练习题【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...

  7. 在modelarts上部署backend为TensorFlow的keras模型

    最近老山在研究在modelarts上部署mask-rcnn,源代码提供的是keras模型.我们可以将keras转化成savedModel模型,在TensorFlow Serving上部署,可参考老山的 ...

  8. 小白学 Python 爬虫（15）：urllib 基础使用（五）

    人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...

  9. 用C在GBA上写光线追踪（0）配置开发编译环境

    前段时间用C#写了一个光线追踪程序,可以渲染圆球,平面这种基本图形,反射,光照,阴影,都大致尝试做了一下. ↑ C#实现的光线追踪     ↑ GBA上C实现的光线追踪 然而,在我打算继续深入优化的时 ...

  10. 上手spring boot项目（一）之如何在controller类中返回到页面

    题记:在学习了springboot和thymeleaf之后,想完成一个项目练练手,于是使用springboot+mybatis和thymeleaf完成一个博客系统,在完成的过程中出现的一些问题,将这些 ...