选择器与css优化

交集选择器：

以 . 号表示：

<style>
    div.box {
        color: red;
    }
</style>

并集选择器：

以 ，. 表示：

<style>
    div,.box,p.box,#box {
        color: red;
    }
</style>

兄弟相邻选择器：

以 + 号表示：

<title>相邻兄弟选择器</title>
<style>
    div + p {
        color: red;
    }
</style>

通用的兄弟选择器（可选择以后的所以指定标签）：

以 ~ 表示：

<style>
    div ~ p {
        color: red;
    }
</style>

伪类选择器之hover：

<style>
    .box {
        width: 100px;
        height: 100px;
        border: 1px solid #000000;
    }
    .box:hover {
        cursor: pointer; /*鼠标指针*/
        background-color: red;
    }
</style>

伪类选择器之first：

<style>
    ul>li {
        list-style: none; /*去掉li前面的小圆点*/
    }
    li:first-child {
        color: red;
    }
    li:last-child {
        color: blue;
    }
    /*li:first-child + li {
        color: green;
    }*/
    li:nth-child(3) {
        color: green;
    }
</style>

伪类选择器之beforeandafter：

<style>
    ul>li {
        list-style: none; /*去掉li前面的小圆点*/
    }
    li:first-child {
        color: red;
    }
    li:last-child {
        color: blue;
    }
    /*li:first-child + li {
        color: green;
    }*/
    li:nth-child(3) {
        color: green;
    }
</style>

定位：

<style>
    /*通配符选择器，它会匹配页面中所有的元素*/
    * {
        padding: 0; /*内边距*/
        margin: 0; /*外边距*/
    }
    /*#box {
        width: 100%;
        height: 20px;
        background-color: gray;
    }*/
    .top {
        width: 100%;
        height: 50px;
        background-color: deeppink;
        position: relative;
        display: block; /*none表示隐藏，block表示显示*/
    }
    .center {
        width: 500px;
        height: 100px;
        background-color: blueviolet;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%); /*称这个元素本身的宽度和高度的一半 CSS3*/
        /*margin-left: -250px;
        margin-top: -50px;*/
    }
    .bottom {
        width: 100%;
        height: 30px;
        background-color: green;
        position: fixed;
        left: 10px;
        bottom: 10px;
    }
    body {
        height: 2000px;
    }
</style>

内边距：

用padding来定义

<style>
    .class{
        width: 200px;
        /*height: 100px;*/
        border:1px solid black;
        /*做内边距*/
       /* padding-left: 20px;
        padding-top: 20px;
        padding-right: 20px;
        padding-bottom: 20px;*/
        padding: 10px 20px 30px 40px ;
    }
</style>

外边距:

用margin 属性来指定 同padding

<style>
    .fa{
        width: 300px;
        height: 200px;
        border: 1px solid gray;
    }
    .so{
        height: 100px;
        width: 200px;
        border: 1px solid chartreuse;
        margin-left: 20px;
        margin-top: 20px;
    }
</style>

边框设计：

<style>
    .box1{
        /*width: 100px;
        height: 100px;
        background-color: #ccc;
        !*设置左边框的颜色*!
        border-left-color: red;
        !*设置左边框的样式*!
        border-left-style: dashed;
        border-left-width: 5px;


        border-top-color: blue;
        border-top-style: solid;
        border-top-width: 2px;*/
        border:2px solid#000
    }
</style>

圆角：

定义圆角用 border-radius 属性来定义

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: pink;
        /* border-radius:50% ;*//*圆*/
        border-radius:60px 60px 60px 60px/100px 100px 60px 60px
    }
</style>

浮动（仅作了解）：

<style>
    ul,li{
        padding: 0;
        margin:0;
        ;
    }
    li {
        list-style: none;
        width: 60px;
        height: 25px;
        float: left;
    }
    .clear {
        /*清除浮动*/
        clear: both;

    }
</style>

背景图片：

通过这样的的方式来设置图片时，需要background-images来设置，并写在url（）中
 但是，如果图片不够打的话一以下方式:
 1. no repeat,不平铺
 2. repeat-x,x轴方向平铺
 3. repeat-y,y轴方向平铺
 4. repeat,x,y方向都平铺（默认值）

如果希望背景图片在容器的中心位置

需要用background-position来指定，有：
1.left top
2.right top
3.left bottom
4.right bottom
5.left center
6.right center
7.center center

<style>
    .box{
        height: 500px;
        width: 500px;
        border: 1px dotted#000;
        /*设置背景*/
        /* background-image: url("images/meat.jpg");*/
        /* background-repeat:no-repeat ;*/
        /*background-position: left center;*/
        /*background-position: 20px 50px;*/
        /*background:gray url("images/meat.jpg") no-repeat center center;*/


    }
</style>

背景颜色：

<style>
  .box    {
      width: 300px;
      height: 300px;
      background-color: purple;
  }
  .box1{
      width: 100px;
      height: 100px;
      background-color: #ccc;
      position:absolute;
      left:8px ;
      top: 8px;

  }
  .box2{
      height: 100px;
      width: 100px;
      /*rgb中要写数字，在0到255之间，值越小颜色越深*/
      background-color: rgb(255,255,0);
      position: absolute;
      left: 8px;
      top: 120px;
  }
  .box3{
      height: 100px;
      width: 100px;
      /*rgb中最后一个值表示透明值，范围在0~1间，0未完全透明*/
      background-color:rgba(0,255,255,0.5) ;
      position: absolute;
      left: 120px;
      top: 20px;
  }
</style>

阴影：

定义阴影效果使用 box-shadow：
 - h-shadow:必须。水平阴影位置。可以负值
 - v-shadow:必须。垂直阴影位置。可以负值
 - blur：可选。模糊距离
 - spread:可选。阴影尺寸
 - color:可选。阴影的颜色
 - position：可选。将外部阴影（outside）改为内部阴影。默认为inse

<style>
    .box {
        height: 100px;
        width: 100px;
        background: pink;
        box-shadow: 50px 5px 5px 20px gray;

    }
</style>