1、圣杯布局（Holy Grail Layout）

其指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。

2、输入框布局

3、悬挂布局

4、固定的底栏

有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。

vh单位:vh等于viewport高度的1/100.例如，如果浏览器的高是900px,1vh求得的值为9px。同理，如果显示窗口宽度为750px,1vw求得的值为7.5px。

代码及详解参考：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

【CSS-flex】圣杯布局（Holy Grail Layout）、输入框的布局、悬挂式布局、固定的底栏的更多相关文章

  1. Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单

    代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...

  2. 轻轻松松学CSS:Flex布局

     Flex布局就是"弹性布局",它可以简便.完整.响应式地实现各种页面布局.引入弹性布局的目的,当页面需要适应不同的屏幕大小确保元素拥有恰当的布局方式,对一个容器中的子元素进行排列 ...

  3. Android 布局学习之——Layout(布局)具体解释二（常见布局和布局參数）

     [Android布局学习系列]   1.Android 布局学习之--Layout(布局)具体解释一   2.Android 布局学习之--Layout(布局)具体解释二(常见布局和布局參数)   ...

  4. Android 布局学习之——Layout(布局)详解二（常见布局和布局参数）

    [Android布局学习系列]   1.Android 布局学习之——Layout(布局)详解一   2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)   3.And ...

  5. CSS响应式布局到底是什么？

    响应式布局是最近几年在前端开发中非常火热的词,它是相对于固定像素大小的网页而言的,那么CSS响应式布局到底是什么?顾名思义,响应式布局就是网页能够响应各种各样不同分辨率大小的设备,能够将网页很好的呈献 ...

  6. Android 自定义View修炼-Android中常见的热门标签的流式布局的实现

    一.概述:在日常的app使用中,我们会在android 的app中看见 热门标签等自动换行的流式布局,今天,我们就来看看如何 自定义一个类似热门标签那样的流式布局吧(源码下载在下面最后给出哈) 类似的 ...

  7. 前端框架bootstrap(响应式布局)入门

    Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...

  8. web前端学习（二）html学习笔记部分（9）-- 响应式布局

    1.2.23  响应式布局基础 1.2.23.1  响应式布局介绍 1.响应式布局是2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多终端 -- 而不是为每个终端做一个特定的版本.这个概 ...

  9. 【Win10开发】响应式布局——AdaptiveTrigger

    接触过Windows10的童鞋已经知道Universal app不仅可以运行在pc上,还可以运行在mobile或者其他平台上.那么这样势必会带来一个问题,如何针对不同屏幕来进行布局适配.所以微软提供了 ...

随机推荐

  1. 使用TensorFlow进行中文自然语言处理的情感分析

    1 TensorFlow使用 分析流程: 1.1  使用gensim加载预训练中文分词embedding 加载预训练词向量模型:https://github.com/Embedding/Chinese ...

  2. 使用http维持socket长连接

    项目中有遇到问题如下: 1.旧版的cs服务,因为每个用户和唯一的长连接是在登录后绑定的,并且所有的消息报文均是基于该长连接去发送接收的,所以要求node服务要维持一个长连接,然后根据该用户获取长连接, ...

  3. 对JDK、JRE和JVM的一些浅薄理解

    JDK:JDK(Java Development Kit),顾名思义是java程序的开发包,任何java程序想要运行都需要相应版本的JDK,可以到oracle下载(下载之后自带JRE和编译工具等,无需 ...

  4. MySQL 索引知识总结

    将 mysql 的索引以书本的索引类比比较贴切,要找到一个关键字为xxx 的条目,首先翻到索引中查找有哪些页码涉及到,无疑就缩小了范围.在这个小范围内再寻找符合条件的数据,效率就会提高许多. mysq ...

  5. 创建Web项目运行时出小错误及解决方法

    1.目录结构 2.各文件内容 index.jsp <%@ page contentType="text/html;charset=UTF-8" language=" ...

  6. LeetCode GrayCode

    class Solution { public: vector<int> grayCode(int n) { vector<int> res; res.push_back(); ...

  7. 手写堆优化dijkstra

    \(dijkstra\) 算法的堆优化,时间复杂度为\(O(n+m)\log n\) 添加数组\(id[]\)记录某节点在堆中的位置,可以避免重复入堆从而减小常数 而这一方法需要依托手写堆 #incl ...

  8. Fast Walsh-Hadamard Transform——快速沃尔什变换（二）

    上次的博客有点模糊的说...我把思路和算法实现说一说吧... 思路 关于快速沃尔什变换,为了方便起见,我们采用线性变换(非线性变换不会搞). 那么,就会有一个变化前各数值在变换后各处的系数,即前一篇博 ...

  9. CentOS6.5(3)----设置自己安装的程序开机自动启动

    CentOS6.5系统下设置自己安装的程序开机自动启动 方法1. 把启动程序的命令添加到 /etc/rc.d/rc.local 文件中,比如设置开机启动 mysqld: #!/bin/sh # # T ...

  10. android红米等关于读取本地文件夹图片获取路径的问题的解决

    在Android开发中,有从本地文件夹中读取图片的功能,使用一下代码打开图片选择列表: Intent intent = new Intent();   intent.setAction(Intent. ...