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 ...
随机推荐
- JS中通过url动态获取图片大小的方法小结(两种方法)
很多时候再项目中,我们往往需要先获取图片的大小再加载图片,但是某些特定场景,如用过cocos2d-js的人都知道,在它那里只能按比例缩放大小,是无法设置指定大小的图片的,这就是cocos2d-js 的 ...
- 如何基于Django中的WebSockets和异步视图来实现实时通信功能
本文分享自华为云社区<结合Django中的WebSockets和异步视图实现实时通信功能的完整指南>,作者: 柠檬味拥抱. 在现代Web应用程序中,实时通信已经成为了必不可少的功能之一.无 ...
- 剑指offer05(Java)-替换空格（简单）
题目: 请实现一个函数,把字符串 s 中的每个空格替换成"%20". 示例 1: 输入:s = "We are happy."输出:"We%20are ...
- 重新定义容器化 Serverless 应用的数据访问
简介: 本文首先聚焦到 AI 和大数据等应用 Serverless 化的最大挑战:计算和存储分离架构带来的数据访问延迟和远程拉取数据带宽巨大的挑战.尤其在 GPU 深度学习训练场景中,迭代式的远程读取 ...
- 百万TPS高吞吐、秒级低延迟，阿里搜索离线平台如何实现？
导读:阿里主搜(淘宝天猫搜索)是搜索离线平台非常重要的一个业务,具有数据量大.一对多的表很多.源表的总数多和热点数据等特性.对于将主搜这种逻辑复杂的大数据量应用迁移到搜索离线平台总是不缺少性能的挑战, ...
- Apsara Stack 同行者专刊 | 怀同行之心，筑信任之基，践数智之行
简介: 政企云平台处在怎样的历史阶段?数智创新的同行者们面临着怎样的挑战与机遇?在时代巨幕下,政企期待云厂商扮演怎样的角色?阿里云智能研究员.混合云平台总经理刘国华认为,云厂商不仅需要有定力与实力,也 ...
- SaaS服务的私有化部署，这样做最高效｜云效工程师指北
简介:为了能够有效且高效地同时管理SaaS版本和私有化版本的发布过程,云效团队也结合云原生的基础设施和标准化工具(比如helm)进行了一系列的探索和实践,并将其中一些通能的能力进行了产品化.本文从问 ...
- 如何专业化监控一个Kubernetes集群？
简介: 本文会介绍 Kubernetes 可观测性系统的构建,以及基于阿里云云产品实现 Kubernetes 可观测系统构建的最佳实践. 作者:佳旭 阿里云容器服务技术专家 引言 Kubernetes ...
- dotnet 6 已知问题 ManualResetEventSlim 的 Set 方法抛出空异常
本文记录一个 dotnet 6 已知问题,此问题预计是在 .NET Framework 4.5 时就引入的,我没有考古在 .NET Framework 4.5 之前是否还存在此问题.当前这个问题在 . ...
- （更新中）Python、JavaScript、Java和C++语言的语法对比与梳理
目录 引言 1. 构造函数 Python JavaScript Java C++ 2. 构造类 Python JavaScript Java C++ 3. 总结 引言 在开发过程中不免需要用到多种编程 ...