01-布局扩展-BFC完成圣杯布局
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| <style> | |
| *{ | |
| margin:0; | |
| padding:0; | |
| } | |
| body,html{ | |
| height:100%; | |
| } | |
| .left{ | |
| width:200px; | |
| height:100%; | |
| background:blue; | |
| float:left; | |
| } | |
| .center{ | |
| height:100%; | |
| background:orange; | |
| /* 触发BFC */ | |
| overflow:hidden; | |
| } | |
| .right{ | |
| width:200px; | |
| height:100%; | |
| background:green; | |
| float:right; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- 先写左右，后写中间板块 --> | |
| <div class="left"></div> | |
| <div class="right"></div> | |
| <div class="center"></div> | |
| </body> |
01-布局扩展-BFC完成圣杯布局的更多相关文章
- CSS3与页面布局学习总结（四）——页面布局大全BFC、定位、浮动、7种垂直居中方法
目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- css3布局-圣杯布局
圣杯布局he双飞翼布局都是解决两边固定款中间自适应的三栏布局 圣杯布局为了中间div内容不被别的内容覆盖,将中间div设置了左右的内边距后,将左右两个div用相对布局position: relativ ...
- CSS3与页面布局学习总结——多种页面布局
一.负边距与浮动布局 1.1.负边距 所谓负边距就是margin取负值的情况,如margin:-40px:margin-left:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见 ...
- css三列布局之双飞翼pk圣杯
三列布局:两边定宽,中间自适应! 看到这个问题,我第一眼想的就是两边定宽float左右,中间加一个margin宽度自适应或者直接设一个overflow:hidden触发bfc机制,这样也可以,看上去也 ...
- 【CSS】 布局之圣杯布局
在看众多大神的css布局指南时,经常看到一个布局:圣杯布局(也有称为双飞翼布局的).今天我们也来剖析一下. 其实,对于众多css布局,我们只要明确理解了3种技术,那么基本上大多数布局都难不倒我们了: ...
- CSS布局 -- 圣杯布局 & 双飞翼布局
按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...
- CSS布局基础——BFC
what's BFC? 第一次看到这个名词,我是拒绝的,css什么时候还有这个东西?于是迫不及待的google了一下,才发现原来它无时无刻不在我们的css当中,只不过它并不是一个属性,不需要我们平常使 ...
- CSS之圣杯布局与双飞翼布局
圣杯布局 三行等高 HTML: <!DOCTYPE html><html><head> <meta charset="utf-8"& ...
- 【JQuery NoviceToNinja系列】01 开篇 Html页面设计和布局
01 开篇 Html页面设计和布局 index.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml ...
随机推荐
- JavaScript如何判断一个元素是否在可视区域中？
一.用途 可视区域即我们浏览网页的设备肉眼可见的区域,如下图 在日常开发中,我们经常需要判断目标元素是否在视窗之内或者和视窗的距离小于一个值(例如 100 px),从而实现一些常用的功能,例如: 图片 ...
- 云效DevOps实践-如何基于云效实现测试自动化集成和分析
简介: 对于现代软件研发来说,持续.快速.高质量.低风险地交付需求特性,是业务对研发的主要诉求.而要做到这一点,除了要有良好的架构设计.卓越的工程能力,快速可靠的测试反馈也是其非常重要的一环,达到这一 ...
- 双引擎驱动Quick BI十亿数据0.3秒分析，首屏展示时间缩短30%
简介:在规划中,Quick BI制定了产品竞争力建设的三大方向,包括Quick(快)能力.移动端能力和集成能力.针对其中的产品"报表查看打开慢""报表开发数据同步慢&q ...
- 如何快速调度 PTS 的百万并发能力
简介:压测是通过模拟用户行为对业务系统发起请求,测算出系统的承载能力,并对系统做一次全面的体检,压测后可根据压测表现优化系统瓶颈,防止出现线上故障. 作者:灵苒 在实际的业务场景中,压测是必不可少的 ...
- [FE] ServerSideRender 加上 PWA 特性的一种处理方式
SSR 和 PWA 这两块分开讲,需要做不少的处理,现在我们有了一种简便的方式来处理它,就是使用 Quasar 框架. Quasar 支持了 SPA.SSR.PWA.Mobile APP.Electr ...
- WPF 警惕使用 Dispatcher.InvokeShutdown 方法退出应用 将不触发 Application.Exit 事件
这是一个比较让人困惑的一个点,我一直都以为 Dispatcher.InvokeShutdown 和 Application.Current.Shutdown 是完全等价的.但是后面发现了其实这两者还是 ...
- MSSQL—存储过程分页
SET QUOTED_IDENTIFIER ON SET ANSI_NULLS ON GO CREATE PROCEDURE [dbo].[GetPagingStr] @PRESQL VARCHAR( ...
- RT-Thread内存管理
一.内存管理的特点 分配内存的时间必须是确定的.一般内存管理算法是根据需要存储的数据的长度在内存中去寻找一个与这段数据相适应的空闲内存块,然后将数据存储在里面.而寻找这样一个空闲内存块所耗费的时间是不 ...
- 云原生最佳实践系列 6：MSE 云原生网关使用 JWT 进行认证鉴权
01 方案概述 MSE 网关可以为后端服务提供转发路由能力,在此基础上,一些敏感的后端服务需要特定认证授权的用户才能够访问.MSE 云原生网关致力于提供给云上用户体系化的安全解决方案,其中 JWT 认 ...
- ansible系列(22)--ansible的Facts Variables
目录 1 Ansible Facts Variables 1.1 facts的获取方法 1.2 根据主机IP地址生成Redis配置文件 1.3 根据主机CPU核数生成Nginx配置 1.4 根据主机内 ...