HTML是一种超文本语言,这种语言对于外观从不关心,它只是一种简洁的小型标记机制,而CSS支持更丰富的文档外观,CSS可以为任何元素的文本和背景设置颜色,允许在任何元素外围创建边框及许多其他的效果。CSS是对HTML的展现。如果HTML是糖心,那CSS是包裹的糖纸。
CSS大致可分为四种布局:上下,左右,左中右下,上下右。
1 》上下:
<div>是一个块级元素,换行是<div>固有的唯一格式表现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS布局</title>
</head>
<body>
<div style="color: black;background:yellow;width: 400px;height: 50px">aaaaaaaaaaa</div>
<div style="color: black;background: blue;width: 400px;height: 50px">bbbbbbbbbbbb</div>
</body>
</html>
示意:
2》左右:
float的意思是浮动,有float的文本框被称为浮动框,浮动框只能向左和向右浮动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS布局</title>
</head>
<body>
<div style="color: black;background:yellow;width: 400px;height: 50px;float: left">aaaaaaaaaaa</div>
<div style="color: black;background: blue;width: 400px;height: 50px;">bbbbbbbbbbbb</div>
</body>
</html>
示意:
第一个文本框把第二个文本框的内容给挤出来啦,两个左右内容太长,需要被overflow来进行修饰一下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS布局</title>
</head>
<body>
<div style="color: black;background:yellow;width: 400px;height: 50px;float: left">aaaaaaaaaaa</div>
<div style="color: black;background: blue;width: 400px;height: 50px;overflow: hidden">bbbbbbbbbbbb</div>
</body>
</html>
示意:
3》左中右下:
先把第一个文本框左右分,分出来的第二块再用float左右分,这样就出现左中右。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS布局</title>
</head>
<body>
<div style="color: black;background:yellow;width: 400px;height: 50px;float: left">aaaaaaaaaaa</div>
<div style="color: black;background: blue;height: 50px;overflow: hidden">
<div style="color: black;background: red;width: 400px;height: 50px;float: left">ccccccccccc</div>
bbbbbbbb</div>
<div style="color: black;background: green;height: 50px;">dddddddd</div>
</body>
</html>
示意:
4》上下右:
第一个<div>飘到左边 ,第二个也浮到左边,这两个块会重合,然后给第二个设置clear,去掉覆盖,使其移动到第一个的下面;对于第三个而言,没有设置宽度,它就会占满屏幕,与前两个产生重叠,用overflow消除与前两个的重叠,自己成为独立的部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS布局</title>
</head>
<body>
<div style="color: black;background:yellow;height: 100px;float: left;width: 400px">aaaaaaaaaaa</div>
<div style="color: black;background: blue;height: 200px;float: left;clear: both;width: 400px">bbbbbbbb</div>
<div style="color: black;background: red;width: 400px;height:300px;overflow: hidden">ccccccccccc</div>
</body>
</html>
示意: