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. mysql日期格式说明符

  2. [解决]ASP.NET MVC 4/5 源码调试(source code debug)

    ========================ASP.NET MVC 4============================ ASP.NET MVC 4 source code download ...

  3. [C语言 - 1.2] 类型说明符、字符、数组

    A.类型说明符(只能修饰int) short int: = short 2字节 long int: long 8字节 = long   输出占位符 %ld signed int: = signed 默 ...

  4. android应用的界面编程----View与ViewGroup的概念

    1 UI OverView Android中所有的UI元素都是通过View与ViewGroup来构建的,View是指屏幕中一块可与用户进行交互的空白,类似于java界面编程中的JPanel.为了界面布 ...

  5. 没有指针的java语言

    一.java中引用(reference)实质就是指针 与C语言的指针比较: 1.引用是受控的安全的 2.空引用会被检查 java中不能够访问没有引用到的内存,这也是java的自动垃圾回收机制的基础之一 ...

  6. iOS新特性引导页

    有一个注意点: 获取版本号 个叫做Version,一个叫做Build,这两个值都可以在Xcode 中选中target,点击"Summary"后看到. Version在plist文件 ...

  7. 支持向量机（SVM）算法的matlab的实现

    支持向量机(SVM)的matlab的实现 支持向量机是一种分类算法之中的一个,matlab中也有对应的函数来对其进行求解:以下贴一个小例子.这个例子来源于我们实际的项目. clc; clear; N= ...

  8. 每天进步一点点——负载均衡之DNS域名解析

    转载请说明出处:http://blog.csdn.net/cywosp/article/details/38017027     在上一篇文章(http://blog.csdn.net/cywosp/ ...

  9. Linux HugePages及MySQL 大页配置

    http://blog.csdn.net/dba_waterbin/article/details/9669929       ㈠ HugePages简介             HugePages是 ...

  10. PAT 1008

    1008. Elevator (20) The highest building in our city has only one elevator. A request list is made u ...