前端小点

• 禁止页面左右滑动，宽度超过屏幕部分剪掉，设置如下：

overflow-x: hidden;

• 当高度超过屏幕部分时，设置高度，会导致整个页面滑动卡顿，可以试着取消高度设置

// height: 100%;

• 标题类标签的字体默认时粗体，font-weight: bold；设置normal值可以取消粗体效果

h1, h2, h3, h4 {
font-weight: normal;
}

• 类似列表标签，需要隐藏最后一个列表的分割线，可以设置 border-bottom: none，如果none值没有效果的话，可以设置border-bottom: 0px

li {
&:last-child {
border-bottom: none;
}
}

• 规定属于其父元素的第二个子元素的每个span的背景色：

span:nth-child(2){
color: #41ABFE;
}

内联元素又名行内元素(inline element)，和其对应的是块元素(block element)，都是html规范中的概念。内联元素的显示，为了帮助理解，可以形象的称为“文本模式”，即一个挨着一个，都在同一行按从左至右的顺序显示，不单独占一行。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素加上display:block这样的属性，让它也有每次都从新行开始的属性，即成为块元素同样我们可以把块元素加上display:inline这样的属性，让它也在一行上排列。

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。