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. 【开源】Springboot API 一键生成器

    Springboot API 一键生成器 写这个项目,最大的想法就是:不做CRUD 程序猿 Springboot 在我们平时开发项目当中,是如此的常用.然而,比如平时我们写的一些: XX 管理系统 X ...

  2. Warning: Permanently added the RSA host key for IP address '52.74.223.119' to the list of known hosts.

    如果出现这个问题,说明你的github缺少公钥 使用 ssh -T git@gtihub.com 去测试 1.生成密钥 ssh-keygen -t rsa -C "your name&quo ...

  3. 【树形DP】CF 1293E Xenon's Attack on the Gangs

    题目大意 vjudge链接 给n个结点,n-1条无向边.即一棵树. 我们需要给这n-1条边赋上0~ n-2不重复的值. mex(u,v)表示从结点u到结点v经过的边权值中没有出现的最小非负整数. 计算 ...

  4. go视频提取音频

    package main import ( "bytes" "fmt" "log" "os" "os/exec ...

  5. 第二十一章 PHP编译安装(centos7)

    一.环境准备 主机 IP 身份 web01 10.0.0.7 编译安装PHP 二.准备安装 1.新建目录 [root@jindada ~]# mkdir /php 2.上传源码包并解压 [root@j ...

  6. Linux运维学习第一周记

    1 当年白岳伴清游, 2 江石台空一苇浮. 3 缥渺临风闻郢曲, 4 殷勤歧路看吴钩. 老气横秋方知世间沧桑! 以前一直忙,没有时间沉浸下来学习,一直都是浮着. 至此大疫,给生命按下了暂停键. 踏踏实 ...

  7. 微信小程序的账号找回。

    之前注册过微信小程序,好久没用了,马上要开发微信小程序了,我今天登陆了一下突然发现 然后点击账号找回,按照流程同意点击下一步,到第二部时要输入搜索框里的提示. 这时的我早已忘了,百度搜了一下如何找回原 ...

  8. 国内首个 .NET 5 框架 Fur 斩获 1000 stars,1.0.0-rc.final.20 发布

          Fur 是 .NET 5 平台下企业应用开发最佳实践框架. 通往牛逼的路上,风景差得让人只想说脏话,但我在意的是远方. 啥环境 早在 1998 年微软公司对外发布 .NET/C# 平台的那 ...

  9. MVC单文件上传

    前言 现在来写下最基础的单文件上传,完成后可以扩展成各种不同的上传方式 HTML <input id="Input_File" type="file" / ...

  10. 没花一分钱的我竟然收到的JetBrains IDEA官方免费赠送一年的Licence

    前言 做java的人,一般IDE工具用的不是eclipse就是IntelliJ IDEA了吧,eclipse因为是开源软件,而且起步比较早,功能也比较完善.早期基本上做java的使用eclipse都是 ...