Html/CSS03（盒子模型传参）

今天是2018年7月11日

1.盒子模型的传参

盒子模型中需要给top/bottom/left/right值。

div{
     margin: 100px ;
     //四个方向都改变
     margin: 100px 200px ;
     //上下100 左右200
     margin: 100px 200px 300px ;
     //上100 左右200 下300
     margin: 100px 200px 300px 400px ;
     //上100右200下300左400 
     // padding同理
        }

2.元素的起始位置

元素内容的起始位置是基于其自身width，height的起始位置

3.标签的分类

3.1块标签

块标签的特点是：独占一行，可以设置width和height属性，常用的快标签有h1-h6 p ul-li dl-dt-dd div

3.2内联标签

内联标签的特点是：并排显示，不能设置width和height属性，不能设置margin-top，margin-bottom属性，重用的内联标签有 a span i em strong b

3.3内联块标签

内联块标签的特点是可以并排显示也可以设置width和height属性，常用的内联块标签有input button img

4.内联元素的居中

虽然内联标签不能设置width和height属性，不能设置margin-top，margin-bottom属性，但我们可以通过如下修改使之水平居中。

5.不修改display属性的情况下使内联和内联块元素水平居中

当不使用display时我们可以修改父级元素的居中方式来使内联元素水平居中，如下：

6.Css选择器

前面已经学习了元素选择器，类名选择器，Id选择器和伪类选择器，今天要补充六种Css选择器

6.1分组选择器

分组选择器是将元素分组选择的Css选择器。

p,h1,div{
         color: red;
        }

6.2后代选择器

后代选择器有两种，第一种选择了指定类的指定子类，第二种选择了指定子0类中的所有指定类如下

//选择了parent类所有“子类”（仅限子类）中的p标签
.parent>p{
         color:red;
        }
//选择了parent标签中的所有p标签
.parent p{
         color:red;
        }

6.3兄弟选择器

兄弟选择器也有两种使用方法，第一种方式选择了指定类兄弟类的第一个标签，第二种方式选择了指定类兄弟类的所有指定标签，如下

//选择了div标签兄弟类后的第一个p标签
div+p{
       color: rebeccapurple;
        }
//选择了div标签兄弟类中所有的p标签
div~p{
       color: red;
        }

6.4伪类选择器

伪类选择器之前已经接触过了，如下

//当鼠标聚焦在input标签中时，使背景颜色变成紫罗兰色
 input:focus{
             background-color: violet;
         }

6.5伪元素选择器

伪元素选择器可以在指定标签的指定位置生成一个新的自定义标签（伪标签）

//在div标签之前插入“我在DIV前面”
 div:before{
            content: "我在DIV前面";
            display: block;
         }

6.6属性选择器

属性选择器利用标签的属性选择标签，一般少用

div[class="one"]{
             color: red;
         }

7.Css选择器的优先

测试如下代码很容易发现，Css选择器的优先级别分别是

//！important>#id>.class>class

8.Css选择器的权重

选择器嵌套的层级越多，选择器的权重就越多

.parent{
        color: red;
        }
.parent>.child{
            color: green;
        }