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. HTTP完整请求过程

    重要申明:感谢原文作者——沐风的心,想看原文请戳这里!我借鉴了原文的页面请求流程,原文见时序图之后正文. 重要申明:感谢原文作者——一行两行,想看原文请戳这里!我借鉴了原文的完整HTTP请求流程. 增 ...

  2. SSM框架文件远程服务器下载

    1.首先你必须要建立连接 获取URL的输入流 2.之后就是文件读取和写入了 3.还有就是设置响应头,响应码等 代码 @RequestMapping("/fileDownLoad") ...

  3. Java关闭钩子的应用 - Shutdown Hook

    背景 在开发中,遇到这种情况,多个线程同时工作,突然一个线程遇到了fetal的错误,需要立即终止程序,等人工排查解决了问题之后重新启动.但是这样会有一个问题,程序终止时,其他线程可能正在进行重要操作, ...

  4. php中模糊查询并关联三个select框

    1.在php中我们经常用到下拉框,并相互关联,如果下拉框的option非常多,那么我们就要用到模糊搜索功能,那么怎么做呢? 在此功能中,走了弯路,最好不要关联两个select的id值后select属性 ...

  5. JavaScript高级编程———数据存储（cookie、WebStorage）

    JavaScript高级编程———数据存储(cookie.WebStorage) <script> /*Cookie 读写删 CookieUtil.get()方法根据cookie的名称获取 ...

  6. csharp: datatable get Column datatype or Column Name

    /// <summary> ///列表名 /// </summary> /// <param name="table"></param&g ...

  7. PHP array_flip() array_merge() array+array的使用总结

    array_flip(array); //传递一个数组参数,对该数组的键.值进行翻转 例如: $a = array( 'a', 'b', 'c' ); print_r(array_flip($a)); ...

  8. 纯C语言跑分（详细注释）

    #include <stdio.h> #include <time.h>//clock()所属头文件 ;//快排的数据规模 ,N=;//整点.浮点运算的规模 ;//计算圆周率的 ...

  9. Vue.js双向绑定原理

    Vue.js最核心的功能有两个,一个是响应式的数据绑定系统,另一个是组件系统.本文仅仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化的代码实现一个简单的hello world示例. 一.访问器属 ...

  10. C/C++面试问题分类大汇总 ZZ 【C++】

    http://www.mianwww.com/html/2014/05/21208.html 指针和引用的区别 指针指向一块内存,它的内容是指向内存的地址:引用是某内存的别名 引用使用是无需解引用,指 ...