css - selector box model

table of Contents

1. css way of introduction
2. css selectors
3. css box model

css: Cascading Style Sheets

1. css way of introduction

Inline style
```
<div style='color:red;'>mjj</div>
```

Inner fitting formula

Writing style tags within the head

<style>
/*css代码*/
#box{
            background-color: greenyellow;
        }
</style>

External

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

Three kinds of ways to introduce priority:

1. inline style> embedded and external,
2. The embedded and external to see who is behind a high priority in the back

2. css selectors

2.1 basis selector

1.id selector

Elements of a particular attribute (tag), unique

Syntax: #xxx

2. Class Selector

Classification may be repeated, a plurality of classes may be provided

Syntax: .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. tag selector

Tag selector has: 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 Senior selector

1. descendant selectors

grammar:

/*用空格连接*/
div p{
  color: red;
}

2. descendant selector

grammar:

/*用>连接*/
div>p{
  color: red;
}

3. The combination of the selector

Commonly used to reset the style

grammar:

/*用,连接*/
div,p,body,html,ul,ol....{
  padding: 0;
  margin: 0;
}
input,textarea{
            border:none;
            outline: 0;
        }

How to reset the page style?

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. intersection selector

span.active

grammar:

div.active{
 
}

2.3 the pseudo-class selector

For a label, if you want to style a label, to act on a label, it is for inheritance, a label does not work

"Love and Guidelines" - 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 attribute selector

<style>
    input[type='text']{
        background-color: red;
    }
    input[type='checkbox']{

    }
    input[type='submit']{

    }
</style>

2.5 the pseudo-element selector

<style>
    /*设置内容中的第一个文字*/
    p::first-letter{
        color: red;
        font-size: 20px;
        font-weight: bold;
    }
    /*在内容前加一个@*/
    p::before{
        content:'@';
    }
    /*::after是解决浮动布局常用的一种方法*/
    /*在内容后面加一个$*/
    p::after{
        /*通过伪元素添加的内容为行内元素*/
        content:'$';
    }
</style>

note:

1. Content by adding dummy elements inline elements
2.::after solution is a method commonly used floating layout
3.1 ':' it is a pseudo-class selectors, 2 ':' pseudo-element is a selector

3. css box model

1. Properties box model and the meaning of:

Width content: width
height: height of the content of

From padding (also called the filling), the contents of the box border: padding

1. The individual properties of different directions are provided padding

padding-top  顶部填充的距离
padding-right  右侧填充的距离
padding-bottom  底部填充的距离
padding-left  左侧填充的距离

2. Integrated property, multiple properties separated by a space.

/*综合设置：四个方向的内边距为：*/
padding: 20px;

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


/*上  左右  下*/
padding: 0 20px 30px;

/*上  右  下  左*/
padding: 10px 20px 30px 40px;

border: the border of the box

boder border of three elements: weight, linear style, color

1. In accordance with the three elements of writing 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. Follow the direction of division

/*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. Clear the default border

Clear labeling of certain default border: border: none; or border: 0;

Clear label certain default outer border: outline: none; or border: 0;
4. Border Properties
- 1. Set round or fillet
  
  Syntax: 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>
```
  In addition also set four rounded corners, it also can be provided separately for each corner. Corresponding to the four corners, CSS3 provide four separate properties:
  - border-top-left-radius
  - border-top-right-radius
  - border-bottom-right-radius
  - border-bottom-left-radius
  These four attributes are provided one to two values simultaneously. If a value that represents the horizontal radius and the vertical radius equal. If the two values, the first value represents a horizontal radius, the second value represents a vertical radius.
- 2. Set the shadow effect
  
  语法：box-shadow: h-shadow v-shadow blur color inset;
  
  The horizontal position of the shadow of h-shadow, from
  
  The vertical position of the shadow of v-shadow, from
  
  blur blurred distance, degree
  
  color shadow color
  
  The inset outer shadow (outset, default) to the internal shadow.
```
<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: from the outside of the box, a box to the box from another.
- Outside the horizontal distance
```
/*左外边距*/
margin-left: 30px;
/*右外边距*/
margin-right: 20px;
```
- Vertical Margin
  
  margin in the horizontal direction will not be a problem, but in the vertical direction appears margins merge (or overlapping) phenomenon, which is called subsidence problems , will set the maximum distance magrin as the reference.
  
  How to avoid this problem?
  - In order to avoid the collapse of the problem, only you need to set a direction of a box of margin can be.
```
/*顶部外边距*/
margin-top:50px;
/*底部外边距*/
margin-bottom:30px;
```
- It may be provided outside the integrated horizontal and vertical distance
```
/*水平居中*/
margin:0 auto;
```

Figure 2. The box model