CSS布局

Dream丶小雅

浏览: 47320 次

最近访客更多访客>>

花小烁

黄小胖

mengxiang.com

siruoxian

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (21)

社区版块

存档分类

css

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>

示意：