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. ASP.NET 解决在点击Button执行服务器事件之前验证用户输入并阻塞

    在网站项目开发时,为了减少用户的错误性的操作,很多时候我们都需要做一些必要的JS验证来提醒用户,比如:“输入的值不符合规则,请重新输入”.“提交后无法修改,您确定要继续吗?”友好性的提示. 这时候我们 ...

  2. js中数组, JSON的与字符串的处理

    1. JSON转字符串 var jsonStr = {"name": "xiaoming", "sex": "男"} J ...

  3. linux环境下mysql 5.7.1X 如何重置root密码

    1,vi  /etc/my.cnf [mysqld]下加入参数skip-grant-tables   保存退出. 2,重启mysql [root@21yunwei src]# /etc/init.d/ ...

  4. 在弹框中获取foreach中遍历的id值，并传递给地址栏（方法2）

    1.php有时候我们需要再弹框中获取foreach中遍历的数据(例如id),在弹框中点击按钮并传递给地址栏跳转.那么应该怎么做呢.第二种方法. 2. 可以在弹框中给出一个input hidden 点击 ...

  5. javascript变量的引用类型值

    JavaScript变量可以用来保存俩种类型的值:基本类型和引用类型值 前言 JS变量可以用来保存两种类型的值:基本类型值和引用类型值.基本类型的值源自一下5种基本数据类型:Underfined.Nu ...

  6. JSON运用——PHP中使用json数据格式定义字面量对象的方法

    目前,在PHP中是不支持字面量命名法. 前端的小伙伴都知道,在JS中用字面量定义一个对象的方法可以如下: var o = { 'name' : 'Tom' , 'url' : 'www.baidu.c ...

  7. 一行代码解决各种IE的兼容问题

    一行代码解决各种IE的兼容问题  在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 < ...

  8. [算法练习]Add Two Numbers

    题目说明: You are given two linked lists representing two non-negative numbers. The digits are stored in ...

  9. 【tips】编译epic异常解决

    目标:编译 epic 异常信息一: No CMAKE_C_COMPILER could be found.  No CMAKE_CXX_COMPILER could be found.   解决方法: ...

  10. centos下运行python3.6+Django+mysql项目

    文件准备: Django项目 myslq安装 关闭防火墙 用xshell拖拽到centos上 安装文件: 安装python3.6(3.7有问题) sh install_py36.sh 关闭防火墙 sh ...