前端样式实践出真知系列（二）

1、overflow 属性规定当内容溢出元素框时发生的事情。

当属性值为hidden时，元素内容会被修剪，并且其余内容是不可见的。

哪些元素会被修剪：

超出元素边框的部分（不管它是内容本身过多导致的还是通过定位（相对或绝对）导致的）都将隐藏。

2、maring外边距祥解：

一个元素的margin影响了父元素中的内容，则会影响父元素的大小，如果不影响父元素中的内容而是影响父元素外的内容（比如当父元素没有padding和border时，可能的情况），不影响父元素的大小，当元素通过margin移动到父元素之外，并且父元素设了overflow等于hidden那么，子元素的宽高度则不算在父元素中。

maring-bottom为负值时，只会使受影响的元素向上移动，不会使自身向下移动，依次类推（因为本身还是遵循文档流的）

3、margin/padding值为%（百分比）时，是基于父元素的宽高度的百分比

4、css几种类型样式的优先级：

!important>行内样式|js改变样式属性（这两个优先级相同，看先后顺序，一般js后执行）>id选择器>类，属性，伪类选择器 >元素标签，伪元素选择器

备注：优先级相同的后出现的覆盖掉之前的。优先级不同的，优先级高的覆盖低的

注意覆盖的紧紧是相同的样式属性值，如：同一优先级中 background-color和background后出现的会覆盖掉前面的背景颜色（其它背景属性不会被覆盖）。

5、字体属性

font:16px/22px "Microsoft Yahei"; 缩写形式字体大小/行高字体

6、margin常见问题：

两个相邻的块元素之间，margin-top和margin-bottom之间会重叠，大的涵盖小的，水平方向不会。解决办法，两个元素的margin-top和margin-bottom只使用一个。

7.扩展几个选择器：

:first-child 选取其父元素中的第一个子元素，并且是选择器特定元素，如 p:first-child 表示选取p元素父元素中的第一个p元素，如果它（p）不是父元素中的第一个子元素则选不中。

:last-child 选取其父元素中的最后一个子元素，并且是选择器特定元素，如 p:first-child 表示选取p元素父元素中的第一个p元素，如果它（p）不是父元素中的第一个子元素则选不中。

:nth-child(n) 选择器匹配属于其父元素的第 N （从1开始的）个子元素，并且要是选择器类型的。p:nth-child(n)表示选择p父元素的第n个元素并且要是p元素

8、禁用浏览器默认事件：

//禁用浏览器默认事件
$("body").on('touchmove', function (event) {
event.preventDefault();
});

9、zepto中几个手机触摸事件：

ouch events

“touch”模块添加以下事件，可以使用 on 和 off。

tap —元素tap的时候触发。
singleTap and doubleTap — 这一对事件可以用来检测元素上的单击和双击。(如果你不需要检测单击、双击，使用 tap 代替)。
longTap — 当一个元素被按住超过750ms触发。
swipe, swipeLeft, swipeRight, swipeUp, swipeDown — 当元素被划过时触发。(可选择给定的方向

绑定事件常用on方法，$("..").on("事件名称"，function(){});

10、content+padding 都会有背景图片（如果图片够大），背景图片可以通过 background-position属性定位。

11、首行缩进，字与字直接的距离css样式属性设置：

text-indent:20px; /*设置首行缩进*/
letter-spacing:10px;/*字与字间的距离*/

12、:after伪类选择器：

:after 选择器在被选元素的内容后面插入内容。

请使用 content 属性来指定要插入的内容。

13、解决子级对象使用css float浮动而父级div不能自适应高度的问题:

div.parent:after{ content: "";display: block;clear: both;}

即在父div内容的最后加一个空的块级标签，并清除浮动。

14、app网页head标签中要加上以下这些标签：

最后一个最重要，告诉手机该网页宽度等于设备宽度初始化大小1倍最小缩放1 最大缩放1 即不可缩放（不设置的话会导致样式问题）

还有app中字体大小12px 表示正常大小 PC中14px是正常大小。