今天学习的div，了解了div是干什么用的掌握了什么是盒子模型，以及div的外边距内边距以及边框，运用div和CSS给文字排版，利用边框的来做图像，div溢出的处理

 

CSS初始化：　　　　精确排版的时候用这个清理一下
    *{
    margin:0px;
    padding:0px;
    }
    
    */

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>div介绍</title>
 6 <!--
 7 <div></div>不是功能标签
 8 是可以放文字、图片以及各种元素块标签，相当于是个方便袋，常用于来布局
 9 div不设置宽高不显示-->
10 
11 <style>
12     
13     
14     #d1{
15         background-color: red;
16         width: 50px;
17         height: 50px;
18         float: left;
19     }
20     
21     
22     #d2{
23         background-color: blue;
24         height: 100px;
25         width: 100px;
26 /*        浮动*/
27         float: right;
28     }
29     #d3{
30         background-color:#666666;
31         
32         height: 100px;
33 /*清除浮动，不让浮动的盖住*/
34             clear: both;
35     }
36     </style>
37 </head>
38 
39 <body>
40 
41   <div id="d1">我是左div</div>
42   <div id="d2">我是右div</div>
43   <div id="d3">我是三div</div>
44 </body>
45 </html>

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>溢出处理</title>
<style>
    #d{
        background-color: yellow;
        width: 100px;
        height: 100px;
/*如果内容超出div则隐藏*/
/*        overflow: hidden;*/
/*不管内容是否超出，都会给div加一个滚动条*/
/*        overflow: scroll;*/
/*如果内容不超出div则没有滚动条，如果超出；自动添加滚动条    */
        overflow: auto;
    }
    
    </style>
</head>

<body>
<div id="d">
    刘奶奶找牛奶奶买牛奶，牛奶奶给刘奶奶拿牛奶 
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>快速添加边框的粗细、类型、颜色</title>
<style>
    #d{
/*快速添加边框的粗细、类型、颜色*/
            
        border-left: 100px solid white;    
        border-right: 100px solid  white;
        border-bottom: 100px solid    #FC01FB;
        width: 00px;
        height: 00px;
        background-color: yellow;
    }
    #d1{
            
        border-left: 100px solid white;    
        border-right: 100px solid  white;
        border-bottom: 100px solid    #06B5D1;
        width: 00px;
        height: 00px;
        background-color: yellow;
    }
    #d2{
        width: 85px;
        height: 100px;
        background-color: white;
        float: left;
    }
    #d3{
        width: 30px;
        height: 100px;
        background-color: yellow;
        float: left;
    }
    #d4{
        width: 85px;
        height: 100px;
        background-color: white;
        float: left;
        
    }
    </style>
</head>

<body>
<div id="d"></div>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网页文字用DIV排版</title>
<style>
    li{
        list-style-type: none;
        float: left;
/*    间距*/
        margin: 20px;
    }
    </style>
</head>

<body>
<ul>
    <li> 首页</li>
    <li>新闻网</li>
    <li>首页概况</li>
</ul>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">    
<title>盒子模型边框属性 CSS初始化</title>
<style>
/*盒子模型：
    外边距；margin      margin:auto   auto的意思是自适应
    边框；barder
    内边框；padding
    margin重叠现象：只要有一个元素没有float属性就会出现重叠现象，margin取相邻元素的margin最大值
CSS初始化：
    *{
    margin:0px;
    padding:0px;
    }
    
    */
*{
    margin:0px;
    padding:0px;
    }
    #big{
        width: 500px;
        height: 500px;
        background-color: yellow;
    }
    #small1{
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
        margin: 10px 10px 10px;              /*上右下左*/
        border: 20px solid black;    
        padding: 10px;                        /*上右下左和margin一样*/
    }
    #small2{
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
        margin: 10px;
    }

    #small3{
        width: 100px;
        height: 100px;
        background-color: aqua;
        clear: both;
        margin: 10px;
    }
    #small4{
        width: 100px;
        height: 100px;
        background-color: orange;
        clear: both;
        margin: 10px;
    }
    </style>
</head>

<body>
    <div id="big">
        <div id="small1">戒指</div>
        <div id="small2"></div>
        <div id="small3"></div>
        <div id="small4"></div>
    </div>
    
</body>
</html>