上面这样的设置 div 在页面中实际站位是 104px，如果不注意很容易造成页面错乱。这是因为我们大部分情况下盒模型使用的是 W3C 标准的’box-sizing: content-box’，它在页面中实际宽度 = width+border( 该公式仅针对上面例子）。

border-image-source背景图片源

border-image-slice需要展示出来图片的尺寸，如果这个量等于图片的尺寸就都相当于整个图片展示出来

border-image-width图片边框的宽度。

border-image-outset边框图像区域超出边框的量。

border-image-repeat图片的填充形式

这个属性的兼容性不是很好，所以在正常的前端开发工作中很难用到，但是在不考虑兼容性的情况下，它无疑的一个很强大的属性，因为它可以自定义漂亮的边框，而不在是单调的线条。

这个属性使用并不太难，不过其中的border-image-slice属性在使用的时候有一个小技巧，就是当想要其中 image 不失真即不拉伸，slice 要和 width 一样。

例如：

.demo{border-width:20pxborder-image-slice:20}

.demo2{

    width: 100px

    height: 100px

    background: #ccc

    border-width: 20px

    border-style: solid

    border-image-source: url(./../img/border-image.jpg)

    border-image-slice:20

    border-image-outset:22px

    border-image-repeat: repeat

}

order-image 使用时候一定要设定 border-style 虽然这个属性没什么用，但是如果不设定它 border-image 就不生效。

border-image-slice 如果设定数值当 px 用时候直接写数字就可以 如果加上 px 反而会不生效。

border-width 用来设定边框的宽度，它决定图片边框展示的厚度(即围绕宽度)。

不要让 border-radius 的 % 值大于 50，因为如果两个相邻的半径和超过了对应的盒子的边的长度，那么浏览器要重新计算以保证它们不重合。虽然表面上看没有问题但是这样会对性能有影响。

如果用 rem、em 单位在移动端用border-radius 画圆，在部分机型里面是椭圆的问题，可以通过 50% 来解决 ，或者使用 px 配合缩放 scale 来实现 rem 单位的效果。

在内联元素span这类标签使用这个属性的时候同样有效但是记得不要使用%这样会导致一些span 标签的圆角不一样因为 % 是参考长和宽计算的。

border-radius 圆角并不会隐藏标签内部元素的内容，如果有内容溢出的情况记得增加overflow:hidden

任何元素都可以使用这个属性,包括视频、音频标签等。

一般情况下不推荐 border-top-left-radius 这类的写法除非是需要在某种交互过程中需要改变其中一个的圆角值而其它的保持不变。因为这类的标签会影响浏览器渲染的性能。

使用这个属性可以让页面更有立体感，给元素添加一个阴影，使得元素看起来是悬浮在原来的位置，下面就看看它的用法吧。

效果如下图

它主要用来告诉浏览器怎么计算元素的展示宽高的。

推荐大家设置 box-sizing 为border-box 这样方便我们写样式不必在去减去 padding 也不会造成 IE 和 Chorme 这类浏览器展示不同的 bug 。如果不设置 box-sizing 不同浏览器会有不同的计算方式。

1）class是设置标签的类，用于指定元素属于何种样式的类。在CSS样式中以小写的“点”及“.”来命名，在html页面里则以class="css5" 来选择调用，命名好的CSS又叫css选择器。

如： .css5{属性：属性值} 选择器在html调用为“<div class="css5">我是class例子</div>

.baobao { color: limebackground: #ff80c0 }

使用方法：class="baobao"

2）id是设置标签的标识。用于定义一个元素的独特的样式。在CSS样式定义的时候 以“#”来开头命名id名称

如一个CSS规则：

　#binbin { font-size: larger }

使用方法：id="binbin"

id是一个标签，用于区分不同的结构和内容，就象你的名字，如果一个屋子有2个人同名，就会出现混淆；

3）css里的id用法与class用法一样，只是把class换成id。如例子：

在CSS样式定义ID

#css5 {height:25pxwidth: 200px}

调用ID ：

<div id="css5">我是ID例子</div>

class是一个样式，可以套在任何结构和内容上，就象一件衣服。

4）概念上说就是不一样

id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。

（1）

一个class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的比方就是剧本：一个class可以定义剧本中每个人物的故事线，你可

以通过cSS，javascript等来使用这个类。因此你可以在一个页面上使用class="Frodo" ，class= "Gandalf"，

class="Aragorn"来区分不同的故事线。还有一点非常重要的是你可以在一个文档中使用任意次数的class。

（2） id 通

常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时（比如说通常一个页面都是由一个页眉，一个报头<

masthead>，一个内容区域和一个页脚等组成），一般使用ID比较理想，因为一个ID在一个文档中只能被使用一次。而这些元素在同一页面中很

少会出现大于一次的情况。

归纳成一句话就是：class可以反复使用而id在一个页面中仅能被使用一次。

有可能在很大部分浏览器中反复使用同一个id不会出现问题，但在标准上这绝对是错误的使用，而且很可能导致某些浏览器的现实问题。

在实际应用的时候，class可能对文字的排版等比较有用，而id则对宏观布局和设计放置各种元素较有用。<<id具有唯一性，而class是一个类，适用于可多次重复使用的容器>>

FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中

FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width

FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式

div 的垂直居中问题: vertical-align:middle将行距增加到和整个DIV一样高 line-height:200px然后插入文字，就垂直居中了。缺点是要控制内容不要换行

cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格XHTML+CSS兼容性解决方案小集

使用XHTML+CSS构架好处不少，但也确实存在一些问题，不论是因为使用不熟练还是思路不清晰，我就先把一些我遇到的问题写在下面。

1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：

div{margin:30px!importantmargin:28px}

注意这两个margin的顺序一定不能写反，!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：

div{maring:30pxmargin:28px}

重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important

2.IE5 和IE6的BOX解释不一致IE5下div{width:300pxmargin:0 10px 0 10px}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则 是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改：

div{width:300px!importantwidth /**/:340pxmargin:0 10px 0 10px}

关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）

3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义

ul{margin:0padding:0}

就能解决大部分问题