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 ...
随机推荐
- python爬虫实战以及数据可视化
需要准备的环境: (1)python3.8 (2)pycharm (3)截取网络请求信息的工具,有很多,百度一种随便用即可. 第一:首先通过python的sqlalchemy模块,来新建一个表. 第二 ...
- 力扣389(java)-找不同（简单）
题目: 给定两个字符串 s 和 t ,它们只包含小写字母. 字符串 t 由字符串 s 随机重排,然后在随机位置添加一个字母. 请找出在 t 中被添加的字母. 示例 1: 输入:s = "ab ...
- 开源 Serverless 里程碑：Knative 1.0 来了
简介:近期Knative发布了1.0版本,达到了一个重要的里程碑.Knative自2018年7月首次发布以来, 版本不断的迭代发展,除了无数的错误修复.稳定性和性能增强之外,按时间顺序还进行了一些改 ...
- 【ClickHouse 技术系列】- ClickHouse 聚合函数和聚合状态
简介:本文翻译自 Altinity 针对 ClickHouse 的系列技术文章.面向联机分析处理(OLAP)的开源分析引擎 ClickHouse,因其优良的查询性能,PB级的数据规模,简单的架构,被国 ...
- Spark 大数据处理最佳实践
开源大数据社区 & 阿里云 EMR 系列直播 第十一期 主题:Spark 大数据处理最佳实践 讲师:简锋,阿里云 EMR 数据开发平台 负责人 内容框架: 大数据概览 如何摆脱技术小白 Spa ...
- .NET周刊【4月第2期 2024-04-21】
国内文章 他来了他来了,.net开源智能家居之苹果HomeKit的c#原生sdk[Homekit.Net]1.0.0发布,快来打造你的私人智能家居吧 https://www.cnblogs.com/h ...
- 数据可视化之pyecharts模块
1.简介 pyecharts 是一个用于生成 Echarts 图表的类库. Echarts 是百度开源的一个数据可视化 JS 库.主要用于数据可视化. # 安装 # 安装v1版本之上的有一些报错 py ...
- 我第一个开源AI小产品-video2blog即将正式发布
前言 首先它是为了解决我自己的个人问题.不管能不能帮到你,或者对于看到的你是否有点利用价值,也没太大的关系,最起码你可以来看看我开发小产品的整个过程. 一段时间以来,我开始通过youtube平台来获取 ...
- ES Monitoring 整理笔记
Monitoring是elastic stack的监控模块,监控信息存在es索引中,并且可以通过kibana进行可视化的展示.(收集监控数据的方式从6.5版本起由Collectors-Exporter ...
- 【python爬虫案例】用python爬取百度的搜索结果！2023.3发布
目录 一.爬取目标 二.展示结果数据 三.编写爬虫代码 3.1 请求头和cookie 3.2 分析请求地址 3.3 分析页面元素 3.4 获取真实地址 3.5 保存结果数据 四.同步讲解视频 五.附完 ...