最近完成：任务八九

笔记：

关于栅栏系统和媒体自适应

col-xs- 超小屏幕 手机 (<768px)

.col-sm- 小屏幕 平板 (≥768px)

.col-md- 中等屏幕 桌面显示器 (≥992px)

.col-lg- 大屏幕 大桌面显示器 (≥1200px)

<div class="col-xs-12 col-sm-9 col-md-6 col-lg-3"> </div>

当屏幕尺寸

小于 768px 的时候，用 col-xs-12 类对应的样式；

在 768px 到 992px 之间的时候，用 col-sm-9 类对应的样式；

在 992px 到 1200px 之间的时候，用 col-md-6 类对应的样式；

大于 1200px 的时候，用 col-lg-3 类对应的样式；

栅格系统都会自动的每行row分12列 col-xs-*和col-sm-* 和col-md-*后面跟的参数表示在当前的屏幕中 每个div所占列数。例如 <div class="col-xs-6 col-md-3"> 这个div在屏幕中占的位置是： .col-xs-6 在超小屏幕中占6列 也就是屏幕的一半（12/6列=2个div） ，.col-md-3 在中单屏幕中占3列也就是1/4（12/3列=4个div）。

box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。

content-box，border和padding不计算入width之内

padding-box，padding计算入width内

border-box，border和padding计算入width之内

background-clip：

border-box 默认值。背景绘制在边框方框内（剪切成边框方框）。

padding-box 背景绘制在衬距方框内（剪切成衬距方框）。

content-box 背景绘制在内容方框内（剪切成内容方框）。

css实现图片上下滑动： animation属性

 flite:blur  滤镜

异步指的是生活中的同步，同时加载的意思，同步则是生活中的顺序加载的意思。

table的缺点在于服务器把代码加载到本地服务器的过程中，本来是加载一行执行一行，但是table标签是里面的东西全都下载完之后才会显示出来，那么如果图片很多的话就会导致网页一直加载不出来，除非所有的图片和内容都加载完。 展现速度会慢，用户体验没有那么好

一、div+css布局的好处：

1.符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。

2.布局精准，网站版面布局修改简单。

3.加快了页面的加载速度（最重要的）（在IE中要将整个table加载完了才显示内容）。

4.节约站点所占的空间和站点的流量。

5.用只包含结构化内容的HTML代替嵌套的标签，提高另外搜索引擎对网页的搜索效率。

二、table布局的好处（table布局也不是一点用的没有，这点是毋庸置疑的）

1.容易上手。

2.可以形成复杂的变化，简单快速。

3.表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。

Tables的缺点 

1、Table要比其它html标记占更多的字节。(延迟下载时间，占用服务器更多的流量资源。) 

2、Tablle会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度，让用户等待更久的时间。) 

3、Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。(增加设计的复杂度，增加页面加载时间，增加HTTP会话数。) 

4、在某些浏览器中Table里的文字的拷贝会出现问题。(这会让用户不悦。) 

5、Table会影响其内部的某些布局属性的生效(比如<td>里的元素的height:100%)(这会限制你页面设计的自由性。) 

6、一旦学了CSS知识，你会发现使用table做页面布局会变得更麻烦。(先花时间学一些CSS知识，会省去你以后大量的时间。) 

7、table对对于页面布局来说，从语义上看是不正确的。(它描述的是表现，而不是内容。) 

8、table代码会让阅读者抓狂。(不但无法利用CSS，而且会你不知所云) 

9、table一旦设计完成就变成死的，很难通过CSS让它展现新的面貌。 

轮播图：

用的bootstrap里的Carousel插件,看到说swiper插件也满好用的，尝试了一下，没弄明白

关于一个页面做两个轮播图，第二个轮播图没效果：

https://www.cnblogs.com/chenguanai/p/7060547.html

外边距重叠解决方法：

外层元素padding代替

内层元素透明边框 border:1px solid transparent;

内层元素绝对定位 postion:absolute:    1

外层元素 overflow:hidden;     2

内层元素 加float:left;或display:inline-block;    3

内层元素padding:1px;

123触发了BFC

主流浏览器内核：

1、IE浏览器内核：Trident内核，也被称为IE内核；

2、Chrome浏览器内核：Chromium内核 → Webkit内核 → Blink内核；

3、Firefox浏览器内核：Gecko内核，也被称Firefox内核；

4、Safari浏览器内核：Webkit内核；

5、Opera浏览器内核：最初是自主研发的Presto内核，后跟随谷歌，从Webkit到Blink内核；

6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；

7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；

8、百度浏览器、世界之窗内核：IE内核；

bootstrap常用组件：

1.轮播图

2.下拉菜单

3.响应式导航栏

应用：

下拉菜单

只需要在 class .dropdown 内加上下拉菜单即可。

给下拉按钮添加dropdown-toggle类和指向性用id，如id="menu1",data-toggle用来控制弹出框元素

给菜单列表添加dropdown-menu类和aria-labelledby="menu1"用来表示指向哪个菜单

响应式导航条

1.向nav标签添加 class .navbar、.navbar-default。

2.向上面的元素添加 navbar-header

3.给navbar-header的button添加data-toggle="collapse" data-target="#example-navbar-collapse"。（collapse 折叠菜单）

4.给下面的div添加class="collapse navbar-collapse" id="example-navbar-collapse"

1）.navbar-toggle样式是控制3根斑马线的。

2）.navbar-collapse 样式使导航链接可以在小屏幕状态下收纳到一个菜单按钮中

3）.collapsed是为了响应折叠插件的

4）.data-toggle=“collapse”表明这个button是一个折叠控件，其折叠的内容指向data-target="#navbar"，即是id为navbar的内容

Transition  过渡效果

margin 负边距作用

https://www.jianshu.com/p/549aaa5fabaa

meta标签的作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等！

关于meta各种属性及其参数：

https://www.jb51.net/web/70787.html

响应式网页设计优缺点：

优点：

1. 跨平台和终端且不需要分配子域

2.兼容当前及未来设备。

3.节约成本。

 缺点：

1.兼容性 不兼容低版本浏览器

2.移动带宽增多

3.加载事件长、无用代码太多。

4.局限性，一般门户网或电商网站一个界面内容较多，而响应式最忌讳较多内容，代码过多会影响运行速度。