今日完成：

任务七页面一和二的一部分

Bootstrap引入语句：

<!-- 可选的Bootstrap主题文件（一般不使用） -->

<script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- 新 Bootstrap 核心 CSS 文件 -->

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

active选择器表示激活的状态

雪碧图最好都是小图标  分辨率和大小最好接近

pacity和 rgba都能设置透明，有什么区别

1）opacity作用于元素以及元素内的所有内容的透明度，子元素会继承父元素的 opacity 属性。

2）rgba()只作用于元素的颜色或其背景色，后代元素不会继承透明性,只是针对自己本身有效，无法使内部的所有元素透明。

white-space:pre   保留空格

空格处理

属性：

normal 默认。空白会被浏览器忽略。

pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

pre-wrap 保留空白符序列，但是正常地进行换行。

pre-line 合并空白符序列，但是保留换行符。

inherit 规定应该从父元素继承 white-space 属性的值。

overflow:hidden 会影响 list-style：

即当ul 中的li 的overflow 为hidden的时候，list-style不起作用，不显示前面的点、圈等样式，在ul或li内加入样式：list-style-position: inside; 即可

遇到问题：

下拉菜单想和下拉框一齐：width：100%；

常见的坑：

多方法解决设置width:100%再设置margin或padding溢出的问题

https://www.jianshu.com/p/2843ff850ff6

原因：浏览器渲染是从左到右渲染的，这样margin-left是可以有的，而margin-right就不一定了，因为只要子元素没有100%铺满，右边剩下的部分margin-right就会自动铺满，此时设置margin-right是无效的。

box-sizing: content-box|border-box|inherit;（溢出，不溢出，继承） 

相当于怪异模式：border和padding全会在你设置的宽度内部。（不知道为啥失败了）

后来知道了因为我设置的是margin... 笨得要死....

width: calc(100% - 6rem);（成功）

calc属性 四则运算

ps：当层级比较多的情况下：越具体的选择器优先级越高

CSS三大特性—— 继承、 优先级和层叠。

明日完成：任务七

收获：看懂任务要求，做出更好改动的页面，才最省经历