web前端设计与开发，JavaScript命名标识符规范

1，盒模型

1.1，ie 盒模型算上 border、padding 及自身（不算 margin），标准的只算上自身窗体的大小 css 设置方法如下：

/* 标准模型 */box-sizing:content-box ;
/*IE 模型*/box-sizing:border-box ; 

1.2，几种获得宽高的方式

• dom.style.width/height   这种方式只能取到 dom 元素内联样式所设置的宽高，也
  就是说如果该节点的样式是在 style 标签中或外联的 CSS 文件中设置的话，通过这种
  方法是获取不到 dom 的宽高的。
• dom.currentStyle.width/height   这种方式获取的是在页面渲染完成后的结果，就
  是说不管是哪种方式设置的样式，都能获取到。但这种方式只有 IE 浏览器支持。
• window.getComputedStyle(dom).width/height   这种方式的原理和 2 是一样的，这
  个可以兼容更多的浏览器，通用性好一些。
• dom.getBoundingClientRect().width/height   这种方式是根据元素在视窗中的绝对
  位置来获取宽高的
• dom.offsetWidth/offsetHeight   这个就没什么好说的了，最常用的，也是兼容最好
  的。

1.3，拓展 各种获得宽高的方式

• 获取屏幕的高度和宽度（屏幕分辨率）： window.screen.height/width
• 获 取 屏 幕 工 作 区 域 的 高 度 和 宽 度 （ 去 掉 状 态 栏 ） ：window.screen.availHeight/availWidth
• 网页全文的高度和宽度： document.body.scrollHeight/Width
• 滚动条卷上去的高度和向右卷的宽度： document.body.scrollTop/scrollLeft
• 网页可见区域的高度和宽度（不加边线）： document.body.clientHeight/clientWidth
• 网页可见区域的高度和宽度（加边线）： document.body.offsetHeight/offsetWidth

1.4，距重叠解决方案(BFC) BFC 原理

• 内部的 box 会在垂直方向，一个接一个的放置 每个元素的 margin box 的左边，与包
  含块 border box 的左边相接触（对于从做往右的格式化，否则相反）
• box 垂直方向的距离由 margin 决定，属于同一个 bfc 的两个相邻 box 的 margin 会发
  生重叠
• bfc 的区域不会与浮动区域的 box 重叠
• bfc 是一个页面上的独立的容器，外面的元素不会影响 bfc 里的元素，反过来，里面
  的也不会影响外面的
• 计算 bfc 高度的时候，浮动元素也会参与计算 创建 bfc ? float 属性不为 none（脱离文档流）
• position 为 absolute 或 fixed
• display 为 inline-block,table-cell,table-caption,flex,inine-flex ? overflow 不为 visible
• 根元素 demo

2，居中方法

水平方向上

针对 inline, 内联块 inline-block, 内联表 inline-table, inline-flex 元素及img,span,button 等元素

.text_div{
text-align:center;
}
不定宽块状元素居中
.text_div{
margin:0 auto;//且需要设置父级宽度
}

通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

.wrap{
float:left;
position:relative;
left:50%;
clear:both;
}
.wrap-center{
left:-50%;
}

垂直居中

• 单行内联(inline-)元素垂直居中
  通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。

.text_div{
height: 120px;
line-height: 120px;
}

• 利用表布局

.father {
display: table;
}
.children {
display: table-cell;
vertical-align: middle;
text-align: center;
}

• flex 布局

.center-flex {
display: flex;
flex-direction: column;//上下排列
justify-content: center;
}

• 绝对布局方式

已知高度

.parent {
position: relative;
}.child {position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}

未知高度

.parent {
position: relative;
}.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

垂直水平居中根据上方结合

flex 方式
.parent {
display: flex;
justify-content: center;
align-items: center;
}

grid 方式
.parent {
height: 140px;
display: grid;
}

.child {
margin: auto;
}

3，css 优先级确定

• 每个选择器都有权值，权值越大越优先
• 继承的样式优先级低于自身指定样式
• ！important 优先级最高 js 也无法修改
• 权值相同时，靠近元素的样式优先级高 顺序为内联样式表（标签内部）> 内部样式
  表（当前文件中）> 外部样式表（外部文件中）

4，如何清除浮动

不清楚浮动会发生高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，
子元素写了浮动后，父元素会发生高度塌陷）

• clear 清除浮动（添加空 div 法）在浮动元素下方添加空 div,并给该元素写 css 样式：
  {clear:both;height:0;overflow:hidden;}
• 给浮动元素父级设置高度
• 父级同时浮动（需要给父级同级元素添加浮动）? 父级设置成 inline-block，其 margin: 0 auto 居中方式失效
• 给父级添加 overflow:hidden 清除浮动方法
• 万能清除法 after 伪类 清浮动（现在主流方法，推荐使用）

.float_div:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}

.float_div{
zoom:1
}

5，link @import 导入 css

（1）link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务；@import 属于
CSS 范畴，只能加载 CSS。