02.行内元素与块级元素，背景与css三大特性

四. 再谈行内元素与块级元素

​ 块级元素是可以指定宽高的，但是行内元素的宽高是根据内容而定，指定宽高无效。

4.1 特殊的p标签

​ p标签中可以放行内元素，但是不能放任何的块级元素。

4.2 特殊的img标签

​ img标签是一个行内元素，但是它是可以设置宽高，但是业界有时候会说img是行内块级元素。

4.4 显示模式的转换

​ dispaly: inline;

​ display: block;

​ dispaly: inline-block; 行内块级元素会导致在前端领域非常经典的空白间隙问题。

​ 解决空白间隙两种方案：

1. 在body上设置font-size: 0; 但是在每个盒子中得去指定字体的大小。

2. 第二种方式，使用一个小技巧

   <div>电脑</div><!--
   --><div>手机</div><!--
   --><div>平板</div>
   

五. 单行文本垂直显示

​ 让文字的行高等于盒子的高度就可以实现垂直居中。

六. 背景

背景主要的作用是给盒子设置背景颜色或者背景图片。

background-color: red;    /* 背景颜色为红色 */
background-image: url('images/1.png') /** 设置背景图片 */
/* background-repeat: repeat-y; 垂直方向重复 */
/* background-repeat: repeat-x; 水平方向重复 */
background-repeat: no-repeat;  /** 背景不重复 */

背景的位置：

/* background-position 有两个属性，一个是水平方向(left center right)，一个为垂直方向(top center bottom) */
background-position: center top;  /* 水平方向居中，垂直方向在顶部 */ 
background-position: left bottom;  /* 水平方向在左边，垂直方向在底部 */ 
background-position: left center;  /* 水平方向在右边，垂直方向居中 */ 

七. CSS的三大特性

7.1 层叠性

div {
    height: 200px;
    width: 200px;
}
div {
	height: 100px;
	width: 100px
    background-color: red;
}
<div></div>

7.2 继承性

​ text-、font-、line-以及color都可以实现继承。

​ a标签对于color是无法继承，所以对于color子标签的颜色需要单独的设定。

7.3 优先级(权重)(重点)

权重计算法：id个数，class个数，标签个数

如下：

#div .tbn i{    /**它的权重是1,1,1  */

    
}

.tbn i{     /** 它的权重是0,1,1小于上一个权重将使用上面那个样式*/
    
}