制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，如下图所示，即为设置了圆角背景的导航。而且每个元素的大小都是不确定的，有内容来决定元素的大小，但是每个元素的边框都是一样的。这就引入看滑动门技术。

特点：
1 实用性，能够根据导航条菜单文本长度自动调节宽度；
2 简洁性，它可以用简单背景小图来实现炫彩的导航条风格，大大减少网页载入内容。
3 适用性，可以多层套用，实现双层滑动门炫彩风格，也可以实现网页其他模块的一些特殊效果。

案例：

对于这种两端都为圆角的滑动门效果，一共需要3部分，首先把图片分为3部分：

两端采用两个div，采用两个圆角图形作为背景，或者直接img引入两张圆角图形，中间div采用平铺背景矩形。
如果有鼠标经过的效果，可以定义a标签，借助span标签，转换成行内块，实现此效果。
html

<div class="left"></div>
<div class="con">测试滑动门技术</div>
<div class="right"></div>

css

 .left{
        width:10px;
        height:100px;
        background-image:url(left.png);
        float:left;
}
.right{
       width:10px;
       height:100px;
       background-image:url(right.png);
       float:left;
}
.con{            
         height:100px;
         background-image:url(con.png);
         background-repeat:repeat-x;
         float:left;
         line-height: 100px;
}

emmet是我们在sublime中的一个插件在这个插件中集成很多的快捷键。通过这些快捷键可大大提高我们的开发效率。
常用快捷键

• 生成结构的快捷键：！+ tab,可以生成html5的结构代码。
• 生成id名和类名：标签名.类名#id名+tab，或者没有标签名.类名+tab生成的是div。
• 生成同级元素：标签名+标签名+标签名 "+"tab
  -生成子类标签:标签名>子标签名>子标签名>子标签名+tab或标签名>子标签名>子标签名>子标签名^^子标签名+tab（注意：^代表上一级）。
• 带固定数量的标签:ul>li*5+tab。
• 带有序号名称：ul>li.abc$*3 + tab。
• 生成带有内容的标签：ul>li>a{item}*5。
• width:30px的快捷键w30+tab。
• Height:30px的快捷键h30+tab。
• Margin:30px的快捷键mg30+tab。

原理：
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图）。然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。
案例

#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}

CSS的隐藏

• overflow:hidden; 溢出隐藏 ，超出元素范围的内容会被剪切掉。
• visibility:hidden; 隐藏元素， 隐藏之后还占据原来的位置。
• display:none; 隐藏元素， 隐藏之后不占据原来的位置。

• display:block; 元素可见。
  注意：display:none 和display:block 常配合js使用。

  内容移除

  • 使用text-indent:-5000em;这样可以隐藏文字内容，使内容不显示在网页可见范围内，通常用于SEO优化。值一般不会超过7位，超出7位页面会出现bug。
  • 将元素高度设置为0,使用内边距将盒子撑开，给盒子使用overflow:hidden;将文字隐藏。如果想占据位置，可以通过设置盒子的内边距（padding）来控制。

vertical-align 其实就是垂直对齐的意思。

应用：
图片和文字垂直居中对齐

img{vertical-align:middle;}

标签包含规范

• div可以包含所有的标签。
• p标签不能包含div h1等标签。
• h1可以包含p，div等标签，但不建议使用。
• 行内元素尽量包含行内元素，行内元素不要包含块元素。

规避脱标流

• 尽量使用标准流。
• 标准流解决不了的使用浮动。
• 浮动解决不了的使用定位。

由于各浏览器的渲染内核都不一样，对相同的标签可能会有不同的样式，为了解决这种问题带来的浏览器的不兼容，在网页开发之前，一般都会进行初始化，下面几个是常用的初始化代码，直接饮用也行。

雅虎CSS初始化

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; }
body { background:#fff; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; }
td,th,caption { font-size:14px; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
a { color:#555; text-decoration:none; }
a:hover { text-decoration:underline; }
img { border:none; }
ol,ul,li { list-style:none; }
input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; }
table { border-collapse:collapse; }
html {overflow-y: scroll;}

.clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;}
.clearfix { *zoom:1; }

腾讯QQ官网CSS初始化

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}

淘宝CSS初始化

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

新浪官网CSS初始化

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";}
ul,ol{list-style-type:none;}
select,input,img,select{vertical-align:middle;}
a{text-decoration:none;}
a:link{color:#009;}
a:visited{color:#800080;}
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}

网易官网CSS初始化

html {overflow-y:scroll;}
body {margin:0; padding:29px00; font:12px"\5B8B\4F53",sans-serif;background:#ffffff;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}
table,td,tr,th{font-size:12px;}
li{list-style-type:none;}
img{vertical-align:top;border:0;}
ol,ul {list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:12px; font-weight:normal;}
address,cite,code,em,th {font-weight:normal; font-style:normal;}

浮动布局

语法：
关键字：float。值：left（左浮动）;right（右浮动）。

特点：

• 元素浮动之后不占据原来的位置（脱标），下面的元素会在浮动元素的下面。
• 浮动的盒子在一行上显示。
• 行内元素浮动之后转换为行内块元素。（转行内块元素不推荐使用此方法，转行内元素最好使用display: inline-block;）。
• 浮动通常用于：文本绕图（文字不会位于浮动元素的下面）、制作导航（通常是li的浮动）、网页布局。
• 浮动的盒子一般都给宽度,浮动的盒子千万不要让他超出父盒子，超出父盒子的部分会影响下面盒子中的浮动的子盒子。
• 浮动的盒子比标准流盒子高，但是能够遮挡住标准流盒子，遮挡不住里面的图片和文字。
• 同一个父级元素的子盒子，要么都浮动，要么都不浮动。
• 浮动的盒子相互影响，不管是否在一个盒子中。
• 建议浮动的盒子都给宽高，尽量盒子之间有点距离。
• 浮动的盒子，超出父盒子宽度换行解决办法：再给浮动的盒子一个父盒子，父盒子宽度大于要显示的子盒子总宽度，然后用，overflow:hidden切掉。
• 同级相邻的浮动的盒子顶边对齐。

清除浮动

由于元素浮动之后不占据原来的位置（脱标）的缘故当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误，位于浮动元素的下面，所以引入了清除浮动的概念，清除浮动不是不用浮动，清除浮动产生的不利影响。

• 清除浮动的方法
  清除浮动，其实是清除浮动产生的不利影响。
  关键字：clear 值：left（清除左浮动）；right（清除右浮动）；both（清除相关所有浮动，应用最多）

  • 给父元素设置高度。
  • 额外标签法
    在最后一个浮动元素后添加一个清除浮动的标签。例如：<div style="clear: both;"></div>
  • 给父集元素使用overflow:hidden;或者overflow:auto但是，如果有内容出了盒子，外面的部分将会被隐藏，不能使用这个方法。
  • 伪元素清除浮动
    首先定义一个伪元素清除浮动，然后在父元素中调用。

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

或者:双伪元素标签法

.clearfix:before,  .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
     zoom: 1;
}

附录：overflow

• overflow:visible;默认值，超过元素框不会被隐藏，会显示在外面。
• overflow:hidden;超过元素框会被修剪，不会显示在外面。
• overflow:scroll;超过元素框会被修剪，但是浏览器会存在滚动条，用户可以通过滚动条来查看所有内容。
• overflow:scroll;超过元素框会被修剪，如果元素被修剪了，浏览器才会出现滚动条，用户可以通过滚动条来查看所有内容。

新的一年即将开始，小宁在这里祝您新春快乐，新年新气象！ 一路发发发，新年旺旺旺！

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

边框(border)

属性（值）

• border-top-style边框样式；solid 实线；dotted 点线； dashed 虚线。
• border-top-color 边框颜色。
• border-top-width 边框粗细。
  注意：边框属性的连写的特点：没有顺序要求，线型为必写项。
• border-collapse:collapse 边框合并 。<label for="one">账号：<input type="text" id="one"></label>
• border-top|right|bottom|left 上右下左边框。

• a标签的部分尽量用margin。

  内边距

  属性（值）

• padding-top|right|bottom|left 上右下左内边距。

• padding连写案例。

  • padding: 20px; 上右下左内边距都是20px。
  • padding: 20px 30px; 上下20px 左右30px。
  • padding: 20px 30px 40px; 上内边距为20px 左右内边距为30px 下内边距为40。
  • padding: 20px 30px 40px 50px; 上20px 右30px 下40px 左 50px。

注意：

• padding没有负值。
• 内边距影响盒子的宽度。
• 边框影响盒子的宽度。
• 盒子的宽度=定义的宽度+边框宽度+左右内边距。
• 继承的盒子一般不会被撑大：包含（嵌套）的盒子，如果子盒子没有定义宽度，给子盒子设置左右内边距，一般不会撑大盒子。
• 盒子的撑开与撑破，有高度会被撑破，没有高度会被撑开。

外边距

属性（值）

• margin-top|right|bottom|left 上右下左外边距。

• margin连写案例。

  • margin: 20px; 上右下左内边距都是20px。
  • margin: 20px 30px; 上下20px 左右30px。
  • margin: 20px 30px 40px; 上内边距为20px 左右内边距为30px 下内边距为40。
  • margin: 20px 30px 40px 50px; 上20px 右30px 下40px 左 50px。

  **注意：

• 垂直方向外边距合并**
  两个盒子垂直一个设置上外边距，一个设置下外边距，取的设置较大的值。
• 嵌套的盒子外边距塌陷
  解决方法: 1 给父盒子设置边框，2 给父盒子overflow:hidden; （推荐使用）。

注意：

• 行内元素可以定义左右的内外边距，上下会被忽略掉，并且行内块可以定义内外边距。
• 行内块可以定义内外边距。
• 浏览器默认文字大小16px。

盒子稳定性

• 只给宽高的盒子（宽/高度剩余法）最稳定。
• 给padding的盒子其次。
• 给margin的盒子一般。

盒子的隐藏问题

• overflow：hidden;隐藏盒子超出的部分。
• display: none;隐藏盒子，而且不占位置。(用的最多)
• visibility: hidden; 隐藏盒子，而且占位置。
• opacity: 0;隐藏盒子，而且占位置。
  -position/top/left/...-999px 隐藏盒子，而且占位置。
• margin也可以隐藏盒子。