one simple problem-----how to put text in center of div vertically and horizontally

I always meet this question, how to put text in center of div vertically and horizontally.

                     to


first way,

              text-align: center;
              line-height: 50px;(depending on the div height)


Here the line-height is a little bit confused, in Chinese, it is called ''行高''
but i feel it is not so right.
http://www.w3schools.com/cssreF/playit.asp?filename=playcss_line-height&preval=3

this is one website, for understanding it better.


Second way,

                   text-align: center;
                   padding-top: 20px;
                   padding-bottom: 20px;
           

but in this way, you cannot set height again, because padding-top.padding-bottom include height set.

JS learning--------collapsible pannel

This one is very common, and it is pretty easy, the most important is function and style  .

Here is simple version of my task: when you click title, then content will come out.

At the beginning, i did not set style only function, actually it does not work.
So let me conclude, for this small panel, we have to focus on 3 parts:

1. style
2. link for js. min
3. javascript function

here is javascript function what i have,






As i have 2 panels, so i need to input this ,next , to specify that when users click title, the matched content could show.



then, there is another way to do the same website by using toggleClass();

this method means that change style through class name, but the content is not changed.
one example, 
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_toggleclass

And i still have one question about selector, and space between two class name.

There is still another way, a little bit different, i will post soon.

And we found one funny CSS property is overflow.
http://www.w3schools.com/CSSref/playit.asp?filename=playcss_overflow

from this website, you can understand what it means.
And you need to know that

1. overflow property only works for block elements with a specified height.
2. meaning of this property: what happens if content overflows an element's box.
3.the default value is initial, which means that show everything.

so easy to forget difference between ==and ===

1. if comparison is about number, string,

•      same type, like comparison between number and number, result is same
•      different type, number compared to string, for ==, it will transfer to same type then comparing value. for ===, value is false .because it just compares type.

!= does type conversion
!== doesn't do type conversion

文本协议与二进制协议

好吧，刚刚结束我的短暂假期， 现在就得熬夜学习。。。废话不多说，最近学习的知识点， 很零碎，所以打算把它们都记录在博客里。

今天需要学习HTTP 2 的概念，说实话1 我都不是很了解，只能囫囵吞枣了。其中一部分是，文本协议与二进制协议。

文本协议

文本协议一般是由一串ACSII字符组成的数据，这些字符包括数字，大小写字母、百分号，还有回车(\r)，换行(\n)以及空格等等。

文本协议设计的目的就是方便人们理解，读懂。所以，协议中通常会加入一些特殊字符用于分隔，比如如下数据：

!set chl 003#

其中，以!标识命令的开始，#标识命令结束，空格用来分隔命令字段，虽然我们不知道这条命令具体干什么，但通过字面我们大致知道可能是设置(set)某一个参数(chl)值为003，这样在我们进行调试的时候，可以快速准确地看到当时发生了什么，更好地解决问题。

但为了便于解析，文本协议不得不添加一些冗余的字符用于分隔命令，降低了其传输的效率；而且只适于传输文本，很难嵌入其他数据，比如一张图片。（来源于网络，纯复制粘贴）

二进制协议

二进制协议就是一串字节流，通常包括消息头(header)和消息体(body)，消息头的长度固定，并且消息头包括了消息体的长度。这样就能够从数据流中解析出一个完整的二机制数据。如下是一个典型的二进制协议：

其中，Guide用于标识协议起始，Length是消息体Data的长度，为了数据完整性，还会加上相应的校验(DataCRC，HeaderCRC)；Data中又分为命令字(CMD)，和命令内容。命令字是双方协议文档中规定好的，比如0x01代表登录，0x02代表登出等，一般数据字段的长度也是固定的。又因为长度的固定，所以少了冗余数据，传输效率较高。

总结

综上，我们大致总结文本协议和二进制协议的优缺点：

文本协议，直观、描述性强，容易理解，便于调试，缺点就是冗余数据较多，不适宜传输二进制文件（比如：图片等），解析复杂（需要进行字符串比较）；

二进制协议，没有冗余字段，传输高效，方便解析（固定长度，并且可以直接比较字节），缺点就是定义的比较死，哪个位置有哪些东西，是什么意义是定义死的，场景单一。

所以，

1. 如果想要高效传输，比如物联网中收集传感器数据，使用二进制协议

2. 如果想要便于调试，比如使用telnet就能当客户端用，可使用文本协议

3. 如果命令较少，比如即时通讯软件，可以使用文本协议

4. 二进制数据的难理解性，自然加密，对数据安全有一定要求的可以使用二进制协议
（以上均来源于网络）