CSS背景相关设置，元素显示模式，三大特性

一、背景相关属性

1.背景颜色

属性名：background-color（bgc）

取值：颜色取值。关键字、rgb表示法、rgba表示法、十六进制..

<style>
    div{
        width:400;
        height:400;/*设置盒子的大小*/
        background-color:transparent;/*默认值为透明*/       
        }
</style>

        通过设置背景颜色来查看盒子在页面中的布局

2.背景图片

属性名：background-image（bgi）

属性值：background-image:url('图片路径')

<style>
    div{
        width:400;
        height:400;/*设置盒子的大小*/
        background-image:url(.图片路径)      
        }
</style>

网页自动将图片水平垂直平铺，不会拉伸来填充整个盒子，类似铺地砖。

和背景颜色一样，如果在页面中没有设置盒子是无法将图片或颜色填充到网页当中的。 

3.背景平铺

属性名：background-repeat(bgr)

属性值：repeat（水平和垂直都平铺，是默认值）

              no-repeat（不平铺）

              repeat-x (沿水平方向平铺）

              repeat-y（沿垂直方向平铺）

<style>
    div{
        width:400;
        height:400;/*设置盒子的大小*/
        background-image:url(.图片路径)  
        background-repeat：no-repeat；    
        }
</style>

4.背景位置

属性名：background-position(bgp)

属性值：background-position:水平方向位置 垂直方向位置；

      1.方位上的取值：  水平方向取值：left、center、right

                                    垂直方向取值：top、center、bottom

        2.数字+px（坐标）：原点是盒子的左上角，将图片的左上角与坐标点重合。

两种取值方法可以混用，但是要注意先水平后垂直

5.背景相关属性的连写

属性名：background（bg）

属性值：单个属性值的合写，取值之间用空格隔开

书写顺序：background：color image repeat position

        可以按照需求省略，省略后是默认值

        如果要将连写和单独写在一起，要么把单独的样式写在连写下面，要么把单独的样式写在连写的里面

6.img标签和背景图片的区别

 1.使用img标签可以设置长宽高

 2.div标签+背景图片，需要设置div的长宽，但是图片只是div的一个装饰，不能够单独撑开div标签

二、元素显示模式

1.块级元素

如果一个元素的属性为block属性就表示他是一个块级元素。即display：block

块元素的显示特点：独占一行、宽度默认为父元素的宽，高度由内容撑开、可以设置宽高。

2.行内元素 

如果一个元素的属性为inline就表示他是一个行内元素。即display：inline

显示特点：一行可以显示多个行内元素，宽度和高度默认由内容撑开，但是不可以是设置宽高。

3.行内块元素

如果一个元素的属性为inline-block就表示他是一个行内元素。即display：inline-block

显示特点：一行可以显示多个元素，可以设置宽高

4.元素显示模式转换

属性名称：display：要转换成的元素

属性值：display：block、inline、inline-block

写在style中要转换的标签内

5.HTML的嵌套

块级元素一般可以嵌套文本、块级元素、行内元素、行内块元素等等

但是p标签不能嵌套div、p、h、等块级元素

在a标签内可以嵌套任意元素，但是a标签不能嵌套a标签

三、CSS的三大特性

1.继承性

网页中的子元素会默认继承父元素的特点

常见继承的属性：color、font-style……

使用CSS的继承性可以在一定程度上减少代码，在父标签上进行子标签的属性设置。

继承失效的特殊情况：如果元素身上有浏览器的默认样式，虽然会继承父元素的属性，但是优先显示浏览器的默认样式。

如：a标签的color会继承失效，会被浏览器的默认样式覆盖。h系列的标签的font-size会继承失效。div标签的高度不能继承，但宽度有类似继承的效果，在删除div子元素的的宽度后，会与父元素的宽度一致，这是因为div是一个块元素，会独占一行，这是他本身的特性。

2.层叠性

给同一个标签设置不同的样式 ，此时样式会层叠叠加，会共同作用在标签上
给同一个标签设置相同的样式，此时样式会层叠覆盖 ， 最终写在最后的样式会生效
当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

3.优先级

不同选择器具有不同的优先级，优先级高的会覆盖优先级低选择器样式

优先级公式：继承＜通配符选择器 ＜标签选择器＜类选择器＜id选择器 ＜行内样式 <！important
注意点：
1.limportant写在属性传的后面，分号的前面！
2.limportant不能提升继承的优先级，只要是继承优先级最低！
3.实际开发中不建议使用 !important