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. mysql linux 命令行操作

    1. 登录mysql      mysql -u 用户名 -p    回车输入密码 

  2. 多测师讲解selenium ——切换窗口——打印句柄_高级讲师肖sir

    (一)同一个窗口打开两个浏览器 from selenium import webdriverfrom time import sleepdrvier=webdriver.Chrome()url='ht ...

  3. day27 Pyhton 面向对象02 组合

    # 组合 # 什么是组合 : 一个类对象的属性是另外一个类的对象 class Person: def __init__(self,name,sex,hp,mp,ad): self.name = nam ...

  4. centos8平台redis cluster集群添加/删除node节点(redis5.0.7)

    一,当前redis cluster的node情况: 我们的添加删除等操作都是以这个cluster作为demo cluster采用六台redis,3主3从 redis1 : ip: 172.17.0.2 ...

  5. List<String>转换为实体类的属性【转】

    package model; import java.lang.reflect.Field; import java.lang.reflect.Method; import java.util.Arr ...

  6. java 常用快捷键及命令积累

    ctl + shift + o--->导入所需包,删掉没有被引用的包 ctl + / --->添加多行注释 ctl + \--->删除多行注释

  7. ssm整合之applicationContext.xml

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  8. 【应用服务 App Service】 App Service Rewrite 实例 - 反向代理转发功能

    问题描述 在使用Azure App Service(应用服务)时,有时候需要在不同的站点之间进行跳转,但是希望通过通过访问同一个域名的方式来实现反向代理.如果创建应用时候选择的是Window服务,这时 ...

  9. 学会Git玩转GitHub(第三篇) 入门详解 - 精简归纳

    学会Git玩转GitHub(第三篇) 入门详解 - 精简归纳 JERRY_Z. ~ 2020 / 10 / 25 转载请注明出处!️ 目录 学会Git玩转GitHub(第三篇) 入门详解 - 精简归纳 ...

  10. python中的多（liu）元（mang）交换 ，赋值

    多元赋值 顾名思义 同时对多个变量赋值 长话短说 举例: int x = 1 int y = 2 x,y = y ,x 这种写法可以直接交换x,y的值 非常方(liu)便(mang) 也就是 y=1 ...