CSS布局 这个很基础,方法也很多,要留意的知识点还是有一些。

比如IE6的触发layout  *zoom:1

比如使用浮动后的清除浮动  clear:both

需求的延伸也会有一些:

比如三栏等高

比如左栏或者右栏固定,就是position:fixed的运用,当然ie6不支持

基本代码结构:

<div class="con">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>

按照运用的知识点总结一下一下几种方式

方案一  相对定位

  全absolute

左栏+右栏 absolute

方案二  负margin

float+负margin

inline-block+负margin

方案三  弹性盒模型 flex-box

CSS 三栏自适应布局的更多相关文章

  1. css实现等高布局 两栏自适应布局 三栏自适应布局

    等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...

  2. css多栏自适应布局

    css多栏自适应布局还是需要总结一下的,都是基本功. 一般使用position属性布局,或者用float属性布局,也可以使用display属性. 看资料说position适合首页布局,因为首页内容往往 ...

  3. 使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)

    来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...

  4. css 多栏自适应布局

    在页面重构中,我们经常会需要实现多栏布局,例如n栏固定宽度 + m栏自适应宽度的组合,绝对布局+padding+百分比宽度是容易想到的比较暴力的解决方法,但是作为未来的"工程师", ...

  5. css实现三栏自适应布局(两边固定,中间自适应)以及优缺点

    方法一:绝对定位(absolute + margin) 原理:给左右两边的元素设置absolute,这样左右两边的元素脱离标准文档流的控制,中间的元素自然会上来,然后给中间的元素设置margin留出左 ...

  6. CSS 3栏自适应布局

    绝对定位 css html,body{margin: 0px;height:100%;} div{height: 100%;} .left,.right {top: 0px;position: abs ...

  7. CSS三列自适应布局(两边宽度固定,中间自适应)

    https://blog.csdn.net/cinderella_hou/article/details/52156333 https://blog.csdn.net/wangchengiii/art ...

  8. 从三栏自适应宽度布局到css布局的讨论

    如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...

  9. Css三栏布局自适应实现几种方法

    Css三栏布局自适应实现几种方法 自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法 和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏 ...

随机推荐

  1. 洛谷 P1903 [国家集训队]数颜色 / 维护队列 带修莫队

    题目描述 墨墨购买了一套\(N\)支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会向你发布如下指令: \(1\). \(Q\) \(L\) \(R\)代表询问你从第\(L\) ...

  2. 架构师根本不会被语言限制住,php照样可以用领域驱动设计DDD四层架构!

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 你在通往架构师的路上吗? 程序员这个行业就像是在不断的打怪升级,突破每一阶段的瓶颈期 ...

  3. pytest文档42-fixture参数化params

    前言 参数化是自动化测试里面必须掌握的一个知识点,用过 unittest 框架的小伙伴都知道使用 ddt 来实现测试用例的参数化. pytest 测试用例里面对应的参数可以用 parametrize ...

  4. COMET —— 常识Transformer用于自动知识图构建

    <COMET:Commonsense Transformers for Automatic Knowledge Graph Construction> 论文地址 论文源码 任务 目的层面 ...

  5. Anderson《空气动力学基础》5th读书笔记 第5记——推导二维机翼的空气动力学系数

    机翼的受力分析图 我们知道,空气对一个物体产生的升力和阻力以及力矩源于作用在整个物体上的压力分布和剪切力分布,所以我们分析上图可知(取单位展长的机翼): 对于上表面:                 ...

  6. IDEA2020.2版本无法开启KDE全局菜单的解决方案

    IDEA2020.2版本无法开启KDE全局菜单的解决方案 前言 :更新了2020.2之后全局菜单一直不生效,一直找不到解决的办法,就退回了2020.1,今天又试了一次,成功解决全局菜单显示问题. 之前 ...

  7. 「IDEA插件精选」安利一个IDEA骚操作:一键生成方法的序列图

    在平时的学习/工作中,我们会经常面临如下场景: 阅读别人的代码 阅读框架源码 阅读自己很久之前写的代码. 千万不要觉得工作就是单纯写代码,实际工作中,你会发现你的大部分时间实际都花在了阅读和理解已有代 ...

  8. vue+uni-app商城实战 | 第一篇:【有来小店】微信小程序快速开发接入Spring Cloud OAuth2认证中心完成授权登录

    一. 前言 本篇通过实战来讲述如何使用uni-app快速进行商城微信小程序的开发以及小程序如何接入后台Spring Cloud微服务. 有来商城 youlai-mall 项目是一套全栈商城系统,技术栈 ...

  9. PPT神器

    今天要给大家推荐一款开挂一般的 PPT 插件:iSlide 强烈推荐大家下载使用哈,绝对分分钟让你做出美观大气的 PPT!      不管是老师.学生还是公司人员,PPT 都是必须要掌握的技能,然而要 ...

  10. 技术选型:为什么批处理我们却选择了Flink

    最近接手了一个改造多平台日志服务的需求,经过梳理,我认为之前服务在设计上存在缺陷.经过一段时间的技术方案调研,最终我们决定选择使用 Flink 重构该服务. 目前重构后的服务已成功经受了国庆节流量洪峰 ...