2019-04-18

<html>
<head>
<meta charset="utf-8">
<title>浮动对元素产生的影响</title>
<style>
.dv1,.dv2,.dv3{
width:200px;
height:200px;
}
.dv1{
background:red;
/左浮动/
float:left;
}
.dv2{
background:blue;
float:left;
}
.dv3{
background:yellow;
float:left;
}
p{
height:100px;
background:black;
}
/清除浮动方法一/
/.clear{
clear:both;清除浮动两端所带来的影响
}/
/清除浮动方法二/
/* overflow:visible / hidden; scroll/ auto /
/ .box{ /
/ overflow:hidden; //给父元素添加/
/ overflow:auto;
} */

    /*清除浮动的方法三*/
    /* .box{
        height:200px;
    } */

    /*清除浮动方法四  伪类*/
    .box:after{
        content:'';/*在box后面添加内容为空*/
        display:block;/*把添加的内容转换成块元素*/
        clear:both;  /*清除元素两端的浮动*/
    }
</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; 简写
圆角

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

border-top-left-radius:左上的圆角
border-top-right-radius:右上
border-bottom-left-radius:左下
border-bottom-right-radius:右下
外边距内边距

外边距：围绕在元素周围的空白区域默认不被其他元素占用的
作用：拉开元素之间的距离
语法：
margin:值 5px 百分比 20%；
取值：
px 像素
% 百分比
auto(自动) 只在左右方向有效
负值 -5px;

 margin:20px;  设置4个方向的外边距
     margin-top:5px;设置的是上外边距
 margin-bottom：5px;下外边距
 margin-left:  左外边距
 margin-right:右外边距


    margin:20px;  设置4个方向的外边距
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>这是一个p标签</p>
<p>vbvbbbv</p>
<div class="box">这是一个div元素</div>
<ul>
<li class='box'>111111</li>
<li class='box'>22222</li>
<li class="box">33333</li>
</ul>
<div id="container">这是一个带id选择器的div</div>
<div id='left'></div>
4.后代选择器：选取的是父元素下的所有子元素
ul li{}

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

       6.相邻兄弟选择器
            .good+li

       7.通用兄弟选择器
            .good~li

       8.结构伪类选择器
              ul>li:first-child{}  第一个孩子
              ul>li:last-child{}   最后一个孩子
              ul>li:nth-child(n){}    第n个孩子

字体相关样式：
     
     font-family:"宋体";设置字体类型
     font-size:30px;  字体大小
     font-style:"normal/italic(斜体)" 字体风格
     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像素 实线 黑色边框*/ 
        border:2px solid orchid;/*1像素虚线 红色框*/
   }
</style>

</head>
<body>

<h3>咏鹅</h3>
<p class='first'>鹅鹅鹅</p>
<p class='third'>曲项向天歌</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像素 实线 黑色边框*/ 
        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像素 实线 黑色边框*/ 
        border:2px solid orchid;/*1像素虚线 红色框*/
   }
</style>

</head>
<body>