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. POJ 2429

    思路:a/n*b/n=lcm/gcd 所以这道题就是分解ans.dfs枚举每种素数情况.套Miller_Rabin和pollard_rho模板 //#pragma comment(linker, &q ...

  2. UMA - Unity Multipurpose Avatar

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

  3. leetcode@ [211] Add and Search Word - Data structure design

    https://leetcode.com/problems/add-and-search-word-data-structure-design/ 本题是在Trie树进行dfs+backtracking ...

  4. HDU-4628 Pieces 搜索 | DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4628 数据不大,枚举本质.首先对枚举出回文串,然后用DP或者搜索,这里因为层数不多,用bfs比较好,或 ...

  5. 八成Java开发者解答不了的问题

    统计数据来自Java“死亡”竞赛——一个针对开发者的迷你测验 几个月前,我们在一个小型网站上发布了一个称为Java“死亡竞赛”的新项目.测验发布后,超过20000位开发者参加了测验.网站以20道关于J ...

  6. Java之泛型练习

    package cn.itcast.generics; import java.util.Comparator; import java.util.Iterator; import java.util ...

  7. CSS定义选择器

    ID与类 层叠 分组 继承 上下文选择器 子类选择器 其他选择器 结构与注释 20.1 ID与类 选择器是用于控制页面设计的样式.即ID选择器何类选择器. 一直以来,许多开发人员经常将ID与类混淆,或 ...

  8. 使用 StoryBoard 的时候加入用户引导页面

    如果想让一个APP加上引导页面是一个非常完美的举动 但是,总会遇到一些问题 (不要忘记在APDelegate里面加上用户引导页面的头文件和程序启动时的第一个页面哦) 情况一:纯代码 判断是否是第一次启 ...

  9. LocalDB 的创建与迁移

    首先创建对应的对象 public class Movie { public int ID { get; set; } public string Title { get; set; } public ...

  10. 对PostgreSQL的prepared statement的深入理解

    看官方文档: http://www.postgresql.org/docs/current/static/sql-prepare.html PREPARE creates a prepared sta ...