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. UMA - Unity Multipurpose Avatar

    UMA - Unity Multipurpose Avatar UMA version 1.0.1.0R Unity 4.3 What is UMA? UMA - Unity Multipurpose ...

  2. SGU132 - Another Chocolate Maniac(状态压缩DP)

    题目大意 给定一个N*M大小的大小的蛋糕,蛋糕的有些地方已经放置了东西,要求你在蛋糕上放入尽量少的1*2大小的巧克力,使得蛋糕不能够再放入巧克力 题解 和POJ1038恰好相反,此题是放入尽量少的巧克 ...

  3. CDH CM安装及简单群集部署测试

    前吃人的故事开始了,金钱是如何吃人的呢?我在想ing,还没想通,一起吧,哈哈: 入题,别胡扯,误人子弟!!!! CM@@!!!!!!....................., 先来张monitor ...

  4. Java之Property-统获取一个应用程序运行的次数

    package FileDemo; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStre ...

  5. python 定制类

    看到类似__slots__这种形如__xxx__的变量或者函数名就要注意,这些在Python中是有特殊用途的. __slots__我们已经知道怎么用了,__len__()方法我们也知道是为了能让cla ...

  6. Everything

    Everything,windows下做好用的搜索工具,速度特别快!下载地址:http://www.voidtools.com/ 快速下载地址:http://files.cnblogs.com/fil ...

  7. Linux下JDK安装位置

    新手在Linux上安装JDK时,不知道应该将JDK安装在哪比较合适.首先简要了解下Linux中部分目录的作用. /bin---用来贮存用户命令./usr/bin 也被用来贮存用户命令.  /sbin- ...

  8. JS单词形式的运算符

    1.void 运算表达式并忽略其返回值,比如void (1+2),void (0) <html> <head> <meta http-equiv="conten ...

  9. ThinkPHP3.2.3新特性之：数据库设置

    ThinkPHP3.2.3版本数据库驱动采用PDO完全重写,配置和使用上面也比之前版本更加灵活和强大,我们来了解下如何使用. 首先,3.2.3的数据库配置信息有所调整,完整的数据库设置包括: /* 数 ...

  10. TQ210裸机编程(2)——LED流水灯

    两个文件start.S和led.c start.S .global _start                @声明一个全局的标号 _start:     bl main               ...