CSS Reset：重新设置HTML标签的默认样式。
(1)重设了盒子模型的计算方法 * { box-sizing: border-box; }
(2)重设了所有元素的默认字体 14px/1.42857143 "Helvetica Neue"
(3)body { margin: 0; color: #333; background-color: #fff;}
(4)h1~h6 { font-size: xxpx; margin-top: 20px/10px; margin-botton: 10px;}
(5)a { color: #xxxxx; text-decoration: none;}
CSS布局陷阱——子元素的margin-top越界：
若父元素没有上边框/上margin，则第一个子元素的margin-top会越界！
最佳解决方案：
.parent2:before {
content: ' ';
display: table;
}
父元素中所有子元素由于浮动造成的影响，最佳解决方案：
parent:after {
content: ' ';
display: table;
clear: both;
}
6.Boostrap提供的全局CSS样式——按钮相关样式
提示：按钮相关的样式可以作用于button/input/a三种元素
.btn 设置了按钮的padding、margin、font、border
--------------------------------------------------------------------
.btn-default 设置了按钮的color、background、border
Bootstrap五种常用颜色：
.btn-warning 警告色(橙黄色)的按钮
.btn-danger 危险色(红色)的按钮
.btn-info 提示色(浅蓝色)的按钮
.btn-success 成功色(绿色)的按钮
.btn-primary 基础色(深蓝色)的按钮
Bootstrap四种大小：
.btn-lg 大号按钮(large)
默认 默认大小
.btn-sm 小号按钮(small)
.btn-xs 超小号按钮(extra small)
1.全局CSS样式——图片
.img-circle border-radius:50%
.img-rounded border-radius:6px;
.img-thumbnail border padding
.img-responsive max-width display
2.全局CSS样式——文本
.text-warning
.text-success
.text-danger
.text-info
.text-primary
-------------------
.text-lowercase
.text-uppercase
.text-capitalize
-------------------
.text-left
.text-center
.text-right 右对齐
.text-justify (两端)调整对齐
---------------------
.bg-warning
.bg-success
.bg-danger
.bg-info
.bg-primary
----------------------
.pull-left float: left;
.pull-right float: right;
.clearfix clear:both;
-----------------------
.show display:block;
.hidden display:none;
table全局样式 .table width margin-bottom .table>td .table-bordered border:1px solid #ddd; .table-condensed 把单元格的padding有8px改为5px,内容看起来“紧凑”些 .table-striped 条纹状表格，为奇数tr添加了一个浅色的背景色 .table-hover 当鼠标悬停在tr上时，添加浅色的背景色 .table-responsive 响应式表格——屏幕变小时，出现水平滚动条——该class不能用于<table>,只能用于其父元素<div>上！ -------------------------------------------------------------- 用在tr和td上的class——WebStorm默认没有提示 .danger 背景色淡红色，且悬停后变为深红色 .warning 背景色淡黄色，且悬停后变为深黄色 .info 背景色淡蓝色，且悬停后变为深蓝色 .success 背景色淡绿色，且悬停后变为深绿色 .active 背景色淡灰色，且悬停后变为深灰色
6.全局CSS样式——栅格布局系统——重点
两个容器类：
.container 宽度固定的容器
1170px; 屏幕宽度>=1200
970px; 屏幕宽度>=992
750px; 屏幕宽度>=768
padding-left/right: 15px;
margin-left/right: auto;
.container:before: 防止第一个子元素的margin-top越界
.container:after: 清除子元素浮动造成的影响
.container-fluid 流式容器
auto;
padding-left/right: 15px;
.container-fluid:before
.container-fluid:after
Bootstrap提供的响应式网格布局系统——Grid Layout System
<div class="container/container-fluid">
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
Bootstrap把屏幕分为四类：
(1)xs-超小屏幕(手机)： <768px
(2)sm-小屏幕(平板)： >768px <=992px
(3)md-中等屏幕(一般PC显示器)： >992px <=1200
(4)lg-大型屏幕(大型PC显示器)： >1200px
.col-xs-1 ~ .col-xs-12 对超小、小、中等、超大屏幕有效
.col-sm-1 ~ .col-sm-12 对小屏幕、中等、超大屏幕都有效
.col-md-1 ~ .col-md-12 对中等屏幕、超大屏幕有效
.col-lg-1 ~ .col-lg-12 只对超大屏幕有效
.col-xs-offset-1 ~ .col-xs-offset-12 偏移量
.col-sm-offset-1 ~ .col-sm-offset-12 偏移量
.col-md-offset-1 ~ .col-md-offset-12 偏移量
.col-lg-offset-1 ~ .col-lg-offset-12 偏移量
.hidden-xs 在超小屏幕下隐藏
.hidden-sm 在小屏幕下隐藏
.hidden-md 在中等屏幕下隐藏
.hidden-lg 在超大屏幕下隐藏