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. Android之指南针（电子罗盘）学习

    点我下载源码 5月12日更新到V5版:http://download.csdn.net/detail/weidi1989/5364243 今天,在小米的开源项目中下载了一个指南针源码学习了一下,感觉不 ...

  2. 【转】logger

    一个使用java.util.logging.Logger进行log输出的示例代码如下: package com.sample; import java.io.File; import java.uti ...

  3. 【C语言】-数据输入-scanf( )和getchar( )

    格式化输入函数scanf( ) scanf( )功能: 按照指定的格式读入键盘上输入的若干个任意类型的数据,存入到argument参数所指向的内存单元,函数返回值为读入并赋给argument的数据个数 ...

  4. hdoj 1402 Prepared for New Acmer【快速幂】

    Prepared for New Acmer Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/O ...

  5. jquery中 cache: true和false的区别

    true:会读缓存,可能真的到服务器上. 假如上次访问了a.html,第二次的时候得到的是上次访问的a.html的结果,而不是重新到服务器获取. false:会在url后面加一个时间缀,让它跑到服务器 ...

  6. hdoj 2829 Lawrence 四边形不等式优化dp

    dp[i][j]表示前i个,炸j条路,并且最后一个炸在i的后面时,一到i这一段的最小价值. dp[i][j]=min(dp[i][k]+w[k+1][i]) w[i][j]表示i到j这一段的价值. # ...

  7. vs开发工具使用问题

    1.快捷键失效:(如:VS中CTRL+E,CTRL+D自动缩进功能不能使用) 通过设置“工具”-“选项”-“环境”-“键盘”-“应用以下其他键盘映射方案”中,选择"Visual C# 200 ...

  8. Appium Android定位元素与操作

    文章写得很好,转载备用 一.常用识别元素的工具 uiautomator:Android SDK自带的一个工具,在tools目录下 monitor:Android SDK自带的一个工具,在tools目录 ...

  9. c++中类长度解析

    通常我们定义一个类,它所占的空间有多大呢? 首先我们看一下下面的这个类 class A{ public: void func1(void){ printf("11111heihei\n&qu ...

  10. Android设计模式系列-适配器模式

    对于android开发者来说起,适配器模式简直太熟悉不过,有很多应用可以说是天天在直接或者间接的用到适配器模式,比如ListView.ListView用于显示列表数据,但是作为列表数据集合有很多形式, ...