CSS 布局对我来说，既熟悉又陌生。我既能实现它，又没有很好的了解它。所以想总结一下，梳理一下 CSS 中常用的一列，两列，三列布局等的实现方法。本文小白，仅供参考。但也要了解下浮动，定位等。

一、一列布局

1.  居中定宽

这算是最简单且最容易实现的布局了吧。列出最核心的 CSS 代码：

body{text-align: center;font-size: 2em;}

.head,.main,.footer{width: 960px;margin: 0 auto;}

.main{background-color: #666666;height: 600px;}

.footer{background-color: #999999;height: 200px;}

其中，最主要的还是 margin 属性，当为元素设置了宽度，margin:0 auto 就能自动让元素居中。

2. 自适应

这个也非常简单，只需要将上述 CSS 代码中元素的 width 属性设置为百分比，这样就能让浏览器自动计算元素的宽度。

二、两列布局

1. 定宽

这个应该也没什么难度，只需设置好相应的宽度就好了。这里贴出代码：

body{text-align: center;font-size: 2em;}

.main{width: 960px;height: 900px;margin: 0 auto;}

.left{width: 300px;height: 900px;background-color: #eee;float: left}

.right{width: 660px;height: 900px;background-color: #999;float: right;}

　　这里涉及到了 float 属性，也就是常说的浮动了。一个向左浮动，一个向右浮动，恰好能实现两列布局。‘

2. 自适应

将 width 属性的值替换成百分比，就是这么简单。

body{text-align: center;font-size: 2em;}

.main{width: 80%;height: 900px;margin: 0 auto;}

.left{width: 30%;height: 900px;background-color: #eee;float: left}

.right{width: 70%;height: 900px;background-color: #999;float: right;}

　　注意：父元素也要设置成百分比。

三、三列布局

1. 左右定宽

body{text-align: center;font-size: 2em;margin: 0;padding: 0}

.main{height: 900px;background-color: #ddd;margin: 0 240px;}

.left{width: 240px;height: 900px;background-color: #eee;position: absolute;top: 0;left: 0}

.right{width: 240px;height: 900px;background-color: #999;position:absolute;top: 0;right: 0}

　　这里最主要的是用到了绝对定位，并且让中间的 margin 左右为两边的宽度。

2. 自适应

body{text-align: center;font-size: 2em;margin: 0;padding: 0}

.main{height: 900px;background-color: #ddd;margin: 0 20%;}

.left{width: 20%;height: 900px;background-color: #eee;position: absolute;top: 0;left: 0}

.right{width: 20%;height: 900px;background-color: #999;position:absolute;top: 0;right: 0}

　　同理，其换成百分比的形式。

四、混合布局

最后来个前面的大综合。

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<title>混合布局自适应</title>

	<link rel="stylesheet" href="">

	<style type="text/css">

		body{text-align: center;font-size: 2em;margin: 0;padding: 0}

		.head,.main,.footer{width: 80%; margin:0 auto;}

		.head{background-color: #ccc; height: 100px}

		.footer{background-color: #9cc; height: 100px}

		.main{position: relative;}

		.left{width: 20%;height: 900px; background-color: #eee;position: absolute;top: 0;left: 0; overflow: hidden;}

		.middle{height: 900px; background-color: #fcc; margin: 0 20%; overflow: hidden;}

		.right{width: 20%; height: 900px; background-color: #eee;position: absolute; top: 0; right: 0;overflow: hidden;}

	</style>

</head>

<body>

	<div class="head">head</div>

	<div class="main">

		<div class="left">left</div>

		<div class="middle">middle</div>

		<div class="right">right</div>

	</div>

	<div class="footer">footer</div>

</body>

</html>

　　

CSS常用布局实现方法的更多相关文章

  1. css 常用布局

    「前端那些事儿」③ CSS 布局方案 我们在日常开发中经常遇到布局问题,下面罗列几种常用的css布局方案 话不多说,上代码! 居中布局 以下居中布局均以不定宽为前提,定宽情况包含其中 1.水平居中 a ...

  2. CSS常用布局整理（二）

    1-2-1单列变宽布局 side列定宽300px,content列变宽,尺寸是100%-300px.核心的问题就是浮动列的宽度应该等于“100% - 300px”,而CSS显然不支持这种带有减法运算的 ...

  3. css常用布局

    1.一列布局 html: <div class="header"></div> <div class="body">< ...

  4. CSS常用布局方式-两列布局、三列布局

    CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...

  5. CSS常用布局整理

    固定宽度布局 1-2-1布局(浮动) <html xmlns="http://www.w3.org/1999/xhtml"> <head> <titl ...

  6. css常用的属性方法 上篇

    自己是从java后台自学转前端的,所以平时一些简单的css+html就不写了,列出的都是新手常用的一些属性,会持续更新,大神勿喷,留给新手做个参考! 尤其是跟我一样自学前端的.     背景关联 ba ...

  7. html+css 常用布局

    1.中间固定宽度,两侧自适应 1.1 flex布局 <!DOCTYPE html><html lang="en"> <head> <met ...

  8. CSS常用布局技巧 实例

    末尾用省略号! white-space: nowrap; overflow: hidden; text-overflow: ellipsis; ######################## 两个i ...

  9. CSS常用布局学习笔记

    水平居中-行内元素 如果是文字和图片这类的行内元素,则在其父级元素上加上样式:text-align:center; 水平居中-定宽块元素 div{ width:100px; margin:0 auto ...

随机推荐

  1. mybatis系列-03-入门程序

    3.1     需求 根据用户id(主键)查询用户信息 根据用户名称模糊查询用户信息 添加用户 删除 用户 更新用户 3.2     环境 java环境:jdk1.7.0_79 eclipse mys ...

  2. 微软CEO私享会——广东天使会专场圆满落幕

      http://www.cnblogs.com/sennly/p/4140976.html    10月17日,微软中国联合广东天使会首期“微软CEO 私享会”在中国微软广东分公司广州太古汇办公室举 ...

  3. 【原创】setjmp longjump一些注意点及使用方法

    setjmp longjump一些注意点及使用方法 jmp_buf结构体的定义 #define _JBLEN  9typedef struct { int _jb[_JBLEN + 1]; } jmp ...

  4. 【po3693】Maximum repetition substring

    题意: 给定一个字符串 求重复次数最多的连续重复子串 并输出字典序最小方案 题解: 枚举子串长度L 显然如果重复次数>1 那么答案串肯定包含s[1],s[1+L],s[1+L*2],...中的两 ...

  5. POJ2411 - Mondriaan's Dream(状态压缩DP)

    题目大意 给定一个N*M大小的地板,要求你用1*2大小的砖块把地板铺满,问你有多少种方案? 题解 刚开始时看的是挑战程序设计竞赛上的关于铺砖块问题的讲解,研究一两天楞是没明白它代码是怎么写的,智商捉急 ...

  6. Mongodb集群部署ReplicaSet+Sharding -摘自网络

    网上关于三种集群方式的搭建方式很多,都是分开来介绍的.Replica Set (复制集成)主要是做主从库的,但是没法实现负载均衡的效果,真正实现这个的,是Sharding(分片集群),通过数据分布在每 ...

  7. linux之C编程实战小例

    人生匆匆一趟,打不打酱油?怎么打?怎么打"质量好点的酱油"?由你决定.打酱油是一种态度,更是一种生活! 哈哈,事不关己不开口,专心一意打酱油! 请记住下面些许话: 不要一味的说别人 ...

  8. Win7旗舰版的nfs服务器如何架设？ - Microsoft Community

    Win7旗舰版的nfs服务器如何架设? - Microsoft Community Win7旗舰版的nfs服务器如何架设?

  9. Java中使用ThreadPoolExecutor并行执行独立的单线程任务

    Java SE 5.0中引入了任务执行框架,这是简化多线程程序设计开发的一大进步.使用这个框架可以方便地管理任务:管理任务的生命周期以及执行策略. 在这篇文章中,我们通过一个简单的例子来展现这个框架所 ...

  10. DTD - Attributes

    In a DTD, attributes are declared with an ATTLIST declaration. Declaring Attributes An attribute dec ...