目前做题时，需要联想到的点

使用定位（脱离文档流的定位），以及涉及到浮动的问题时，要想两个问题，第一：对使用上述方法脱离文档流的元素的父元素或者是祖先元素影响（比如高度塌陷的问题以及宽度塌陷的问题，也就是该元素的父元素的宽度和高度不再受到该元素的影响，当然可能受到到其它子元素的影响）

使用margin和padding的区别，第一：背景颜色是否蔓延的问题 第二：margin会不会对原来盒子的宽度和高度产生影响（这个和原来盒子的宽和高是 不是固定的有关系）第三：margin不会影响盒子可见框的大小（这里不会有点太绝对，应该改为可能，这个可以结合第二条想想），但是padding会影响盒子可见框的大小

border会影响盒子可见框的大小（一般情况下，是这样的，因为box-sizing:content-box是默认的），但是，如果指定了box-sizing:border-box的话，设置border不会影响盒子的可见框的大小。

好好想想为什么这个地方，会是这样（关于margin和padding）小米商城中间导航条的那个视频：可以想想

对于上面margin、padding理解之后，进行逆向的运用

这个上下距离怎么调整

注意此处采用的方法是：增加padding的做法来调整的，但是由于.left-menu的高度已经固定了，如果给.left-menu增加padding的话，这必然是增加.left-menu这个可见框的大小的，为了保持原来的高度，我们需要减少.left-menu原来的内容区的高度

下面的这个距离怎么产生呢？

注意，这里可以根据结构来看

这里可以采取给.nav .left-menu a设置左右内边距

提到下拉框

对于下拉框，分为以下几步处理:

1. 谁触发这个下拉框 一般触发这个下拉框是原本触发下拉框和这个下拉框的父元素，但并不总是，比如：小米商城的那个.goods-info的下拉框
2. 这个下拉框在结构（HTML）上应该写在哪里（这个要求能能够根据1，利用元素之间的关系找到下拉框在结构（HTML）上的位置）
3. 对于这个下拉框，它在CSS上应该相对于谁来定位
   

注意上面.goods-info中的width是相对于离.goods-info最近且开启了定位的包含块的宽度的百分数

还有就是设置了border-top会影响可见框的大小，这也决定了需要将top：100px，变为top:99px。

并且注意为下下拉框，或者设置z-index，目的是为了防止该下拉框被别的定位元素所覆盖

结构的设置（从小米商城的这个结构处的设计思考）

看到border、height、width时要想到，这个是对应box-sizing:content-box还是对应box-sizing :border-box

下面中的box-sizing是被默认为：border-box的

input设置文本框的时候，会有默认的border，padding为了防止默认的在不同的浏览器的默认的样式的不同，因此最好把默认的重置

伪类：focus(焦点)和伪类：hover是有区别的，focus个人觉得它是用在文本框里面点击的时候触发来用到的，还有一个autofocus是把鼠标自动聚焦，但是它不是伪类

下面对padding理解的一个例子，其中用到伪类

小米商城中，那个上下的线，明显和元素的大小不一样，所以排除border实现，根据实现元素图的四种方式（1、直接输入 2、元素大小调背景 3、图标字体 4、雪碧图（背景图片）），这里可以采用第二种方法，那么如何可以添加这个呢？下面是使用伪类before和after来解决

下面是用定位的方式来解决的，使得.ad .short-cut li:before这个脱离文档流后，对它设置宽和高，并不影响.ad .short-cut这个元素的大小

另外一种方法是采用：给.short-cut增加padding-top的方式，使得上面的线下移的方式，但是这种方式有一点不好的是，在这里，这种处理方式如果不修改.short-cut的width的值的话，.short-cut这个可见框的大小会发生变化

下面这个是用after来出处理的，我始终觉得，这个不像是li的尾部？无法理解这一点