Web前端养成记—记录与总结（一）初稿

HTML DOM Markup 的理解与思考

一、切图时的模块层级划分

1.切图之前先理清模块的层级、DOM的布局结构

2.DOM模块划分为一级模块>二级模块>三级模块…一级一级往下类推。

如下图所示：

这块可划分为三块模块包含在一个容器里

外边容器：.head

左侧logo： .logo

中间导航： .nav-wrap

导航又分为：.nav（主导航）+.nav-sns（社交导航）

右侧登录口：.head-login

html代码：

<div class="head">
    <h1><a href="#x">logo text...</a></h1>
    <div class="nav-wrap">
        <ul class="nav">
        ...
        </ul>
        <ul class="nav-sns">
        ...
        </ul>
    </div>
    <ul class="head-login">
    ...
    </ul>
</div>

二、HTML DOM Markup 遵循以下几个原则

可访问性（比如去掉样式，结构完整）
SEO
稳定、扩展灵活
W3C 验证
标签嵌套：block > inline-block > inline

三、HTML Markup 语义化

合理使用HTML标签，如段落使用p，标题使用h1~h6，面包屑导航使用ol等等
HTML 标签除了div和span，标签都是有一定语义性
对于读文档的人来说一眼可以看到重要与否，对于读文档的人来说一眼可以看到重要与否

注：关于HTML语义化可参考W3C官网标签的使用，用开发者工具禁掉它的CSS文件看看效果。

四、文档流

标准文档流的概念：

普通流，自上而下，从左到右，输出文档内容（像水一样从高到低），由块级元素（Block Elements）和行级元素(Inline Elements)组成。

【定位布局的文档流呈现方式】

float的元素也不占文档流，只是文档流会围绕浮动的东西

relative占据文档流，如果定位不好它会覆盖已有的东西（设置relative/absolute后可设置z-index属性。）

absolute的元素不占文档流，它会忽略文档流的存在而浮在已有东西的上面。

例如：

一个div容器是文档流，假设里面有（2个浮动子元素div(高各占100px)），如果你不加清理浮动，或overflow或其他处理方法。因为你的东西在两个浮动的div里，这时再接个主div2,那它是出现在div1的下面，而不是在100px下，在ie浏览器下会自动扩大高度，但其他浏览器不会。

HTML代码：

<div class="one">
    <div class="child">child-01</div>
    <div class="child">child-02</div>
</div>
<div class="two">two text.</div>

CSS代码：

* {
    margin: 0;
    padding: 0;
}
body {
    color: #fff;
}
.one {
    background: #168bc1;
}
.child {
    float: left;
    width: 100px;
    height: 100px;
    line-height: 100px;
    margin-right: 5px;
    text-align: center;
    background: #35c4e2;
}
.two {
    line-height: 100px;
    height: 100px;
    background: #a5bbbd;
}

截图效果：

如下图所示，div.one下的两个子元素div.child使用float:left;后脱离了标准文档流，使得div.one的高度无法正常扩展，div.two挤到上面去了

解决方案

1.div.one 容器设置 overflow: hidden;
2.div.one容器固定高度，div.two 容器设置clear: both;属性
3.给div.one容器添加清除浮动的公共类 .clearfix

关于清除浮动的样式

/* clearfix */
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
.clear { clear:both; height:0px; line-height: 0; font-size: 0; overflow: hidden; zoom:1; }

更多关于清除浮动知识点的可参考CSS大神@一丝的文章那些年我们一起清除过的浮动

CSS 布局、浏览器兼容性问题

CSS Box Model （盒子模型）

盒子模型概念

盒子模型=网页布局的基石，由四个部分组成:
盒子模型分为box-sizing(IE6盒子模型)与W3C盒子模型
文档中的每个元素被描绘为矩形盒子。

盒子的四个边界

外边距边界：margin
边框边界：border
内边距边界：padding
内容边界：content

盒子模型结构图：

盒子模型结构图

图片来源：慕课网

盒子的宽高计算方式

盒子尺寸=边框+外边距+内边距+盒子中的内容区尺寸
盒子宽度=左边距+左边框+左填充+内容宽度+右填充+右边框+右间距
盒子高度=上边距+上边框+上填充+内容高度+下填充+下边框+下间距

W3C盒子模型计算方式

content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和。

IE6盒子模型计算方式

border-box：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值。

padding/margin按百分比设置的计算方式

当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width值为参照物来计算

注：CSS3中有个box-sizing属性可以控制盒子的计算方式

padding和margin的使用技巧

如果为一个盒子设置了边框，间距或者填充，而又不想改变整个盒子在页面当中所占的总尺寸，那么可以改变盒子的内容区的大小。

在能用padding的情况下，尽量不用margin，用margin时尽量只设置一个方向的margin

盒子模型的3D模型立体图

第一层：border                   /*  边框 */
第二层： content+padding        /* 内容和内填充 */
第三层： background-image      /* 背景图像 */
第四层：background-color      /* 背景颜色 */
最后一层：margin             /* 外边距 */

盒子模型的3D模型

图片来源：慕课网

注：各个层叠加后也就形成了我们所看到的盒子模型的平面结构图

负margin值

margin-bottom负值不能改变当前容器的位置，但是可以在下方为相邻的容器腾出布局空间；相当于为下一个容器设置了margin-top的负值；
容器定宽时：margin-right失效；margin-top能把容器提升，不影响父级容器
容器不定宽时：margin-left和margin-right都起作用能把容器拉宽，单独使用时可以向对应方向拉宽容器；margin-top，margin-top能把容器提升，同时也会把父级容器提升

关于负margin介绍的几篇文章：

[译]负margin 详解
 [原文]负margin 详解
 CSS布局奇淫巧计之-强大的负边距

常见的一些问题与解决方案

ie浏览器下的兼容性问题

问题产生： ie浏览器在兼容模式下存在很多兼容性问题，为了不让IE低版本（6、7）在兼容模式下进行渲染需要做一些兼容处理

使用JavaScript代码查看浏览器的UA：

在浏览器地址栏敲入：javascript:alert(navigator.userAgent);

解决方案：

在head部分添加代码：

<!-- 防止IE以兼容模式进行渲染 -->
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

防止360安全浏览器兼容模式文档模式以IE7标准渲染

同理在head部分添加代码：

单行文本截断带省略号

overflow: hidden; /* 隐藏超出部分内容 /
text-overflow: ellipsis; / 文本溢出时显示省略号标记 /
white-space: nowrap; / 强制不换行 */

连续字符自动换行

overflow: hidden;
word-wrap: break-word; /* 在长单词或 URL 地址内部进行换行。 */

需求：

如何在列表项在缩小浏览器窗口比例的时，不会撑破容器的宽度，并排显示，根据浏览器窗口的比例进行缩放如下例子：

HTML 结构：

<ul class="row clearfix">
    <li>
      <div class="col-01">col-01</div>
    </li>
    <li>
      <div class="col-02">col-02</div>
    </li>
    <li>
      <div class="col-03">col-03</div>
    </li>
    <li>
      <div class="col-04">col-04</div>
    </li>
</ul>

CSS 代码：

* {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}
.row {
    width: 100%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    margin-left: 10px !important;
    margin-right: 10px !important;
}
.row li {
    float: left;
    width: 23%;
    height: 250px;
    line-height: 250px;
    text-align: center;
    color: #fff;
    padding: 0 5px;
}
.col:first-child {
    padding-left: 0;
}
.col-01 {
    background: #3fb4d4;
}
.col-02 {
    background: #b9b4d8;
}
.col-03 {
    background: #24dac2;
}
.col-04 {
    background: #78b2b6;
}
.clearfix:after {
    display: block;
    content: " ";
    line-height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
    *zoom: 1;
}

截图效果：

实现原理：

使用CSS3 box-sizing:border-box 属性

缺点：

不兼容IE8以下版本的浏览器*

表单控件的一些问题记录

checkbox与radio在PC页面对齐问题

问题产生：

input[type="radio"]和input[type="checkbox"]

在12像素大小的文字，Firefox火狐浏览器及chrome谷歌浏览器会存在对齐问题

解决方案1：

以vertical-align: middle; 为基础

input[type="radio"],
input[type="checkbox"] {
    vertical-align: middle;
    margin-top: -2px;
    margin-bottom: 1px
}

解决方案2：

以vertical-align: bottom; 为基础

input[type="radio"],
input[type="checkbox"] {
    height: 15px;
    vertical-align: bottom;
    margin-bottom: 3px;
    margin-top: -1px;
}

select高度计算问题

问题产生：原生<select>下拉菜单会自带box-sizing: border-box;属性，在计算盒子的宽高时不计入padding/border的值

HTML代码：

<select class="select">
    <option value="">1</option>
    <option value="">2</option>
    <option value="">3</option>
    <option value="">4</option>
    <option value="">5</option>
</select>

CSS代码：

.select {
    height: 26px;
    padding: 3px 5px;
    border: 1px solid #a2a2a2;
}

解决方案1：

给<select>设置box-sizing: content-box;属性改变盒子模型，以W3C盒子模型来计算

.select {
    -moz-box-sizing: content-box; /* For Firefox */
    -webkit-box-sizing: content-box; /* Chrome and Safari */
    box-sizing: content-box;
}

缺点：不兼容IE8以下的浏览器

解决方案2：

使用JQ插件改变<select>下拉菜单

input[type="text"]表单控件双magin问题：

问题产生：

在IE7下，input(不包含type="checkbox"类型标签)的父元素如有加水平方向的margin,则水平方向的margin会成双倍显示

解决方案：

给父元素的水平margin改成padding，直接避开ie6、7这个margin双倍bug
和IE6下的双margin一样，加float: left; *display: inline

元素position: absolute后带来的影响

问题产生：

元素position: absolute;，父元素高度塌陷

注：（元素absolute后脱离了文档流，父元素的高度无法正常扩展）

HTML代码：

<div class="wrap">
    <div class="child"></div>
</div>

CSS代码：

.child {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
    background-color: #a8a8a8;
}

解决方案1：

给父元素固定height

解决方案2：

在父元素中插入img标签来占位，通过CSS来设置height撑开父元素的高度，使其在不同宽度设备上保持宽高比，具体代码如下：

HTML代码：

<div class="wrap">
    <div class="child"></div>
    <img src="..." class="placeholder">
</div>

如何让页脚始终紧贴页面底部

问题产生：当页面内容的高度小于浏览器高度时，视口底部就是一片尴尬的空白，如图所示：

HTML DOM结构：

div.container > div.header+div.content+div.footer

如下图：

解决方案1：

给html和body标签中将高度(height)设置为“100%”

同时需要将html,body的margin和padding都移除，既html,body的margin和padding都为0

div#container容器必须设置一个最小高度(min-height)为100％；主要使他在内容很少（或没有内容）情况下，能保持100％的高度

在IE6下是不支持min-height的，需要做兼容处理添加height: auto important!; height: 100%; 或阅读文章Min-Height Fast Hack

还需在div#container容器中设置一个position:relative以便于里面的元素进行绝对定位后不会跑了div#container容器

div#content这个容器有一个很关键的设置，需要在这个容器上设置一个padding-bottom值，而且这个值要等于（或略大于）页脚div#footer的高度（height）值

div#footer容器必须设置一个固定高度，单位可以是px(或em)。div#footer还需要进行绝对定位，并且设置bottom:0;让div#footer固定在容器div#container的底部，这样就可以实现我们前面所说的效果，当内容只有一点时，div#footer固定在屏幕的底部（因为div#container设置了一个min-height:100%），当内容高度超过屏幕的高度，div#footer也固定在div#container底部，也就是固定在页面的底部。你也可以给div#footer加设一个”width:100%“，让他在整个页面上得到延伸。

具体代码如下：

HTML代码：

<div class="container">
    <div class="header">Header Section</div>
    <div class="content">Test test test test...</div>
    <div class="footer">Footer Section</div>
</div>

CSS 代码：

* {
    padding: 0;
    margin: 0;
}
html,body {
    height: 100%;
}
body {
    font-size: 1.25em;
    color: #fff;
}
.container {
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;  /* For IE 6 */
}
.header {
    padding: 1em 0;
    background: #1671b3;
}
.content {
    color: #000;
    padding-bottom: 290px;
}
.footer {
    position: absolute;
    width: 100%;
    height: 250px;
    bottom: 0;
    background: #363636;
}

截图效果：

浏览器兼容性：

经测试在IE6/7/8、FF、Chrome、Safari、Opera浏览器下均能友好的兼容

优缺点：

优点： 浏览器兼容性好，结构简单清晰，无需js和任何hack都能实现

缺点： 必须固定footer部分的高度（高度可以根据需求进行设置）和使用绝对定位，而且还需要将div#content容器的padding-bottom设置大小等于（或略大于）div#footer的高度，才能正常运行。

参考文章：

[译]如何将页脚固定在页面底部 [原文]如何将页脚固定在页面底部

display: inline-block; 布局带来的问题

问题产生：

block元素display: inline-block;后在IE7下无效：可以设置宽高，但还是换行显示

解决方案：

给IE7 加上这两句代码： *display: inline; *zoom: 1;

问题产生：

display-inline-block;后带来的间距问题，

给父元素设置font-size: 0; 去除空格 Chrome、Opera、FireFox下没问题 IE8以上font-size: 0;没问题，但在IE6、7 下inline元素inline-block后设置 font-size:0 始终有 1px 的空隙 Safari 5.0 不支持 font-size:0

最终解决方案

.selector {
    font-size: 0;          /* 所有浏览器 */
    letter-spacing: -5px; /* Safari 等不支持字体大小为 0 的浏览器 */
    *letter-spacing: normal;
    word-spacing: -1px;   /* IE6、7 */
}

HTML 代码：

<ul class="nav-lists">
    <li><a href="#x">1</a></li>
    <li><a href="#x">2</a></li>
    <li><a href="#x">3</a></li>
    <li><a href="#x">4</a></li>
    <li><a href="#x">5</a></li>
</ul>

CSS代码：

* {
    margin: 0;
    padding: 0;
}
body {
    text-align: center;
}
.nav-lists {
    padding-top: 50px;
    display: inline-block;
    list-style: none;
}
.nav-lists {
    *display: inline; /* For IE 6/7 */
    *zoom: 1; /* For IE 6/7 */
    *word-spacing:-1px; /* For IE 6/7 */
    font-size: 0; /* All Browser */
}
.nav-lists li {
    display: inline-block;
    background-color: #a8a8a8;
}
.nav-lists li {
    *display: inline; /* For IE 6/7 */
    *zoom: 1; /* For IE 6/7 */
}
.nav-lists li a {
    display: block;
    padding: 2px 5px;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
}

效果截图：

（注：有关于display: inline-block;布局的更多知识可移步淘宝UED的文章 display: inline-block的前世今生）

CSS背景透明，文字不透明的兼容方法

问题产生：：

使用CSS3做背景透明，文字不透明时在IE6，7，8下存在兼容问题

解决方案：

HTML代码：

<div class="demo">
    <p>背景透明，文字不透明</p>
</div>

CSS代码：

* {
    padding: 0;
    margin: 0;
}
body {
    padding: 50px;
    background: url(../img/body_bg.png) repeat 0 0;
}
.demo {
    padding: 25px;
    text-align: center;
    background: rgba(000,000,000,0.5);  /* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
}
.demo p {
    color: #fff;
}
@media \0screen,screen\9 {  /* 只支持IE6、7、8 */
    .demo {
        position: static;  /* IE6、7、8只能设置position: static;(默认属性)，否则会导致子元素继承Alpha值 */
        background-color: #000;
        filter: Alpha(opacity=50);
        *zoom: 1; /* 激活IE6、7的haslayout属性，让它读懂Alpha */
    }
    .demo p {
        position: relative;  /* 设置子元素为相对定位，可让子元素不继承Alpha值 */
    }
}

【display: none;和visibility:hidden;之间的区别】

display: none; —— 是将元素设置为无，在网页中不占据任何位置 visibility: hidden;—— 将元素隐藏，在网页中还占据了原来的位置。

使用rem单位带来的问题

rem单位在chrome浏览器下的line-height问题

问题产生：在PC端使用rem作为单位在chrome浏览器下，给根元素（html）设置了font-size: 62.5%;(10px)，当计算font-size: 1rem;是10px没问题，但是line-height还是基于chrome的最小字号12px来计算的，也就是line-height=1rem=24px

解决方案：

1.给html元素设置font-size: 100px; body设置font-size: 12px; 计算rem单位的百分比时：number px/100px(html元素的大小)=rem值

2.PC端改用px、em作为常用单位不推荐使用rem作为常用单位（一是PC端存在兼容性问题，第二是PC端大部分是固定宽度的页面，不需要做大小适配，用rem计算。会产生很多小数点的东西，移动端下推荐使用）

HTML代码：

<body>
    <p>rem单位在chrome浏览器下的line-height问题<p>
</body>

CSS代码：

* {
    margin: 0;
    padding: 0;
}
html {
    font-size: 100px;
}
body {
    font-size: 12px;
}
p {
    font-size: 12px;
    font-size: 0.12rem;   /* 0.12rem = 12px/100px */
    line-height: 0.2rem; /* 0.2rem = 20px/ 100px */
}

截图效果：

关于切图的那些事

一、切图之前的思路分析

拿PSD效果图后，首先应该对这张效果图进行分析，在切图层面上，主要分析三点

哪些图片是单独的，比如Logo和banner部分
哪些图片是需要平铺的，比如导航部分的背景
哪些图片是需要CSS sprite 比如一些列表前面的icon小图标

二、图片的格式

logo统一切成png透明度的（颜色较少的都用png）
看透明度情况使用png8或png24
一般情况下临时图、ad、banner图用jpg格式，色彩丰富的、大图切成jpg
颜色较少的都用png，用png8还是png24需看图片具体透明底情况，半透明的切成png24
在保证图片的画质情况下，图片的大小越小越好
尺寸小的，色彩不丰富的和背景透明的切成gif或者png8的

（注：IE6不支持PNG24透明度图片，需做兼容处理或切成PNG8）

三、【png-8和png-24的区别】

1.png8有1位的布尔透明通道（要么完全透明，要么完全不透明），png24则有8位（256阶）的布尔透明通道（所谓半透明）
2、png-8 和gif有一些相似之处，模式都是索引颜色，只支持像素级的纯透明，不支持 alpha 透明。

（注：我们通常说的“IE6不支持 PNG 透明”，是指不支持 PNG-24 的透明。但是 IE6 支持 PNG-8 的透明，就像支持gif的透明一样）

四、切图的小技巧

Ctrl+N新建一个透明背景图层（大小识图层比例而定，比裁剪的图层大就行）
shift+鼠标左键点击图层可选中多个图层进行操作
Ctrl+鼠标左键选中需要裁剪的图层移至第1步中新建好的透明背景图层当中，再按ctrl+shift+E进行合并可视图层。
Ctrl+鼠标左键点击右边图层栏的选区视图，选中需要裁剪的图层选区，再按快捷键[Alt+I+R（裁切）或Alt+I+P（裁剪）]进行裁剪
裁剪完成后ctrl+shift+alt+s进行保存为web可用格式。

五、CSS Sprite 图

CSS Sprite图：它是把网页中一些零星背景图片整合到一张图片文件中，再利用CSS的背景图片定位到要显示的位置，因此也叫“图片拼合”技术。

CSS Sprite 图实现的方式

PS手动拼图
使用Sprite 工具自动生成
CSS Sprite自动生成的工具——CssGaga

使用CSS Sprite 图需要满足以下条件：

静态图片，不随用户信息的变化而变化
小图片，图片容量比较小（一些大图不建议拼成Sprite图）
加载量比较大

使用CSS Sprite图好处：

有效的减少http请求数量，加速内容显示，从而提高效率

（注：每请求一次，就会和服务器链接一次，建立链接是需要额外时间的）

CSS Sprite实现的原理

通过控制一个层，可显示的区域范围大小，通过一个窗口，进行背景图的滑动
background-position：x定位点 y定位点;
原点位置，即外层块元素的左上角
background-position 位置设定是指图片与坐标原点的偏移量
原点是不会动的，移动的是图片 X坐标为正则图片左上角向右平移，为负则图片左上角向左平移
Y坐标为正则图片左上角向下平移，为负则左上角向上平移

CSS background-position 百分比计算方式：

X轴：( container宽度 – 图片宽度 )含符号百分比
Y轴：( container高度 – 图片高度)含符号百分比

Bootstrap框架的使用手册

一、使用Bootstrap作为PC页面框架需注意的点：

浏览器的兼容性问题（如要照顾IE6/7/8这几个古董）

参考Bootstrap框架结构写样式尽量不使用:before伪元素作为选择器，IE6/7不支持

BootStrap 在IE8下无法支持@media query（媒体查询）做响应式页面设计

问题产生：BootStrap在IE8下无法做响应式设计

解决方案（IE条件注释）：

<!-- 以下两个插件用于在IE9以下（IE6/7/8）版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
<!--[if lt IE 9]>
<!--Bootstrap模版为使IE9以下的（IE6/7/8）浏览器兼容html5新增的标签-->
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<!--同理为使IE8浏览器对CSS3的样式（Media queries 媒体查询）进行支持-->
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

问题产生：respond.min.js在IE8下失效问题

解决方案：

需把文件置于服务器上，如：在iis下运行

包含媒体查询的 css文件需采用外链形式

头部引用的respond.min.js需置于css文件之后

头部引用的respond.min.js文件必须放在本html页内，如shtml文件提出公共部分后则无效

总结

以上所有问题都是本人平时在项目开发过程以血的教训总结粗来的，也有些来源是学习网上大神写的技术文章，当然大部分都是通过请教问津书院的几位大神总结整理出来的。不管来源何处，总之希望能够对阅读的你有所帮助，在项目开发过程中避免一些不必要的坑。

这是本人第一次做技术总结，有的地方写的比较杂、知识点比较碎片化，如有不对的地方还望各位看官轻喷，同时也欢迎联系本人邮箱进行错误的指正及补充，感谢大家阅读。: )

关于我：

一个前端爱好者，一个誓死不脱离低级趣味的人，偶尔会装逼。

欢迎各路看官一起深（tan）入（xiao）交（feng）流（sheng）。

联系邮箱： *moldy_bread@foxmail.com *

特别鸣谢：

在这里特别感谢下问津书院的两位领导@校董大人 @院长大人的极力帮助，对本人提出的问题进行耐心解答，并给出了不同的优秀解决方案，在两位大神的带领下涨了好多姿势。

Future Friendly College

問津書院