Html5基础之样式

前言

记录了通过修改bootstrap一些模板并阅读bootstrap源码时的一些感悟，下面的内容是动手实验+查找资料+推敲猜想得出，以备日后查询和修改补充

正文

box-shadow 属性

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 必需。水平阴影的位置。允许负值。(x 坐标移动）
v-shadow 必需。垂直阴影的位置。允许负值。（y坐标移动）

定义一个常用的面板

.panel {
  padding: 15px;
  margin-bottom: 20px;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

设置内边距，外边距，阴影，边框（圆角，颜色），背景

设置在面板中的第一个元素和最后一个元素为头（panel-footer）和尾（panel-heading），

max-width,min-width

元素宽度最大不能超过max-width,最小不能小于min-width

absolute,relative

absolutet脱离文档流直到遇到父类是absolute或者relative。如果父元素不是两者那么一直到父元素body停止。
子元素relative在最近父元素上停靠,不要求父元素必须为absolute或者relative
子元素是relative,那么父类如果有内边距，那么内边距会对子元素造成影响。

定位为relative的元素脱离正常的文本流中，但其在文本流中的位置（原始位置）依然存在。

定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不在存在。

如果指定位absolute或者relative的元素没有设置left，top这样的位置值时，两者位置保持不变

background-clip

background-clip: border-box|padding-box|content-box;
3种值分别表示：
border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。
控制背景色显示的范围大小

before和after实现三角形

原理：div的width和height为0且设置边框一定大小就会形成四角板的样子，按照所需的方向取其中的一块
参考css实现三角形效果详解:

css样式

.arrow:before, .arrow:after{position: absolute;display: inline-block;border-color: transparent;border-style: solid;content:"";}
.arrow-top:before{margin-top:-7px;top: 0;left: 6px;border-bottom-color: #d1d4d7;border-width:0 7px 7px 7px;;-moz-border-top-colors: #fff;}
.arrow-top:after{margin-top:-6px;top: 0;left: 7px;border-bottom-color: #fff;border-width:0 6px 6px 6px;;}

<style>
        .arrow {
            margin : 30px;
            position: relative;
        }
        .arrow:before,.arrow:after {
            position: absolute;
            border-style: solid;
            height:0px;
            content: '';
            border-color: transparent;
        }
        .arrow-top:before {
            border-width: 0px 7px 7px 7px;
            border-bottom-color: #d1d4d7;
            margin-top:-7px;
            top:0px;
            left:6px;
        }
        .arrow-top:after {
            border-width: 0px 7px 7px 7px;
            border-bottom-color: #ffffff;
            margin-top:-6px;
            top:0px;
            left:7px;
        }
    </style>
<div class="panel arrow arrow-top" >

</div>

arrow和arrow-top指向同一个元素，因此他们的before和after形成的块状元素是相同的。这里使用before，after是形成1px的左上错开1px，达到阴影效果（before三角形白色，after三角形黑色，那么多余的1px勾勒出来的就是三角形的边框）。arrow-top的before和after可继承arrow的before和after的样式，它们合在一起才能显示一个箭头。content=‘’ 那么这个before的width和height应该为0px了，不放心可以显示指定height,width为0px（达到箭头形成的效果）。在before和after中需要指明border的style为solid且border-width的左，下，右粗为7px(越粗三角形越大）

上面值得一提的就是利用before，after两个三角形不同色，可以达到凹凸感（里面三角形颜色和面板一致，外表三角形颜色浅色（凸），深色（凹））

before和after的position

一个div的before和after的position是absolute并且指定了left和top那么如果这个div的style中定义了position为relative或者absolute.这个div的before和after相对于这个div偏移距离
如下代码

    .arrow:before,.arrow:after {
            position: absolute;
            left:0px;
            top:0px;
            display: inline-block;
            content: '';

            border:10px solid transparent;
            background-color: black;

        }
<div class="panel arrow" style="margin: 30px;position: relative">

</div>

上面before和after形成的方块经过left和top以后位置起点是这个div的原点

display:table/table-row/table-cell

如果div是table，那么这个div里面的子元素（cell,row）不管显示指定了width，height是多少，都会自适应这个div的width,height

如果div是table-row,那么不过这个div显示指定了多少，它都会自适应子元素（单元格）的宽度
参考资料《基于display:table的CSS布局》

居中div

看到使用display：table-cell可以将div渲染成一个cell,在表格td中的内容都是居中布局，那么想到了一个div中包含一个div，里面的div垂直居中的办法猜想可以使用：
将外面的div设置display:table-cell，那么里面的div就自动垂直居中了
测试才发现里面的div没有居中，那么使用vertical-align居中，因为：

只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。
例如图片，按钮，单复选框，单行/多行文本框等HTML控件，只有这些元素默认情况下会对vertical-align属性起作用。

现在table-cell中可以使用vertical-align：middle让里面的内容垂直居中了，如果我想要实现水平居中呢？text-algin：center，适合行内元素，那么我只要将里面的div设置为line-block就行了
代码验证：

<style>
        .table {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        .like {
            display: inline-block;
            width:100px;
            height:50px;
            border:2px solid black;
        }
    </style>
<div class="table" style="width:300px;height: 300px;background-color: #13c4a5">
    <div class="like">

    </div>
</div>

清除浮动

.cf:after，.cf:before {content: ” “; display: table;}
.cf:after {clear: both;}
：before是因为table类型能生成独立的bfc，防止上边距塌陷，
：after负责清除浮动，防止父级高度塌陷；配合使用，代码少，效率高。

比如：

     <style>
        .cf:after,.cf:before {content: " "; display: table;}
        .cf:after {clear:both}
        .like {
          float:left;
        }
    </style>

<div class="cf" style="background-color: #13c4a5;margin-top:30px">
    <div class="like" style="width:100px;height:100px;background-color: #00c7f7">

    </div>
</div>
<div class="next" style="width:100px;height:100px;background-color: grey">

</div>

因为class为like的div使用了float所以它会class为next的div照成影响且like的div浮动导致外面的父div高度塌陷。为了解决这两个问题，可以使用.cf:after,.cf:before {content: " "; display: table;}.cf:after {clear:both} 写法

也可以用.cf:after {content: " ";display:block;clear: both;}

我平时写display:block;
也能达到目的，有天就想追究下，英文太烂，只看中文答案。查了资料后看都会提到“BFC”，而要生成BFC，目标元素的display为inline-block,
table-cell, table-caption, flex,
inline-flex中的一个，而inline-block会生成元素间隙，而有的支持性不好，最后在table-cell和table-caption综合后选择了display:table

一般做容器的元素需要考虑这种写法清除浮动

列表样式

margin的不同个数的写法

margin: 20px;（上、下、左、右各20px。）
margin: 20px 40px;（上、下20px；左、右40px。）
margin: 20px 40px 60px;（上20px；左、右40px；下60px。）
margin: 20px 40px 60px 80px;（上20px；右40px；下60px；左80px。）
在css中使用margin可以将margin-top，margin-right，margin-bottom，margin-left，缩写为一个标记，顺序为上右下左（顺时针）。
margin标记可以带一个、二个、三个、四个参数，各有不同的含义。

margin样式继承
如果同一个div中有如下的两个样式

       .list-group {
           margin-bottom:20px;
           background-color: #ffffff;
       }
        .list-group-other {
            margin-top:15px;
        }

那么这个div的样式会变成margin-bottom：20px； margin-top:15px;

如果其中有一个方向重复那么后面的覆盖前面的

.list-group {
           margin:20px;
           background-color: #ffffff;
       }
        .list-group-other {
            margin-top:15px;
        }

将margin-top覆盖前一个margin-top，结果变成15px 20px 20px 20px

margin为负数表现效果

如果当前的div宽度自适应父容器的宽度那么：margin-left:-15px 向左边拉伸 margin-right:-15px向右边拉伸。这种情况使用情况如下:
如果父容器padding是左右都是15px;当前div想要铺满整个父容器宽度那么只要设置margin-left:-15px;margin-right:-15px即可

如果当前的div宽度确定那么：margin-left:-15px向左移动，margin-right:-15px无效

border框圆角

.list-group-item:first-child {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}

相邻 div的border为1px重叠处理

.list-group-item {
    position: relative; /*位置类型*/
    display:block;
    padding:5px; /* 内边距*/
    margin-bottom: -1px; 
}       

使用margin-bottom:-1px 移除相邻两个border的1px（重叠2px）

背景色透明

background-color: transparent;

bootstrap的列表样式

bootrap提供了panel的样式内边距是15px，而下拉列表的样式list-group和list-group-item则放到这个panel里面，提供了两种选择：
使用list-group-flush让每个item和panel吻合（这个式样是使用margin:-15px来消除panel的内边距），因此第一个item的元素和最后一个item的元素不需要设置圆角边框
第二个选择：不添加list-group-flush，那么每个item和panel之间有15px的内边距且第一个item的元素和最后一个item的元素设置了圆角边框

一般通用的样式：内边距，外边距，定位类型（position） ，显示类型（display）,最大宽度(max-width)，最小宽度（min-width）,边框样式（圆角，线条颜色，粗细等）

列表最简单 代码

<div class="panel">
    <div class="list-group list-group-flush">
        <div class="list-group-item">
            dddd
        </div>
        <div class="list-group-item">
            eeee
        </div>
    </div>
</div>

将当前的div移动到父容器的下边（下拉框样式）

设置父容器的定位类型为relative，子元素的定位类型为absolute（自容器以父容器作为相对位置偏移）。想要偏移到父容器下面，使用top:100%(使用百分比），使用定位类型以后子元素脱离文档流，宽度自适应子元素中的内容，所以需要设置一个宽度。因为我们不知道子元素内容多少，因此让内容自适应子元素宽度，为了美观设置一个最小宽度（min-width）
示例代码

<div style="margin:35px; width: 300px;height: 300px;background-color: #196e88;position: relative">
    <div style="position: absolute;left:0px;top:100%;background-color: #00c7f7;min-width: 300px">
            ddd
    </div>
</div>

超过容器内容隐藏

使用overflow:hidden

.media,
.media-body {
  overflow: hidden;
  zoom: 1;
}

bootstrap提供了对文本的样式

文本的颜色
text-warning，text-primary，text-muted，text-success，text-warning

.text-muted {
  color: #999999;
}

文本的对齐方式
text-left，text-right，text-center

.text-left {
  text-align: left;
}

css3换行规则

word-break: normal|break-all|keep-all;
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。

word-wrap: normal|break-word;
normal 只在允许的断字点换行（浏览器保持默认处理）。
break-word 在长单词或 URL 地址内部进行换行。

容器居中

可以使用

margin-left:auto;
margin-right:auto;
或者
margin:0px auto;

使用margin:0px auto的话会让外边距为零，这样做可能会无意中改变继承的margin样式，那么还是用上面的稳妥点

@media用法

css语法
@media mediatype and|not|only (media feature) {
CSS-Code;
}
具体的mediatype类型和media feature请看
CSS3 @media 查询

.container {
    max-width: 728px;
}
@media (min-width: 768px) {
  .container {
    max-width: 728px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 940px;
  }
}

上面就像是一个if条件判断语句一样，当满足条件则执行花括号里面的样式。宽度大于768px时，设置.container的最大宽度是728px。
而第二段代码设置了min-width:992px，那么宽度大于992则最大为940px.如果屏幕的宽度是1000px，既满足了768px又满足了992x，这样的话先执行768px中的代码在执行992px的代码，都不相同的样式继承，相同的样式覆盖。bootstrap这样使用@media可以满足响应式布局

如果不满足最小768px和992px，那么要定义一个默认的样式如上面

.container {
    max-width: 728px;
}

这个默认的必须是在其他的@media的之前定义（如果在@media之后定义，这个样式会覆盖其他的@media样式，不会随着屏幕的尺寸变化而变化，达不到响应式效果）

box-sizing的应用

box-sizing: content-box|border-box|inherit;
content-box ：这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
border-box :为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit：规定应从父元素继承 box-sizing 属性的值。

比如我们给一个元素确定了宽度高度，如果box-sizing的值为content-box那么这里指定的宽度高度指的是元素的内容框，那些内边距和border边框的大小会在内容框之外绘制（也就是在原有的指定宽度高度上在继续增加内边距和边框的尺寸，这样在一些float应用中会让并排元素错位），内容框宽度或者高度=指定宽度或者高度

如果box-sizing的值为border-box，并指定了元素的宽度高度，那么这里的宽度高度就是内边框+边框+内容框的大小，无论内边框和边框值怎么变，最终内边框+边框+内容框的大小=元素宽度或者高度的大小

important note:在使用box-sizing的时候需要指定高度和宽度，对于没有指定高度和宽度的元素，使用box-sizing时，不断的增加border，padding的尺寸，这个元素的高度，宽度会不断的拉伸变大（元素内容的高度宽度+padding+border，整个div的宽度就是通过这个公式来计算），如果指定了高度，宽度，那么内容高度宽度+padding+border限制在这个高度宽度里面
box-sizing例子

outline样式

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
可以按顺序设置如下属性：
outline-color
outline-style
outline-width

下拉列表向右显示

bootstrap的下拉框（dropdown-menu），默认是向下（position:absolute; top:100%）,如果我想实现左菜单栏向右展示下拉框的样式如何写？
为了不改变原来的dropdown-menu的样式在其他地方使用，那么在左菜单所在的div下，更改dropdow-menu

.dropdown-submenu > .dropdown-menu{
left:100%;
top:0;
margin-top:0;
margin-left: -1px
}

这里left:100%就是在左菜单的右边显示，而dropdown-submenu指的是左菜单所在的div,只有在做菜单下的下拉框才在右边显示，其他的外边距是调节右拉菜单的显示样式

元素的隐藏

display: none;实现属性的隐藏
显示的话就设置display:block;或者display:inline;

移动到一个元素上显示另外一个元素，移开消失

<style>
    .container {
        display:none;
    }
    .show:hover > .container {
        display:block;
    }
</style>
<div class="show">
    show
    <div class="container" style="background-color: #196e88;margin:0px auto;height: 30px">
</div>
    </div>

如上样式，container初始化是隐藏，当移动到show以后就会显示container的内容

.show:hover > .container 这种样式写法需要注意一下，满足hover，则让show的直接子元素container的display为block

box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。

h-shadow显示的是水平的阴影偏移，v-shadow显示的是垂直的水平偏移，blur越大则越模糊

transition

transition: property duration timing-function delay;
CSS3 transition 属性

div
{
width:100px;
height:100px;
background:blue;
-webkit-transition:height 2s; /* Safari and Chrome */
}

这里设置高度变化的效果，初始化的时候高度为100px，当高度的大小发生变化的时候就会触发transition效果
例如
鼠标移动到div的时候高度变成了300px，这里就是发生了高度的变化，会触发transition的效果

div:hover
{
height:300px;
}

bootstrap的col-lg- col-sm等样式

它们可以作为一个容器且内边距左右为15px; position为 relative;

CSS :first-child 选择器

p:first-child
{ 
background-color:yellow;
}

选择属于其父元素的首个子元素的每个 p 元素，并为其设置样式
在父容器下的第一个p元素背景色设置为黄色
比如

<body>
<p>在body下的第一个p元素背景色设置为黄色</p>
<div>
<p>div下的第一个p元素设置背景色为黄色</p>
</div>
</body>

值得注意的是在父容器的第一个元素必须是p不然的话在这个父容器下是没有符合p:first-child的元素的，比如

<body>
<span>这是第一个元素</span>
<p>对应body作为父容器来讲，p:first-child是不匹配该p标签的</p>
<div>
<p>对于父容器div来讲，这个p是匹配p:first-child的</p>
</div>
</body>

css选择器 >选择器

比如div > p，获取div下的所有直接子元素p，不能获取到子孙的p元素

选择 div元素之后紧跟的每个 p元素，并设置其背景色

div+p
{ 
background-color:yellow;
}
<div>
</div>
<p>这是div之后紧跟着的p元素背景设置为黄色</p>

CSS3 transform 属性

rotate(angle) 定义 2D 旋转，在参数中规定角度。比如transform:rotate(10deg);顺时针旋转10度，如果是负数（-10deg）那么逆时针旋转10度
scale(x,y) 定义 2D 缩放转换。
x轴放大1.5倍，y轴放大1.5倍

#MyDIV
{
transform:scale(1.5,1.5);
}

translate(x,y) 定义 2D 转换。
基于当前的x，y轴左上角的顶点，向x轴偏移20px，向y轴偏移10px

#MyDIV
{
transform:translate(20px,10px);
}

transition 与transform:scale实现渐变的效果

<style> 
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
-webkit-transition: -webkit-transform 3.2s ease;
-webkit-transform:translate3d(10px,10px,10px); /* Safari 和 Chrome */
}
div:hover {
-webkit-transform:translate3d(30px,20px,30px); /* Safari 和 Chrome */
}
</style>

div初始化的时候设置-webkit-transform:translate3d(10px,10px,10px)，意思就是向x，y，z轴移动10px距离，但是-webkit-transition: -webkit-transform 3.2s ease;渐变是没有效果的，只有-webkit-transform:translate3d(10px,10px,10px)的值发送变化的时候才会触发transition的效果，如div:hover里面的x，y,z轴的变化

对某一个属性使用样式（比如width），必须要在初始化的时候给定一个初始值（不能使用min-width：100px；width:auto这样笼统的给定,可以使用width:100%从父容器获取），不然的话动画没有效果

css样式对同一个元素的不同选择器采用样式

body > div.nice {
-webkit-transform:translate3d(130px,30px,30px); /* Safari 和 Chrome */
}
body > div {
-webkit-transform:translate3d(30px,30px,30px); /* Safari 和 Chrome */
}
<div class="nice good">Hello World</div>

上面两种选择器对div都是匹配的，那么到底选取哪一个样式呢？ 先执行不具体的样式，如body > div执行完以后再去执行body>div.nice 这一个更加具体的样式，最后呈现的就是body>div.nice的样式

设置图片按照指定的高度或者宽度自适应

一张图片实际大小是128px * 128px，在应用中我想要让图片的宽或者高是40px且另一个高或宽自适应（这样图片不会变形）

.thumb img, .thumb-mini img, .thumb-small img, .thumb-large img {
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

上面的样式设置了max-width最大宽度不能超过父容器的宽度，而父容器thumb的样式如下

.navbar-avatar .thumb-small {
    margin: 0 4px;
    vertical-align: baseline;
    width: 40px;
}

也就是说图片的宽度最大不能超过40px，而高度自适应这个宽度使得图片不发生形变

圆形头像样式设置

这是一个 150px x 150px 大小的方形，将它的四个角的半径都设置成 50%。根据 W3C border-radius 的规范定义，如果 border-radius 的值是百分比的话，就是相对于 border box 的宽度和高度的百分比。在我们的例子中，盒子的宽高都是 150px，所以 50% 对应的就是 75px。
上面值得注意的是根据元素的宽度和高度的百分比得到对应的border-radius的值，所以这里需要让图片的宽度和高度一样才能确保是圆形而不是椭圆形

有时候我看到有的人会用 border-radius: 100%;或者border-radius:500px(500px远大于元素的宽度和高度），浏览器要重新计算也是能达到圆形图片的效果的

作者：kmokidd
链接：https://zhuanlan.zhihu.com/p/20128284
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
参考这篇文章设置圆形图片Border-radius 50% vs 100%

使用left,top绝对布局需要注意的地方

在使用position：absolute left, top来绝对布局的时候，需要考虑附近元素的padding,margin,border的边距，如下的navbar-form的padding：10px 15px，所以想要在这个样式下在文本框内指定一个图标（使用绝对布局），那么这个left的距离就要算上navbar-form的padding以及文本框的padding,border,margin,加上以后才能定位到一个合适的位置

.navbar-form i{position: absolute;z-index: 1;left:20px;top: 50%;margin-top: -8px;color: #bbb}

左右栏布局

左边栏使用display:absolute left top 来定位，右边栏使用padding-left: （左栏的宽度）

关于文本框与按钮相同高度下不能对齐问题

给文本框增加一个vertical-align:bottom; 样式
参考设置相同的高度，输入框和按钮底部不对齐

关于line-height

父元素font-size*1.5，如果未定义一直向上追溯到body，如果body未定义字体大小，则按浏览器默认的来算。

楼上几位不要误导楼主，这种写法实际上作用很明显，作为一个相对的值来算，对css模块化有很大的帮助。

这只是一个相对值，也就是说，它相当于设置样式为1.5倍的行高。
如你的补充提问：我们初始设font-size:12px;　那么line-height:1.5; 就相当于12*1.5＝18px;
CSS:line-height:150%与line-height:1.5的真正区别是什么？

例子-line-height

<div style="width: 300px;height: 200px;border: 1px solid black;display: inline-block;">
    <div style="display: inline-block; width:100px;background-color: #102030;vertical-align: middle;line-height: 200px;">
        <span>it's me</span>
    </div>
    <div style="display: inline-block; width:100px;background-color: #102030;vertical-align: middle;">
        <span>it's me</span>
    </div>
</div>

最外层一个div高度是200px,而里层两个div可以指明一致或者不一致的高度，lineboxes的高度选取两者最高的line-height; 如果里层两个div指明高度以后发现不会自适应外界的高度（当然可以让外面的div不指定高度，自适应子元素的高度），如果我非得指定外面的div高度，上面所说的情况如何解决？ 让其中一个子的行内元素的高度等于外界的div高度（line-height:200px), 行内元素指定line-height为200px以后那么这一行的lineboxes的高度就是200px，通过背景色可以观察到，在搭配vertical-align: middle;就可以让元素在外界的div的中间垂直了。由此可知vertical-align: middle;的作用仅仅是在lineboxes的高度垂直居中

参考：css行高line-height的一些深入理解及应用

鼠标移动到某一个元素则其下指定元素更改样式

td:hover > .operation_panel {
  display:block;
}

鼠标移动到包含operation_panel 的td元素则让td下的operation_panel 显示出来（移动到同一行的其他td则没有这个效果）

webstrom编码

使用webstrom创建js，默认保存编码是gbk，而html5页码使用<meta charset="utf-8"> 告诉页面解析用utf8.

希望以后创建的js是utf-8

File > Settings > Editor > File Encodings 把 IDE Encoding 和 Project
Encoding 都改成 UTF-8 就行了
参考资料修改WebStorm默认保存的文件编码格式

bootstrap的表单样式

表单中提供来一些用来让布局更加美观的样式，作为一个容器样式下面几点样式是需要考虑进去的

position: relative; /** 用于子元素浮动如float,position:absolute,position:relative*/
padding,margin /** 让子元素有一个更协调的空间边距*/
height /** 高度可以不指定，根据子元素内容自动扩充，也可以指定让表单的所有元素达到统一的高度使得整齐排练*/
float:left /** 浮动达到在一行排列的效果，感觉可以用其他如inline-block,display:table，display:cell来实现*/
line-height /** 在该容器是行内元素是使用，效果是让该容器达到一个预期的高度*/
vertical-align: middle; /** 让同一行的几个行内元素在lineboxes的高度下垂直居中排列，这里是一行中的几个父容器在lineboxes下垂直居中（前提是该容器是一个行内容其，请看下面一个例子*/

例子-vertical-algin

<div style="width: 300px;height: 200px;border: 1px solid black;display: inline-block;">
    <div style="display: inline-block; height:100px;width:100px;background-color: #102030;vertical-align: middle;">
        <span>it's me</span>
    </div>
    <div style="display: inline-block; height:150px;width:100px;background-color: #102030;vertical-align: middle;">
        <span>it's me</span>
    </div>
</div>

一个div中包含了两个行内元素的div,这两个并排的行内元素产生了一个lineboxes，它取两个行内元素最大的line-height的值作为这一行的高度。这样会导致两个行内元素在lineboxes中不能垂直居中排列，因此使用vertical-algin：middle能够让两者中心点对齐排列，上面的代码运行效果可以说明这点

line-height介绍

到底这个line-height行高怎么就产生了高度呢？在inline box模型中，有个lineboxes，这玩意是看不见的，这个玩意的工作就是包裹每行文字。一行文字一个lineboxes。例如“艾佛森退役”这5个字，如果它们在一行显示，你艾佛森再牛逼，对不起，只有一个lineboxes罩着你；但“春哥纯爷们”这5个字，要是竖着写，一行一个，那真是够爷们，一个字罩着一个line boxes，于是总计五个lineboxes。line boxes什么特性也没有，就高度。所以一个没有设置height属性的div的高度就是由一个一个lineboxes的高度堆积而成的。其实line boxes不是直接的生产者，属于中层干部，真正的活儿都是它的手下 – inlineboxes干的，这些手下就是文字啦，图片啊，span之类的inline属性的标签啦。lineboxes只是个考察汇报人员，考察它的手下谁的实际line-height值最高，谁最高，它就要谁的值，然后向上汇报，形成高度。例如，<span style="line-height:20px;">取手下line-height<span style="line-height:40px;">最高span的值span。则line boxes的高度就是40像素了。

使用on动态绑定事件

on事件绑定适用于给动态添加的元素绑定事件，调用on的jQuery元素必须是之前事先指定的（也就是说不能是动态生成的），而on绑定事件后当移除改元素时事件是不会被移除的，因此需要用off和on搭配使用，先移除事件再绑定事件
例子-on-off

/**上一页点击处理 */
    defaultOperation.addPrevClickListener = function(option) {
        var _this = this; //this表示的是defaultOperation对象
        $(option.applyTo).off('click',option.easyPaginationName+' > li.'+option.prevBtn).on('click',option.easyPaginationName+' > li.'+option.prevBtn,function(event){
            event.preventDefault();
            event.stopPropagation();
            if($(this).hasClass('disabled')) {
                return false;
            }
            defaultOperation.moveItem.call(option.currentPage-1,option); //页码点击时的移动代码逻辑实现
        })
    }

option.applyTo元素不是动态生成，而在这个option.applyTo下的元素是动态生成的，我想要给option.applyTo下的上一页按钮绑定click事件则需要如上面代码一样用on来绑定，而这个分页插件和form插件整合后每次从后台获取数据会重新生成分页的面板（移除分页面板元素，在重新动态生成分页面板元素），这样会导致移除元素后事件还是存在（on，onclick绑定的事件移除元素后事件还是存在），后果就是一个元素下累计绑定了多个相同的事件，点击一次按钮就会触发这多个相同事件。

参考资料

Bootstrap(基础)学习笔记1