css一些需要注意的样式

Css盒子模型：

当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

Css隐藏元素：

隐藏元素 - display:none或visibility:hidden
隐藏一个元素可以通过把display属性设置为”none”，或把visibility属性设置为”hidden”。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display属性：

块级元素(block)特性：
* 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
* 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
* 和相邻的内联元素在同一行;
* 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
块级元素主要有：
* address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
内联元素主要有：
* a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
可变元素(根据上下文关系确定该元素是块元素还是内联元素)：
* applet ,button ,del ,iframe , ins ,map ,object , script
CSS中块级、内联元素的应用：
利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。
主要用的CSS样式有以下三个：
* display:block – 显示为块级元素
* display:inline – 显示为内联元素
* display:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
我们常将

元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

CSS3 弹性盒子(Flex Box)

是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
justify-content 属性：内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
***align-items 属性:***align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
http://www.runoob.com/css3/css3-flexbox.html