1.当需要定义一些相互之间没有联系的版块的时候可以用<section></section>标签
2.要注意:nth-child()和:nth-of-type()的区别
例如：·section:nth-child()是找section的父元素然后再找父元素下面的第几个子元素（也就是和section同级了）
·section:nth-of-type()直接就是找section下面的子元素（是section的下一级）
3.只要在页面中要用到固定宽度的版块的话都是用container这个容器
4.如果想要“从堆叠到水平排列”这一项在任何移动设备上都能水平呈现而不是堆叠的话就要用
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
5.如何把别人网页上的字体图标弄下来自己用
（1）查看该字体图标
-------->
----------->
（2）然后看css里面哪个地方声明了这个字体文件
注意这里不是直接左键点击打开而是右键，选择“open in new tab”，然后在打开的界面里面发现源码是密密麻麻的一堆
然后在打开的源码界面ctrl+F搜索需要查找的字体
（3）找到@font-face{}，看里面的src，把url复制下来就可以了
6.字体图标的格式
（1）eot：embedded-opentype
（2）svg：svg
（3）ttf：truetype
（4）woff：woff
7.引用字体图标的时候一般是用<i></i>标签
8.如果想要一个图片在一个父盒子中居中的话就要用到position定位
（1）其中子盒子是absolute，父盒子是relative
（2）子盒子的left不能设置为定死的值，只能是百分比
例如----->left：50%的时候图片的左上角的位置在父盒子的中间，所以为了达到真正的真个图片父盒子中间的时候就用margin-left：-图片宽度的一半
9.加号选择器：去找满足某个条件的相同的兄弟元素的后面的所有节点
10.在线制作字体图标
（1）制作字体图标的网址：https://icomoon.io/app/#/select
（2）点击
（3）导入图标，点击之后会让你选择文件
（4）选择好文件之后点击“Generate Font”生成字体
（5）圈起来的部分就是字符编码，是可以我们自己改的
（6）在下载之前点击“Preferences”首选项可以进行一些设置
（7）然后download就可以了
10.以后写网页的时候如果要写nav导航条，就是类似下面这样的：
可以直接去bootstrap“导航条”看看能不能直接用bootstrap里面定义好的导航条
11.在控制字体图标位置的时候，有时候会遇到字体图标不能对齐显示问题， 这时候就要设置行高line-height和字体对齐方式vertical-align：middle
12.__hidden-xx__ : 在某种屏幕下隐藏
- __visible-xx__ : 在某种屏幕尺寸下显示
+ visible-xx-xx：最后一个xx是决定显示时的display到底是啥
13.如果需要使用更新的bootstrap里面你的样式的话，可以在自己的css文件里面对bootstrap的css样式进行扩展，实际上就是把bootstrap里面原本的样式复制下来，然后改掉自己需要修改的部分就行
14.谷歌浏览器开发工具保存修改（在开发者工具里面做出修改以后可以直接把修改的地方保存到我们的源码中，不需要在复制粘贴）
（1）打开sources面板
（2）在下面这部分右键之后会出现“Add folder to workspace”,点击“Add folder to workspace”后选择本地的源码文件，再点击“允许”
这时就出现了本地的源码文件
（3）接下来就是把请求的文件和我们本地的源码文件对应。在请求文件或是本地文件上右键，点击“Map to ……”，开发者工具会自动帮我们找到对应的文件
点击下面灰色的index就是匹配成功了
我下载了两个版本的谷歌浏览器，一个是版本 57.0.2987.133，还有一个是版本 44.0.2403.157，上述关联文件的做法只在比较旧的版本的浏览器上才生效，对于新版本的浏览器似乎没有作用，我现在也不知道是为什么，如果有大神路过看见这个帖子的话麻烦赐教一下，感激不尽
15.在一个较小的屏幕下去展示一个超宽的图片，并且想要图片居中显示
（1）为轮播图区域加一个很长的背景图，这个背景图是居中定位的
（2）在图片宽度大于盒子宽度的时候text-align时不起作用的。这时就只能通过以下的方式实现：
position：absolute；
left：50%；
margin-left：-图片宽度的一半
16.对于外观固定不变的东西就写在css里面，内容以后也许会改变（也就是会动态生成的）就写在html文档的行内式里面
17.background-size的设置
（1）具体值
（2）百分比
（3）cover：按照较小边最终缩放到目标大小
（4）contain：按照较大边最终缩放到目标大小
18.图片响应式
（1）目的：各种终端需要正常显示图片，移动端应该使用更小的（体积：其实就是文件的大小）图片
（2）思路：当屏幕尺寸发生变化的时候，去获取屏幕的宽，当屏幕的宽小于一定值就认为是移动端屏幕，就显示小图；当屏幕大于一定值的时候就认为是PC端屏幕，就显示大图
（3）如果想要图片在特别小的窗口显示的时候还是成比例（就是图片不会变形），原理就是在小窗口的时候用img，大窗口就回归background
19.注册事件之后想让事件立即被触发一次的话就用trigger（）
$(window).on('resize',resize).trigger('resize');
20.在界面中禁用js脚本（谷歌浏览器）：
------------->
------------------------------------>
21.bootstrap里面的p标签默认有margin-bottom：10px，自己清掉就可以了
22.学会去看bootstrap组件的源码，自己尝试去改
例如：bootstrap里面的轮播图
<div
id="carousel-example-generic"
class="carousel slide"
data-ride="carousel">
<!-- Indicators -->
<ol
class="carousel-indicators">
<li
data-target="#carousel-example-generic"
data-slide-to="0"
class="active"></li>
<li
data-target="#carousel-example-generic"
data-slide-to="1"></li>
<li
data-target="#carousel-example-generic"
data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div
class="carousel-inner"
role="listbox">
<div
class="item active">
<img
src="..."
alt="...">
<div
class="carousel-caption">
...
</div>
</div>
<div
class="item">
<img
src="..."
alt="...">
<div
class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a
class="left carousel-control"
href="#carousel-example-generic"
role="button"
data-slide="prev">
<span
class="glyphicon glyphicon-chevron-left"
aria-hidden="true"></span>
<span
class="sr-only">Previous</span>
</a>
<a
class="right carousel-control"
href="#carousel-example-generic"
role="button"
data-slide="next">
<span
class="glyphicon glyphicon-chevron-right"
aria-hidden="true"></span>
<span
class="sr-only">Next</span>
</a></div>
我们自己写的时候肯定不会写这么多属性，那么它想要实现轮播的功能的话很可能就是这些属性生效。其实就是删除属性，看看哪些属性会引起轮播图功能的失效，那么需要修改的话就是改这个属性了
23.在引用bootstrap文档的时候，如果没有出现自己需要的效果的话，很可能就是漏掉了js（虽然大多数情况下bootstrap文档直接引用css就会有效果，但是部分插件还是要注意有没有漏掉下面的js代码的）
例如：
引用这些样式的时候会发现文档的下面还有：
Opt-in functionality（红色）就是需要注意js的地方
24.jquery追加元素的时候会默认把元素与元素之间的空格字符全部删掉。在这前提下，有时候hover效果会出现“跳一下”的情况，解决方法如下：
（1）把font-size设为0
25.让两个元素在同一行的方法
（1）使用float，一个left，一个right，分别设置百分比
（2）把两个元素设置为行内块元素——display：inline-block。使用这个方法有时候会出现下面的问题：
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="UTF-8">
<title>空白字符问题</title>
<style>
html,body{
margin:
0;
padding:
0;
}
.container{
width:
1024px;
height:
2000px;
margin:
0
auto;
}
.container
div{
display:
inline-block;
}
.left{
width:
80%;
height:
100%;
background:
pink;
}
.right{
width:
20%;
height:
100%;
background:
skyblue;
}
</style>
</head>
<body>
<div
class="container">
<div
class="left"></div>
<div
class="right"></div>
</div>
</body>
</html>
发现并不是在同一行
这个时候只需要把：
<div
class="left"></div>
<div
class="right"></div>
变为：
<div
class="left"></div><div
class="right"></div>，得到的结果就是在同一行显示：
但是如果真的想要换行，也就是非得写成
<div
class="left"></div>
<div
class="right"></div> 这个形式的话
就在：
.container{
width:
1024px;
height:
2000px;
margin:
0
auto;
}里面加上font-size:0;使得空白字符不占宽度
26.data-xxx是用来记录信息的属性
27.在bopotstrap的js插件里面：
data-offset-top = “什么位置出现”
data-offset-bottom = “什么位置消失”
28.模态框可以放在html文档里面的任何位置，但是一般来讲放在哪都可以的元素都是放在最下面
（1）如果想要把input框变大的话可以加上input-lg类名