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 ...
随机推荐
- 推荐一个页面引导库 driver.js
页面引导功能是 web 开发中常见的一个功能.通过页面引导功能,你可以让用户第一时间熟悉你的页面功能.今天给大家推荐一个页面引导库 driver.js. 简介 driver.js 是一款用原生 js ...
- WIN11 安装 SQL Server 2019，SQLSERVER2022， MYSQL 8.0 ，Docker，Mongodb失败故障分析
最近研究数据库性能调优遇到各种数据库各种装不上,不知道熬了多少根软白沙,熬了多少颗张三疯,问了多少AI,查了多少网页,熬了两天,终于搞明白了一件事:那就是WIN11 ON ARM (因为拿的是MAC ...
- 4.CSS层次选择器
1.后代选择器:在某个元素的后面 1 /*后代选择器*/ 2 body p{ 3 background: crimson; 4 } 2.子选择器:仅一代 1 /*子选择器*/ 2 body>p{ ...
- Python静态类型解析工具简介和实践
简介: Python是一门强类型的动态类型语言,开发者可以给对象动态指定类型,但类型不匹配的操作是不被允许的.动态类型帮助开发者写代码轻松愉快,然而,俗话说:动态一时爽,重构火葬场.动态类型也带来了许 ...
- OpenYurt 联手 eKuiper，解决 IoT 场景下边缘流数据处理难题
简介: 云计算的出现促使物联网实现爆炸式增长.在设备规模和业务复杂度不断攀升的趋势之下,边缘计算因其能够将计算能力更靠近网络边缘和设备,从而带来云性能成本的降低,也在这波浪潮之下得到快速发展. 作者 ...
- IIncrementalGenerator 判断程序集之间可见关系
本文告诉大家如何在使用 IIncrementalGenerator 进行增量的 Source Generator 生成代码时,如何判断两个程序集之间是否存在 InternalsVisibleTo 关系 ...
- dotnet 理解 IConfigurationProvider 的 GetChildKeys 方法用途
我最近遇到了一个有趣的 Bug 让我调试了半天,这个 Bug 的现象是我的好多个模块都因为读取不到配置信息而炸掉,开始我没有定位到具体的问题,以为是我的配置服务器挂掉了.经过了半天的调试,才找到了是我 ...
- 用Multisim验证简易测谎仪
用Multisim验证简易测谎仪 测谎仪电路如下图所示: 节点1,2之间用10M欧的电位计代表人体表电阻,原理是撒谎出汗的话,体表电阻就小.Q1,Q2构成互补音频振荡器,振荡频率由R2.C1和R12共 ...
- C++多态与虚拟：Objects 实例化（Objects Instantiation）探究
一.Objects的创建 依据已有的class CPoint ,我们可以产生一个或多个object(对象),或者说是产生一个instance(实体): CPoint aPoint(7.2); // a ...
- 7、yum 仓库服务与 PXE 网络装机
1.部署 yum 软件仓库 1.1.使用本地 yum 挂载 umount /dev/sr0 mount /dev/sr0 /media/mkdir /root/yum.bakmv /etc/yum.r ...