css — 选择器、盒子模型

1. css引入方式
2. css选择器
3. css的盒模型

css: 层叠样式表

1. css引入方式

行内样式
```
<div style='color:red;'>mjj</div>
```

内嵌式

在head标签内部书写style

<style>

/*css代码*/

#box{

            background-color: greenyellow;

        }

</style>

外接式

<link href='css/index.css' rel='stylesheet'>

三种引入方式的优先级:

1.行内样式>内嵌式和外接式,
2.内嵌和外接要看谁在后面，在后面的优先级高

2. css选择器

2.1 基础选择器

1.id选择器

特定属性的元素（标签）、唯一的

语法： #xxx

2.类选择器

可以重复归类，类也可以设置多个

语法： .xxx

<style>

  .box{

    width:200px;

    height:200px;

    background-color:yellow;

 }

  <!--单独设置 类1 中某个样式与 类2 不一样-->

  .active{

    border-radius: 200px; <!--设置盒子边框-->

 }

</style>

<div class='box active'></div> <!--类1-->

<div class='box'></div>  <!--类2-->

<div class='box'></div>  <!--类2-->

3.标签选择器

标签选择器有：div{} 、p{} 、ul 、ol ...

<head>

    <meta charset="UTF-8">

    <title>Title</title>

	<style>

        a{

            /*设置文本修饰*/

            text-decoration: none;

        }

        input{

            border:none;

            outline:none;

        }

        #user{

            border: 1px solid #555;

            height: 60px;

            font-size: 20px;

            padding: 0 10px;

        }

        .box {

            width: 200px;

            height: 200px;

            background-color: yellow;

        }

        .active {

            border-radius: 4px;

        }

        #box{

            color: red;

        }

        div{

            border:1px solid #000;

        }

    </style>

</head>

<body>

<div class='box active' id="box">wusir</div>

<hr>

<div class='box'></div>

<hr>

<div class='box'></div>

<a href="">百度一下</a>

<input type="text" id="user">

</body>

2.2 高级选择器

1.后代选择器

语法：

/*用空格连接*/

div p{

  color: red;

}

2.子代选择器

语法：

/*用>连接*/

div>p{

  color: red;

}

3.组合选择器

常用于重置样式

语法：

/*用,连接*/

div,p,body,html,ul,ol....{

  padding: 0;

  margin: 0;

}

input,textarea{

            border:none;

            outline: 0;

        }

如何重置网页样式？

html,body,p,ul,ol{

    margin: 0;

    padding: 0;

}

/*通配符选择器 */

*{

    margin: 0;

    padding: 0;

}

a{

    text-decoration: none;

}

/*清除input和textarea标签的默认边框和外线*/

input,textarea{

    border: none;

    outline: none;

}

4.交集选择器

span.active

语法：

div.active{

 

}

2.3 伪类选择器

对于a标签，如果想设置a标签的样式，要作用于a标签上，对于继承性来说，a标签不起作用的

“爱恨准则” — LoVe HAte ：L - link 、V - visited 、H - hover 、A - active

/*LoVe HAte*/

/*a标签没有被访问时候设置的属性*/

a:link{

    /*color: red;*/

}

/*a标签被访问过后设置的属性*/

a:visited{

    color:yellow;

}

/*a标签被鼠标悬浮时设置的属性*/

a:hover{

    color: deeppink;

}

/*a标签被摁住的时候设置的属性*/

a:active{

    color: deepskyblue;

}

2.4 属性选择器

<style>

    input[type='text']{

        background-color: red;

    }

    input[type='checkbox']{

    }

    input[type='submit']{

    }

</style>

2.5 伪元素选择器

<style>

    /*设置内容中的第一个文字*/

    p::first-letter{

        color: red;

        font-size: 20px;

        font-weight: bold;

    }

    /*在内容前加一个@*/

    p::before{

        content:'@';

    }

    /*::after是解决浮动布局常用的一种方法*/

    /*在内容后面加一个$*/

    p::after{

        /*通过伪元素添加的内容为行内元素*/

        content:'$';

    }

</style>

注意：

1.通过伪元素添加的内容为行内元素
2.::after是解决浮动布局常用的一种方法
3.1个':'是伪类选择器，2个':'是伪元素选择器

3. css的盒模型

1.盒子模型的属性及含义：

width: 内容的宽度
height：内容的高度

padding：内边距（又叫内填充），盒子的border到内容的距离

1.单个属性分别设置不同方向的padding

padding-top  顶部填充的距离

padding-right  右侧填充的距离

padding-bottom  底部填充的距离

padding-left  左侧填充的距离

2.综合属性，多个属性用空格隔开。

/*综合设置：四个方向的内边距为：*/

padding: 20px;

/*盒子的上下内边距设置为第一个数值，左右内边距设置第二个数值*/

/*上  左右  下*/

padding: 0 20px 30px;

/*上  右  下  左*/

padding: 10px 20px 30px 40px;

border：盒子的边框

boder边框三要素：粗细、线性样式、颜色

1.按照三要素书写border

border-width:3px;  /*边框四边线的粗细*/

border-style:solid; /*边框线样式*/

border-color:red;  /*边框线颜色*/

/*上面三句代码相当于一句代码：*/

border:3px solid red;

/*同样,也可以分别设置边框四个方向的粗细 线性样式 颜色,跟padding的四个方向一样。*/

/*上下5px  左右10px*/

border-width:5px 10px;

/*上：实线  右：点状线  下：双线  左：虚线*/

border-style: solid dotted double dashed;

/*上：红色 左右：绿色 下：黄色*/

border-color: red green yellow;

2.按照方向划分

/*boder的顶部边框*/

border-top-width: 10px;

border-top-color: red;

border-top-style: solid;

/*可以简写成*/

border-top: 10px solid red;

/*boder的右侧边框*/

border-right-width: 10px;

border-right-color: red;

border-right-style: solid;

/*可以简写成*/

border-right: 10px solid red;

/*boder的底部边框*/

border-bottom-width: 10px;

border-bottom-color: red;

border-bottom-style: solid;

/*可以简写成*/

border-bottom: 10px solid red;

/*boder的左侧边框*/

border-left-width: 10px;

border-left-color: red;

border-left-style:solid;

/*可以简写成*/

border-left: 10px solid red;

3.清除默认边框

清除某些标签默认的边框：border:none; 或者 border:0;

清除某些标签默认的外边框：outline: none; 或者 border:0;

4.边框属性

1.设置为圆角或者圆

语法： border-radius:20px;
```
<style>

        #box{

            width: 300px;

            height: 300px;

            background-color: red;

            /*border-radius: 50%;*/

            border-radius: 4px;

            border: 3px solid blue;

        }

         #box:hover{

             background-color: #000;

         }

    </style>
```
除了同时设置四个圆角以外，还可以单独对每个角进行设置。对应四个角，CSS3提供四个单独的属性：
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
这四个属性都可以同时设置1到2个值。如果设置1个值，表示水平半径与垂直半径相等。如果设置2个值，第一个值表示水平半径，第二个值表示垂直半径。

2.设置阴影效果

语法：box-shadow: h-shadow v-shadow blur color inset;

h-shadow 水平阴影的位置、距离

v-shadow 垂直阴影的位置、距离

blur 模糊距离、程度

color 阴影的颜色

inset 将外部阴影 (outset，默认值) 改为内部阴影。

<style>

    .box{

        width: 200px;

        height: 200px;

        background-color: #000;

        margin: 100px auto;

        position: relative;

        transition: all .2s linear;

    }

    .box:hover{

        top: -2px;

        box-shadow: 0 0  20px red;

    }

</style>

margin：盒子的外边距，一个盒子到另一个盒子的距离。
- 水平方向的外边距
```
/*左外边距*/

margin-left: 30px;

/*右外边距*/

margin-right: 20px;
```
- 垂直方向外边距
  
  margin在水平方向上不会出现问题，但在垂直方向上会出现外边距合并（或重叠）现象，这种现象叫做塌陷问题，会以设置的最大的magrin距离为基准。
  
  如何避免出现这种问题呢？
  - 为了避免出现塌陷问题，只需要设置一个盒子的一个方向的margin即可。
```
/*顶部外边距*/

margin-top:50px;

/*底部外边距*/

margin-bottom:30px;
```
- 也可以综合设置水平与垂直方向的外边距
```
/*水平居中*/

margin:0 auto;
```

2.盒子模型图