前端笔记

• Bootstrap 框架的网格系统工作原理如下：
  1 、数据行 (.row) 必须包含在容器（ .container ）中，以便为其赋予合适的对齐方式和内距 (padding) 。

<div class=" container ">
      <div class=" row "></div>
      </div>

2 、在行 (.row) 中可以添加列 (.column) ，但列数之和不能超过平分的总列数，比如 12 。
<div class="container"> <div class="row"> <div class="col-md- 4 "></div> <div class="col-md- 8 "></div>
3 、具体内容应当放置在列容器（ column ）之内，而且只有列（ column ）才可以作为行容器 (.row) 的直接子元素
4 、通过设置内距（ padding ）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（ margin ）来抵消内距 (padding) 的影响

vertical-align是设置设置元素的垂直对齐方式。没有text-vertical；

垂直居中对齐的标签定义是:<vertical-align:center>

UTF-8（8-bit Unicode Transformation Format）是一种针对Unicode的可变长度字符编码，又称万国码。UTF-8用1到6个字节编码UNICODE字符。用在网页上可以同一页面显示中文简体繁体及其它语言（如英文，日文，韩文）。
GBK是汉字编码，是双字节码，可表示繁体字和简体字。
ISO8859-2 字符集，也称为 Latin-2，收集了东欧字符。

hover -> focus -> active
悬停 -> 聚焦 -> 响应

Flexbox可以简单快速的创建一个具有弹性功能的布局，当在一个小屏幕上显示的时候，Flexbox可以让元素在容器(伸缩容器)中进行自由扩展和收缩，从而容易调整整个布局。它的目的是使用常见的布局模式，比如说三列布局，可以非常简单的实现。
一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。 伸缩容器(flex containers)是一个HTML标签元素，并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目(flex items)。

当定义border:none时，表示无边框样式，浏览器并不会对边框进行渲染，也就没有实际的宽度；

display:none在隐藏元素的时候，将其占位空间也去掉；而visibility:hidden只是隐藏了内容而已，其占位空间仍然保留。

display:none与visibility:hidden都可以用来隐藏某个元素

浏览器 的内核引擎，基本上是四分天下：1）Trident: IE 以Trident 作为内核引擎；2)Gecko: Firefox 是基于 Gecko 开发；3）WebKit: Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器；4）Presto: Opera的内核，但由于市场选择问题，主要应用在手机平台--Opera mini

.屏幕的尺寸标准

超小屏幕（手机）	小屏幕（平板）	中等屏幕（桌面）
<768px	>=768	>=992
.col-xs-	.col-sm-	.col-md-

1，@import url（）机制是不同于link的，link是在加载页面前把css加载完毕，而@import url（）则是读取完文件后在加载，所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)。
2，@import 是css2里面的，所以古老的ie5不支持。
3，当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
4，link除了能加载css外还能定义RSS，定义rel连接属性，@import只能加载css

static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

W3C标准定义的阻止事件向父容器传递： e.stopPropagation()

DOM中的事件对象：（符合W3C标准）

preventDefault() 取消事件默认行为
stopImmediatePropagation() 取消事件冒泡同时阻止当前节点上的事件处理程序被调用。
stopPropagation() 取消事件冒泡对当前节点无影响。
IE中的事件对象：
cancelBubble() 取消事件冒泡
returnValue() 取消事件默认行为

栅格系统的工作原理中有，为了创建列（colume）之间的间隔 需要设置padding,而且需要设置margin为负值，消除第一个和最后一个之间padding的影响。

float有四个值left,right,none（默认值）和inherite（从父类继承而来的浮动）。

转载于:https://www.cnblogs.com/code-charmer/p/4842816.html