#1、css单位

1.1、绝对单位

cm 厘米
mm 毫米
in 英寸
pt 磅（point），印刷的点数
pc pica，1pc=12pt 在前端开发中，不会用到绝对定位，

1.2、相对单位

px 像素
% 百分比
em 1em等于“当前元素”字体大小
rem 1rem等于“根元素”字体大小除了这些，还有ex、vw和vh等。（1)px 全称pixel（像素)指的是一张图片中最小的点。或者计算机屏幕中最小的点。一张图片是由很多的小方点组成的，其中，每一个小方点就是一个像素. 严格来说，px也是属于相对单位，因为屏幕分辨率的不同，1px的大小也是不同的。例如windows系统的分辨率为每英寸96px，osx系统的分辨率为每英寸72px。如不考虑屏幕分辨率，我们也可以把px当作绝对单位来看。（2）% 在css中，支持百分比作为单位的属性很多，大致可以分为以下三大类； 1）width、height、font-size的百分比是相对于父元素“相同属性”的值来计算的。 2)line-height的百分比是相对于父元素的font-size来计算的。 3）vertical-align的百分比是相对当前元素的line-height值来计算的。 line-height和vertical-align这两个属性有点特殊，拿font-size属性来说，如果父元素width为100px，子元素width为50%，则表示子元素实际width为50px。如果父元素font-size为30px，子元素font-size为50%，则表示子元素实际font-size为15px。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css进阶</title>
    <style>
    #father{
        width:200px;
        height:160px;
        border:1px solid blue;
        font-size: 30px;
    }
    #son{
        width:50%;
        height: 50%;
        border: 1px solid red;
        font-size: 50%;
    }
    </style>
</head>
<body>
    <div id="father">
        天天学习
        <div id="son">天天学习</div>
    </div>
</body>
</html>

（3）、em 在css中，em是相对于“当前元素”的字体大小而言的，其中，1em等于“当前元素字体大小。这里的字体大小指的是以px为单位的font-size值。例如：当前元素的font-size值为10px。则1em等于10px；当前元素的font-size值为20培训，则1em等于20px。注：如果当前元素的font-size没有定义，则当前元素会继承父元素的font-size。如果当前元素的所有祖先元素都没有定义font-size，则当前元素会继承浏览器默认的font-size。其中，所有浏览器默认的font-size值都是16px。在css中，使用em作为单位有三个小技巧。 1）首行缩进使用text-indent：2em实现段落的首行缩进两个字的距离。举例：

p{
        font-size: 14px;
        text-indent:2em;
        width: 360px;
}

<h3>爱莲说</h3>
    <p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，诗人深爱牡丹。</p>

text-indent:2em=text-indent:28px; 2)使用em作为统一单位所有浏览器默认字体大小都是16px。如果在一个页面中，想要统一使用em为单位，此时可以拿默认字体大小开刀。也就是说，对于任何元素我们都不需要设置font-size为多少px，而是继承根元素的font-size值（即16px），然后使用em换算即可。如果使用浏览器默认字体大小（16px），其中em与px对应关系为： 1em=16px * 1 =16px; 0.75em =16px0.75=12px 为了简化font-size计算，在css中提前声明“body{font-size：62.5%}”，是的默认字体大小变为16px62.5%=10px，此时em和px对应关系如下：1em=10px 0.75em=7.5px ，也就是说，只需要将原来的px值除以10，然后换上em单位就可以了，举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>单位转换</title>
    <style type="text/css">
    body{
        font-size: 62.5%;
    }
    #p1{
        font-size: 1em;
    }
    #p2{
        font-size: 1.5em;
    }
    #p3{
        font-size: 2em;
    }
    </style>
</head>
<body>
    <p id="p1">当前字体大小为1em，也就是10px</p>
    <p id="p2">当前字体大小为1.5em，也就是15px</p>
    <p id="p3">当前字体大小为2em，也就是20px</p>
</body>
</html>

一个p元素width为150px，height为75px，font-size:15px;text-indent为30px。如果我们使用em为单位，则举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>单位转换</title>
    <style type="text/css">
   *{
       padding: 0;
       margin: 0;
   }
   html{
       font-size: 62.5%;
   }
   p{
       display: inline-block;
       border: 1px solid silver;  
   }
     /* 使用px作为单位 */
   #p1{
    font-size: 15px;
    width: 150px;
    height: 75px;
    text-indent: 30px;
   }
        /* 使用em作为单位 */
   #p2{
    font-size: 1.5em;
    width: 10em;
    height:5em;
    text-indent: 2em;
   }
    </style>
</head>
<body>
    <p id="p1">我们今天开始培训第二天啦！感觉有点困！</p>
    <p id="p2">我们今天开始培训第二天啦！感觉有点困！</p>
</body>
</html>

在css中，em是相对于“当前元素”的字体大小而言的，其中，1em等于“当前元素”字体大小，在此例子中，当前元素的font-size为10px*1.5em=15px，如果width和height也以em为单位，就要以当前元素的font-size值（15px)再计算一次。

width:150px/15px=10em;
height:75px/15px=5em;

也就是说，在实际的开发中，对于em，我们一般需要计算两次：第一次，当前元素font-size属性的px值；第二次，当前元素其他属性（如width、height等）的px值。 3）使用em作为字体大小单位 em这个特点在跨平台网站开发中有着明显的优势； 4、rem 全称font size of the root element ，指的是相对于根元素（即html元素）的字体大小，rem是css3新引入的单位，rem与em相似，区别在于：rem是相对于根元素（即html元素）的字体大小。em是相对于“当前元素”的字体大小，这里的font-size是以px为单位的font-size值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>单位转换</title>
    <style type="text/css">
   html{
       font-size: 62.5%;
   }
   #father{
       width: 200px;
       height: 160px;
       border: 1px solid blue;
       font-size: 2rem;
   }
   #son{
       width: 150px;
       height: 100px;
       border: 1px solid red;
       font-size: 2rem;
   }
    </style>
</head>
<body>
    <div id="father">
        cbd学习css
        <div id="son">cbd学习css</div>
    </div>
</body>
</html>

2、css特性

css具有两大特性：继承性和层叠性。

2.1 继承性

css的继承性，指的是子元素继承了父元素的某些样式属性，例如在父元素定义字体颜色（color属性），子元素会继承父元素的字体颜色，并不是所有的属性具有继承性，如padding、margin、border等就不具有继承性，在css中，具有继承性的属性有三大类：

（1）文本相关属性：font-family,font-size,font-style,font-weight、font、line-height、text-align、text-indent、word-spacing.
(2)列表相关属性：list-style-image、list-style-position、list-style-type、list-style。
(3)颜色相关属性：color。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>单位转换</title>
    <style type="text/css">
   #father{
       color: red;
       font-weight: bold;
   }
    </style>
</head>
<body>
    <div id="father">
        cbd学习css
        <div id="son">cbd学习css</div>
    </div>
</body>
</html>

父元素定义了color和font-weight两个属性，从预览效果中我们可以看到，子元素继承了父元素的两个属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>单位转换</title>
    <style type="text/css">
   #father{
       color: red;
       font-weight: bold;
   }
    </style>
</head>
<body>
    <div id="father">
        cbd学习css
        <a href="http://www.lvyestudy.com">cbd learning css</a>
    </div>
</body>
</html>

这里父元素定义color：red，父元素变红，子元素没有变红是因为a标签本身有默认的颜色样式，优先级比继承的要高，如果要改变a标签的颜色，必须选中a标签进行操作才行，利用css的继承性，，从而减少重复代码的编写。

2.2 层叠性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>单位转换</title>
    <style type="text/css">
    div{color: red;}
    div{color: orange;}
    div{color: blue;}
    </style>
</head>
<body>
    <div>cbd learn css</div>
    <div>cbd learn css</div>
    <div>cbd learn css</div>
</body>
</html>

在这个例子中，我们首先定义了所有的div颜色为red，然后定义所有div颜色为orange，最后定义所有的div颜色为blue，由于css的层叠性，“color：orange”会覆盖“color：red”，然后“color：blue”会覆盖“color：orange”，最终所有div为蓝色，css的层叠，指的就是样式的覆盖，对于同一个元素，有“后来者居上”原则，满足三个条件：元素相同、属性相同、权重相同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>单位转换</title>
    <style type="text/css">
    #second{color:purple;}
    div{color: red;}
    </style>
</head>
<body>
    <div>cbd learn css</div>
    <div id="second">cbd learn css</div>
    <div>cbd learn css</div>
</body>
</html>

2.3 css优先级

样式覆盖发生冲突常见的五种情况：（1）引用方式冲突；（2）继承方式冲突；（最近的祖先元素获胜）（3）指定样式冲突；所谓的指定样式，是指“当前元素”的样式，当直接指定的样式发生冲突时，样式权重高者获胜。在css中，各种选择器的权重如图表所示；

通配符：0
伪元素：1；
元素选择器：1；
class选择器：10；
伪类：10；
属性选择器：10；
id选择器：100；
行内样式：1000；常见的伪元素只有四个：即：：before、：：after、：：first-letter、：：first-line。伪类我们经常见到，如：hover、：first-child等；常用的选择器优先级如下：行内样式>id选择器>class选择器>元素选择器。（4）继承样式与指定样式冲突；当继承样式与指定样式冲突时，指定样式获胜，（5）！important。想要覆盖其他所有样式，可以使用！important来实现。

CSS基础知识