<html>
<head>
<meta charset="utf-8">
<title>浮動(dòng)對(duì)元素產(chǎn)生的影響</title>
<style>
.dv1,.dv2,.dv3{
width:200px;
height:200px;
}
.dv1{
background:red;
/左浮動(dòng)/
float:left;
}
.dv2{
background:blue;
float:left;
}
.dv3{
background:yellow;
float:left;
}
p{
height:100px;
background:black;
}
/清除浮動(dòng)方法一/
/.clear{
clear:both;清除浮動(dòng)兩端所帶來(lái)的影響
}/
/清除浮動(dòng)方法二/
/* overflow:visible / hidden; scroll/ auto /
/ .box{ /
/ overflow:hidden; //給父元素添加/
/ overflow:auto;
} */

    /*清除浮動(dòng)的方法三*/
    /* .box{
        height:200px;
    } */

    /*清除浮動(dòng)方法四  偽類*/
    .box:after{
        content:'';/*在box后面添加內(nèi)容為空*/
        display:block;/*把添加的內(nèi)容轉(zhuǎn)換成塊元素*/
        clear:both;  /*清除元素兩端的浮動(dòng)*/
    }
</style>

</head>
<body>
<div class='box'>
<div class='dv1'></div>
<div class='dv2'></div>
<div class='dv3'></div>

</div>
<p></p>

</body>
</html>邊框

border-width: 寬度
border-style: 樣式
border-color： transparent(透明) 顏色
border:1px solid #000; 簡(jiǎn)寫
圓角

屬性：
border-radius:5px/20%/50%;

border-top-left-radius:左上的圓角
border-top-right-radius:右上
border-bottom-left-radius:左下
border-bottom-right-radius:右下
外邊距內(nèi)邊距

外邊距：圍繞在元素周圍的空白區(qū)域默認(rèn)不被其他元素占用的
作用：拉開(kāi)元素之間的距離
語(yǔ)法：
margin:值 5px 百分比 20%；
取值：
px 像素
% 百分比
auto(自動(dòng)) 只在左右方向有效
負(fù)值 -5px;

 margin:20px;  設(shè)置4個(gè)方向的外邊距
     margin-top:5px;設(shè)置的是上外邊距
 margin-bottom：5px;下外邊距
 margin-left:  左外邊距
 margin-right:右外邊距


    margin:20px;  設(shè)置4個(gè)方向的外邊距
margin:10px 20px;   10px 代表上下   20px左右
margin:10px 5px 20px;  10px代表上   5px左右 20px下方向
    margin:5px 10px 15px 20px;  上 右 下 左


margin:0 2px 0 0px;上右邊距<!doctype html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color:red;
}
.box{
color:blue;
}

container{

font-size:30px;
font-weight:bold; /字體加粗/
}
</style>
</head>
<body>
<p>這是一個(gè)p標(biāo)簽</p>
<p>vbvbbbv</p>
<div class="box">這是一個(gè)div元素</div>
<ul>
<li class='box'>111111</li>
<li class='box'>22222</li>
<li class="box">33333</li>
</ul>
<div id="container">這是一個(gè)帶id選擇器的div</div>
<div id='left'></div>
4.后代選擇器：選取的是父元素下的所有子元素
ul li{}

       5.子代選擇器：父元素下的直接子元素
             ul>li{}

       6.相鄰兄弟選擇器
            .good+li

       7.通用兄弟選擇器
            .good~li

       8.結(jié)構(gòu)偽類選擇器
              ul>li:first-child{}  第一個(gè)孩子
              ul>li:last-child{}   最后一個(gè)孩子
              ul>li:nth-child(n){}    第n個(gè)孩子

字體相關(guān)樣式：
     
     font-family:"宋體";設(shè)置字體類型
     font-size:30px;  字體大小
     font-style:"normal/italic(斜體)" 字體風(fēng)格
     font-weight:bold; /*bold加粗  normal正常*/700 //字體加粗
     font-weight:100/200/....900; //字體加粗

-->
</body>
</html><html>
<head>
<meta charset="utf-8">
<title>css</title>
<style>
/注釋選擇器：/
/p：元素選擇器/
/class='third' 類選擇器/

   p{
      color:blue;
      background:cyan;
   }
   h3{
      color:pink;
   }
   .third{0
        font-size:20px;
   }
   .first{
        /* border:1px solid #000; *//*1像素 實(shí)線 黑色邊框*/ 
        border:2px solid orchid;/*1像素虛線 紅色框*/
   }
</style>

</head>
<body>

<h3>詠鵝</h3>
<p class='first'>鵝鵝鵝</p>
<p class='third'>曲項(xiàng)向天歌</p>
<p class='third'>白毛浮綠水</p>
<p class='third'>紅掌撥清波</p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>css</title>
<style>
/注釋選擇器：/
/p：元素選擇器/
/class='third' 類選擇器/

   p{
      color:blue;
      background:cyan;
   }
   h3{
      color:pink;
   }
   .third{0
        font-size:20px;
   }
   .first{
        /* border:1px solid #000; *//*1像素 實(shí)線 黑色邊框*/ 
        border:2px solid orchid;/*1像素虛線 紅色框*/
   }
</style>

</head>
<body>

   p{
      color:blue;
      background:cyan;
   }
   h3{
      color:pink;
   }
   .third{0
        font-size:20px;
   }
   .first{
        /* border:1px solid #000; *//*1像素 實(shí)線 黑色邊框*/ 
        border:2px solid orchid;/*1像素虛線 紅色框*/
   }
</style>

</head>
<body>