css布局 CSS布局

CSS布局转0.0

css

HTML是一种超文本语言，这种语言对于外观从不关心，它只是一种简洁的小型标记机制，而CSS支持更丰富的文档外观，CSS可以为任何元素的文本和背景设置颜色，允许在任何元素外围创建边框及许多其他的效果。CSS是对HTML的展现。如果HTML是糖心，那CSS是包裹的糖纸。

CSS大致可分为四种布局：上下，左右，左中右下，上下右。

1 》上下：

<div>是一个块级元素，换行是<div>固有的唯一格式表现。

      Html代码   
      
    
<!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的文本框被称为浮动框，浮动框只能向左和向右浮动。

      Html代码   
      
    
<!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来进行修饰一下内容。

      Html代码   
      
    
<!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左右分，这样就出现左中右。

      Html代码   
      
    
<!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消除与前两个的重叠，自己成为独立的部分。

      Html代码   
      
    
<!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>  

示意：