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. OSI-传输层

    OSI-传输层 端口号(2字节 SYN(1bit) ACK(1bit) 会话多路复用(为什么一个IP地址可以做很多事情?) 源端口地址可以不同 五元组(世界上没有相同的2个五元组) 源IP地址-目的I ...

  2. 构建一个flink程序,从kafka读取然后写入MYSQL

    最近flink已经变得比较流行了,所以大家要了解flink并且使用flink.现在最流行的实时计算应该就是flink了,它具有了流计算和批处理功能.它可以处理有界数据和无界数据,也就是可以处理永远生产 ...

  3. 通过哪吒动漫豆瓣影评，带你分析python爬虫与BeautifulSoup快速入门【华为云技术分享】

    久旱逢甘霖 西安连着几天温度排行全国三甲,也许是<哪吒之魔童降世>的剧组买通了老天,从踩着风火轮的小朋友首映开始,就全国性的持续高温,还好今天凌晨的一场暴雨,算是将大家从中暑边缘拯救回来了 ...

  4. 高性能Web动画和渲染原理系列（1）——CSS动画和JS动画

    [摘要] 介绍CSS动画和JS动画的基本特点,以及轻量级动画库velocity.js的基本用法. 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园 ...

  5. 带着canvas去流浪系列之六 绘制雷达图

    [摘要] 用canvas原生API实现百度Echarts基本图表. 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvas ...

  6. Internet History,Technology,and Security - The Web Makes it Easy to Use（Week3）

    时间如白驹过隙,又到了新的一周的慕课学习啦.这周内容较为简单,主要讲述互联网内部的发展状况. The Early World-Wide-Web Getting to the Web 谈到万维网,我们不 ...

  7. 使用ASP.NET Core 3.x 构建 RESTful API - 3.3 状态码、错误/故障、ProblemDetails

    HTTP状态码 HTTP状态码会告诉API的消费者以下事情: 请求是否执行成功了 如果请求失败了,那么谁为它负责 HTTP的状态码有很多,但是Web API不一定需要支持所有的状态码.HTTP状态码一 ...

  8. 使用dva改造旧项目的数据流方案

     前言 最近在给自己的脚手架项目转到TypeScript时,遇到了一些麻烦. 项目之前采用的是react + react-redux + redux-thunk + redux-actions +re ...

  9. BOM对象中的常用方法

    先看body中的内容: <body οnlοad="demo1()"> <p> <input type="button" id=& ...

  10. Docker系列-(2) 镜像制作与发布

    上篇文章引入了Docker的基本原理和操作,本节文章主要介绍如何制作Docker镜像和发布. 镜像文件结构 Docker镜像的本质是一系列文件的集合,这些文件依次叠加,形成了最后的镜像文件,类似于下图 ...