这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
今天主要学习两个知识点，选择器的优先级和实现响应式布局
选择器的优先级：
-
第一优先级：
!important会覆盖页面内任何位置的元素样式 -
1.内联样式，如
style="color: green"，权值为1000 -
2.ID选择器，如
#app，权值为0100 -
3.类、伪类、属性选择器，如
.foo, :first-child, div[class="foo"]，权值为0010 -
4.标签、伪元素选择器，如
div::first-line，权值为0001 -
5.通配符、子类选择器、兄弟选择器，如
*, >, +，权值为0000 -
6.继承的样式没有权值
什么是响应式布局
在日常生活中，我们可以使用电脑，手机，平板来浏览网页。这些不同的媒介的屏幕大小是不一样的，那么我们如何保证自己设计的网页在任何大小的屏幕上都能有一个完美的布局呢，这里就要用到我们这一节要讲的响应式布局的知识啦。所谓响应式布局，就是页面的布局能够随着屏幕大小的变化而变化，从而实现在任何大小的屏幕上都能以最完美的布局来展示我们的内容。本文将以示例的形式讲解如何利用原生的 CSS 来实现页面的响应式布局，知识点都非常基础但同时也非常重要，适合新手学习。
示例一：响应式图片
（图片大小随显示区域的变化而变化）
从上图中我们可以看出，图片在随着显示区域的变小而变小，这是怎么实现的呢，我们先来看一下相应的 HTML 和 CSS 代码：
//HTML代码
<body>
<img src="http://www.chenxin.art/imgs/xingkong.jpg" alt="drawing" />
</body>
//CSS代码
img {
width: 1200px;
max-width: 100%;
}
width: 1200px; 规定了图片的宽度。这里我们只规定了宽度而没有规定高度是因为，对于 img 标签而言，如果我们只规定高度和宽度中的一个的话，没有规定的那一个会根据图片本身的比例进行自适应，也就是说可以保证图片的比例不变。
max-width: 100% 才是实现响应式的关键。这句代码的意思是，图片的最大宽度不能超过 100% 。这个 100% 是相对于其父元素来说的。在本例中， img 标签的父元素是 body 标签，所以它的意思其实是 img 的宽度不能超过 body 的宽度，而body 的宽度实际上就是浏览器窗口可见区域的宽度啦。这个时候我们可以分两种情况来讨论：
-
当浏览器的宽度大于或等于
1200px时，因为图片的宽度为1200px，满足“图片的宽度不能大于其父元素的宽度”这一限制条件，所以图片保持宽度1200px不变。 -
当浏览器的宽度小于
1200px时，此时不满足“图片的宽度不能大于其父元素的宽度”这一限制条件，所以图片会缩小到满足条件为止，最后的结果就是图片的宽度会等于浏览器的宽度。这就是为什么图片会随着窗口的变窄而变小了。
类似的 CSS 属性还有 min-width 、max-height 、min-height ，原理都是一样的，大家可以在这个网站上了解他们的详细用法。
