仿极客首页，踩得坑

1、border的使用：
border-left、border-right等使用，将值设为 transparent 透明状，搭配 hover 及 动画（旋转，平移，缩放）样式的使用，可制作出特殊的图形，图标样式效果。ps:(可用行内元素 i span 等标签 为其设置宽高，并将其属性转换为 inline-block 或 block 块状元素才会生效，或为其设定 background-url ，background-size，background-position等属性值得使用。 no-repeat；来添加图片，图标)
2、hover 伪类的使用：
建立一个父容器来包含多个子元素，当鼠标滑动父容器上时可控制子元素的显示和隐藏以及相应的动画效果(语法： .父容器类名：hover .子元素类名{子元素所需响应的样式内容} )
3、css选择器的使用：
class=“”；若有多个类名，可用空格隔开 （多个类名的每个css属性应不相同，一个可以引用全局的css样式，一个可以引用自身独有局部的css样式。ps：一定要注意选择器的权重，全局、局部分清，样式属性不重复，防止互相之间影响样式。）
css: 会根据层叠和权重产生正常的作用顺序。
first-child , nth-child(n)等灵活使用，多个元素样式相同可使用，方便快捷。n+2 表示从第二个元素一直到最后一个元素都会生效。
4、css： clear 的使用：
clear：both ；规定元素的两侧都不允许有其他浮动元素。
5、html 标签：
用于描述网页的结构，语义性更好。善于常用语义性更好的标签。
6、box-sizing:border-box (表示：border，padding均包含在元素宽高之内)
7、transtion 的使用：
在定义属性样式时就需要声明其过渡性的初始值，这样在hover时或其他响应时方可抒写相对应的所需过渡的属性结果目标值。
8、before，after 的使用：
content=”” 设为空，display为 inline-block ,block ，设置宽高（结合border的使用），或背景，在一个元素的四周进行定位，来添加特殊的图形样式，icon。
9、学会查看 chrome 工具的 box模型。
10、行元素也具有box模型，（不换行，content大小自动填充）
11、media query 值：
在设定临界值时，一定要主要注意两个值不等，否则会出现中间值为空白。（link rel=”stylesheet” type=”text/css” media=”(max-width: ***760***px)” href=”css/mobile.css”）
（ link rel=”stylesheet” type=”text/css” media=”only screen and (min-width:***761***px)” href=”css/pc.css”）
注意看：760 和 761 两值的引用情景。
12、z-index 当值足够大时，才会从被覆盖的下层显示到最上层。
13、box布局：
absolute (绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。)
子元素按其祖先元素一级一级往上查找。
弄清网页结构中的文档流：
应当设一个父容器，按其网页的正常文档流排版，这样其中的子元素即可随时脱离文档流，按 float 或 fixed，或absolute 等排版来实现元素的任意布局。
（当父容器宽高值不确定时，可先假设某个宽高，再由其子元素自动撑开其大小，由父容器背景色来确定最后大小。）
float布局：
大盒子套小盒子再套小盒子：当父容器宽度不变时，多个子元素浮动并列宽度超出其父容器宽度时便会被挤压到下一行。
（多个子元素同为float时，若某个元素想独占一行，可增长其任一元素的 padding 内填充。需设置 box-sizing=border-box）
若float为起效果，则可能是float元素间宽度超出了父容器的宽度，被挤压到下一行了，或设置了 ： overflow：hidden 将超出的隐藏掉了。 ；
14、高度自适应：
margin-botton: -9999px;
padding-bottom: 9999px;
overflow : hidden;
在外嵌套一个父容器，将超出部分隐藏，或滚动，scroll 等。