1.block vs inline vs inline-block

常用的inline元素有：a span img input br select small strong等

常用的block元素有：div p h1-h6 form table ul ol等

三者的区别比较：
display:block

  • 独占一行，多个block元素各自新起一行
  • 可以设置width, height属性。宽度默认为父元素宽度，高度默认为内容高度
  • 可以设置margin, padding属性

display:inline

  • 多个相邻元素排列在同一行，直到一行排不下，会换到下一行
  • 设置width, height无效。宽度随内容变化，高度默认为一行
  • 设置margin,padding水平方向有效，垂直方向无效

display:inline-block

将对象呈递为inline，但是对象的内容作为block呈递

  • 多个相邻元素排列在同一行，直到一行排不下，会换到下一行
  • 可以设置width, height属性
  • 可以设置margin, padding属性

2.box-sizing

box-sizing是CSS3属性，其值有三个选择content-box|border-box|inherit

值 描述
content-box(默认值) Width and height values apply to the element’s content only. The padding and border are added to the outside of the box.
padding-box Width and height values apply to the element’s content and its padding. The border is added to the outside of the box. Currently
border-box Width and height values apply to the content, padding, and border.
inherit inherits the box sizing of the parent element.

[兼容性]

ie8+浏览器支持content-box和border-box；

ff则支持全部三个值。

[参考]
CSS-Tricks: box-sizing

3.box-shadow

box-shadow是CSS3属性

1
box-shadow: 3px 3px 5px 6px #ccc;

以上5个参数依次为：水平偏移，垂直偏移，模糊半径（可选参数），传播半径
（可选参数）,阴影颜色

利用box-shadow属性可以实现多边框效果，效果图如下：

1
2
3
4
5
box-shadow: 0 2px 2px #616161,
    0 0 0 20px #cecece,
    0 0 0 24px #fff,
    0 0 0 28px #666,
    inset 0 50px 0 rgba(255,255,255,.2);