一些很实用的CSS小技巧

---

1.在实际生产中，我们对于icon的使用。都是通过一张雪碧图来完成开发的。

.logo {background:url no-repeat -x  -y}

原理很简单。其实就是通过对雪碧图的定位和background的属性，减少img的使用。其中的XY是通过对整张图片图标的定位来完成的。

2.对于底边线问题：虽然通过border-bottom属性可以对其进行一个添加。但是当你做一个表单元素的时候，你想完全去掉基本样式，通过外加一个BOX可以达到这个目的。

用一个box包裹目标box.使它们的height的值相同。给外面的box加border-bottom属性。

3.对于元素消失的积累：

（1）opacity：0~1；

（2）display：none；

4.常用的伪类选择器

：hover

：active

：last- child

：first-child

5.块状转内联

1.在父级元素中加 ：float：left/right；

2.display：inline；//此元素会被定义成内联元素，不换行。

在这里我提出了一个问题：就是对于使用inline-block和inherit的区别。

inline-block：行内块元素；inherit: 规定从父元素继承display的值。

题外话：使用inherit的场景不仅仅是使用display。heigh：inherit;//继承父元素高度

6.居中方式：

水平居中：

1.box设置：text-align:center;

效果：box内子元素字体，图片水平居中

2.img设置居中：margin： 0 auto；display：block；//次元素被显示为块级元素前后有换行符

margin: 0 auto;是针对块级元素做水平居中效果，所以需要转化成块级：block；

垂直居中

1.img {position:relative;top:50%;left:50%;margin-top: 负图片高度的一半；margin-left：负图片宽度的一半；

2.图片用padding。用box的height减img的height再除以2就是padding-top的值。也可以设置margin：前面算的值  auto；

7.input输入框提示内容修改：;

8.在实际项目中z-index，会经常使用。这是一个很魔幻的元素。可以确定层级。谁在谁前面的问题。

但是要注意，要使用z-index,就必须使用position属性。其实，如果之前你没有使用position属性，也不必担心使用了position属性会给你的布局带来灾难性的破坏。

position：relative;

z-index:-1(最小)  //数字越大越上层

9. 下次要在HTML中加入多而且重复的元素。请尽可能的使用innerHTML，而对于要使用特定样式，尽量避免使用内联样式。转而使用添加class的方式来添加。

10. CSS选择器总结

基本选择器

层次选择器

滤镜选择器

其中：

基本选择器：#myId  element  .myclass * (可使用逗号隔开的方式来使不同选择器使用同一种样式)

层次选择器：

elementParent elementChild

elementParent>elementChild

prev + next

prev~sibling

滤镜选择器：

:focus

:first-child

:last-child

:first

:last

属性选择器

[name~= 'value']

[name = 'value']

[name |= 'value']

[name]

控件选择器

：checked

: selected

: disable

: enable

:hidden   //包括type = ‘hidden’ 以及 display ：none；

：visble  //包括visibility :hiddenh和opacity： 0同样为可见。

：input

：button

：checkbox

：file

: password

: radio

: reset

: submit

: text

11.表单外框，可以用border属性重设，意味着可以取消外边框显示（border：none;）

一些重要的JS记忆点

---

1.DOM节点和方法

节点：

nodeName

nodeValue

nodeType

firstChild

lastChild

childNodes

方法：

previousSibling()

nextSibling()

hasChildNode()

appendChild()

removeChild()

replaceChild()

insertBefore()

//nodeType常用值：1 元素节点 2 属性节点 3 文本节点 4 注释节点

搭配使用：

addEventListener()

removeEventListener()

getAttribute()

setAttribute()

creatElement(tagname)

creatTextNode(text)

2.事件合集

click

contextmenu

dblclick

mousedown

mouseenter

mouseleave

mousemove

mouseover

mouseout

mouseup

3.jq 和原生JS

JQ:

$(document).ready(function(){});//多个不冲突，可以重复使用

原生JS：

window。onload = function(){};//不可以重复使用，多个出现只用最后一个有用

最后一些心得：到了这个新的环境，先要明白这里的规则，然后在规则里拿最好的东西，但是要明白规则不是绝对的。有些时候可以跳出规则。

开发方面，现在还是不熟悉整个开发流程。但是需要拿出一部分的时间来熟悉官方框架，不然在调试和开发过程我又要熟悉一段时间。另外，好好学英语。