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 ...
随机推荐
- 搞定了 6 种分布式ID，分库分表哪个适合做主键？
大家好,我是小富- 本文是<ShardingSphere5.x分库分表原理与实战>系列的第七篇,目前系列的前几篇制作成了PDF,需要的可以在文末获取下载方式,持续更新中.今天咱们继续一起来 ...
- Signalr断线重连机制
前言 Signalr 即时消息发布到服务器后发现链接老是自动断开,导致无法发送广播后面百度搜了一下,signalr有个超时的机制 解决办法(js) //链接到自己的hub var connection ...
- Django框架——图书管理系统、聚合查询、分组查询、F与Q查询
图书管理系统 1.表设计 先考虑普通字段再考虑外键字段 数据库迁移.测试数据录入 2.首页展示 3.书籍展示 4.书籍添加 5.书籍编辑 后端如何获取用户想要编辑的数据.前端如何展示出待编辑的数据 6 ...
- 力扣49(java)-字母异位词分组（中等）
题目: 给你一个字符串数组,请你将 字母异位词 组合在一起.可以按任意顺序返回结果列表. 字母异位词 是由重新排列源单词的字母得到的一个新单词,所有源单词中的字母通常恰好只用一次. 示例 1: 输入: ...
- 力扣445(java&python)-两数相加Ⅱ（中等）
题目: 给你两个 非空 链表来代表两个非负整数.数字最高位位于链表开始位置.它们的每个节点只存储一位数字.将这两数相加会返回一个新的链表. 你可以假设除了数字 0 之外,这两个数字都不会以零开头. 示 ...
- 深度解析开源推荐算法框架EasyRec的核心概念和优势
简介:如何通过机器学习PAI实现快速构建推荐模型 作者:程孟力 - 机器学习PAI团队 随着移动app的普及,个性化推荐和广告成为很多app不可或缺的一部分.他们在改善用户体验和提升app的收益方面 ...
- [FE] JS 判断当前是否在微信浏览器中的最新代码
注意以下使用了 const 定义未改变的变量,没有使用 var. function isWeChatBrowser () { const ua = window.navigator.userAgent ...
- Win10下小米路由器4A百兆版刷Openwrt固件【图片详细版】
将原来的小米路由器换成了华为,早就听闻刷软路由可以实现去广告,解锁灰色歌单等诸多骚操作.就来榨取这个小米4A的剩余价值来着的. 注意 1. 必须使用路由模式,中继模式是打不开telnet的 更新固件 ...
- vue-在公共icon封装组件里使用svg图标
1.安装svg-sprite-loader.package.json:"svg-sprite-loader": "^3.9.2", 2.build/webpac ...
- phpstudy8.1安装与配置
环境: window10 phpstudy8.1.1.3 Vmware安装centos7.6 使用场景 window10安装mysql和redis 在Vmware安装centos7.6 桥接模式上网 ...