css田字格布局
<!DOCTYPE html>
<html>
<head>
<title></title> <style type="text/css">
#red{
width: 200px;
height: 200px;
background: red;
float:left;
} #blue{
width: 200px;
height: 200px;
background: blue;
float:left;
} #green{
width: 200px;
height: 200px;
background: green;
float:left;
clear:left;
} #grey{
width: 200px;
height: 200px;
background: grey;
float:left;
} </style>
</head>
<body> <div id="red"></div>
<div id="blue"></div>
<div id="green"></div>
<div id="grey"></div>
</body>
</html>
上面就是完整的代码。那说下怎么实现的。
首先有几点需要明确：
1.没有float属性的div不管它是多么小还是多么宽它都是独自占用一个行。
2.float:left是什么意思？怎么理解，我是这么理解的，只要一个div加了float:left属性之后它就变得不再是一个独占一行的元素了。我们可以把浏览器的div分为两层，这就和两个平行的平面一样，所有没有float的属性的div都是下面那个平面的，并且因为它们各自独占一行所以它们相互紧靠着，当最上面的一个div变成float之后下面的div就要挤上来。而有float属性的div都是上面那个平面的，有了float属性的div由于不再独占一行了，所以同一行可以存在多个div，这些个div都在上面那个平面。
3.clear:left，如果某个div加上了这么个属性，意思就是说我这个div上面不允许有float:left属性的div。
了解了上面那几点之后再说下田字格布局的思路。
你最开始写的代码肯定是这样的：
<!DOCTYPE html>
<html>
<head>
<title></title> <style type="text/css">
#red{
width: 200px;
height: 200px;
background: red;
}
#blue{
width: 200px;
height: 200px;
background: blue; }
#green{
width: 200px;
height: 200px;
background: green; }
#grey{
width: 200px;
height: 200px;
background: grey;
} </style>
</head>
<body>
<div id="red"></div>
<div id="blue"></div>
<div id="green"></div>
<div id="grey"></div>
</body>
</html>
效果是这样的：
思考为什么四个方块是由上到下排列的，而不是蓝色在红色的右边，绿色在蓝色的右边，灰色在绿色的右边，上面说过了，因为它们是没有float属性的div，要独占一行。
接下来想让蓝色的快在红色的右边，那么需要给红色加上float:left属性，蓝色的块也加上float:left属性，代码是这样的：
<!DOCTYPE html>
<html>
<head>
<title></title> <style type="text/css">
#red{
width: 200px;
height: 200px;
background: red;
float:left;
}
#blue{
width: 200px;
height: 200px;
background: blue;
float:left;
}
#green{
width: 200px;
height: 200px;
background: green; }
#grey{
width: 200px;
height: 200px;
background: grey;
} </style>
</head>
<body>
<div id="red"></div>
<div id="blue"></div>
<div id="green"></div>
<div id="grey"></div>
</body>
</html>
效果如下图所示：
你可能会问为什么蓝色的块在红色的块的右边？因为红色的块有float：left属性，它飘到了上个平面，而且不再独占一行元素，而蓝色的块也有float：left属性，所以红色的块和蓝色的块都跑到了上面那个平面而且靠在了一起。你可能会问那绿色的那个块哪里去了呢?
因为红色的块和蓝色的块都跑到了上面那个平面去了，那么原来在下面那个平面的绿块就会顶到显示器的上边缘，而上面的平面会把下面的平面给盖住，所以绿色的块在红色块的下面。
那怎么让绿色的块不被覆盖掉呢？ 这时候clear:left的作用就体现出来了，我们给绿色的块加一个clear:left属性，代码是这样的：
<!DOCTYPE html>
<html>
<head>
<title></title> <style type="text/css">
#red{
width: 200px;
height: 200px;
background: red;
float:left;
}
#blue{
width: 200px;
height: 200px;
background: blue;
float:left;
}
#green{
width: 200px;
height: 200px;
background: green;
clear:left;
}
#grey{
width: 200px;
height: 200px;
background: grey;
} </style>
</head>
<body>
<div id="red"></div>
<div id="blue"></div>
<div id="green"></div>
<div id="grey"></div>
</body>
</html>
效果是这样的：
为什么绿色的块加了clear：left不是跑到蓝色块的右边呢？因为绿色块目前是一个没有float：left属性的块，它会独占一个元素，而如果放到了蓝色块的右边，显然于“我的上面不允许有float：left属性的块”相矛盾，别忘了，没有float：left属性的块不管它有几个像素，它都独占一个行。
那怎么让灰色的块跑到绿色块的右边呢？很简单，只要把绿色的块再加上float:left属性，同时灰色块也加上float：left属性即可，最后代码就是最开始的那个代码。效果如下：
css田字格布局的更多相关文章
- css双飞翼布局
双飞翼布局是一种比较灵活的布局,始于淘宝UED,玉伯提出的,他着重介绍的是双飞翼栅格布局. 三列布局为"双飞燕"布局,可以把三栏比作一只鸟,main部分相当是于鸟的身体,而lef ...
- 奇妙的CSS之布局与定位
前言 关于布局与定位是Web前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有 ...
- 原生 CSS 网格布局学习笔记
下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...
- CSS网页布局全精通
在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...
- 【转】一个DIV+CSS代码布局的简单导航条
原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...
- 用css进行布局
用css进行布局 一,开始布局的注意事项 1.作为最佳实践,应把html(内容)和css(显示)分离: 2.网站设计主要有两大类型:固定宽度(基于像素)和响应式(也称流式,使用百分数定义) 二,构建 ...
- CSS网页布局错位:CSS宽度计算
为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...
- html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 （学习HTML过程中的小记录）
html/css 盒子布局 Margin .Padding .border 以及 清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width 是"宽 ...
- CSS+DIV布局初练—DIV元素必须成对出现？
一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样 ...
随机推荐
- New Concept English three （47）
Pollution is the price we pay for an overpopulated, over industrialized planet. When you come to thi ...
- UVALive - 3211 Now or later (二分+2SAT)
题目链接 题意:有n架飞机,每架飞机有两个着陆时间点可以选,要求任意两架飞机的着陆时间之差不超过k,求k的最大值. 解法:由于每架飞机都有两个选择,并且必选且只能选其中一个,时间冲突也是发生在两架飞机 ...
- BZOJ5118：Fib数列2（O1快速模）
题意:输入N,输出fib(2^N)%1125899839733759.(P=1125899839733759是素数) 思路:欧拉降幂,因为可以表示为矩阵乘法,2^N在幂的位置,矩阵乘法也可以降幂,所以 ...
- C# partial 说明(转)
http://www.cnblogs.com/Echo_saq/archive/2012/11/19/2777058.html 1. 什么是局部类型? C# 2.0 引入了局部类型的概念.局部类型允许 ...
- !heap 和 _HEAP_ENTRY
WinDBG提供了!heap命令帮助我们查找heap,同时我们也可以通过dt和MS SYMBOL来了解memory layout. 假设我们有下面一个小程序. int _tmain(int argc, ...
- 异常：java.lang.IllegalStateException: No instances found of configserver（里面是一个微服务名）
今天本地测试代码时出现了个异常,该异常出现的原因是:微服务启动的顺序出现了问题: 应该先启动本地eureka,然后在启动本地配置中心,然后在启动具体的微服务.
- linux swap交换分区说明/管理
https://coolnull.com/3699.html 一．SWAP说明1.1 SWAP概述当系统的物理内存不够用的时候,就需要将物理内存中的一部分空间释放出来,以供当前运行的程序使用.那些被释 ...
- 蓝桥杯 基础训练 BASIC-27 2n皇后问题
基础练习 2n皇后问题 时间限制:1.0s 内存限制:512.0MB 问题描述 给定一个n*n的棋盘,棋盘中有一些位置不能放皇后.现在要向棋盘中放入n个黑皇后和n个白皇后,使任意的两个黑皇后都 ...
- el表达式对js方法的传值
我常用于在jsp页面遍历集合和分页中的页面跳转事件. jsp: <!-- 引入jstl --> <%@ taglib prefix="c" uri="h ...
- 机器学习：PCA（基础理解、降维理解）
PCA(Principal Component Analysis) 一.指导思想 降维是实现数据优化的手段,主成分分析(PCA)是实现降维的手段: 降维是在训练算法模型前对数据集进行处理,会丢失信息. ...