CSS3常规使用（3）：CSS盒模型

扫描下面的二维码，“关注”我的百家号。

1、处理溢出 overflow

overflow-x 水平溢出
overflow-y 垂直溢出

overflow: auto 浏览器自行处理溢出内容。如果有溢出内容，就显示滚动条。
overflow: hidden 如果有溢出的内容，直接剪掉。
overflow: scroll 不管是否溢出，都会出现滚动条。
overflow: visible 默认值，不管是否溢出，都显示内容。

2、元素可见性 visibility

visibility: visible 默认值，元素在页面上可见。
visibility: hidden 元素不可见，但会占据空间。
visibility: collapse 元素不可见，隐藏表格的行与列，如果不是表格，则和 hidden 一样。

3、元素盒类型

块级元素：就是能够设置元素尺寸、隔离其他元素功能的元素。比如：<div>、<p>等文档元素。

行内元素：不能设置元素尺寸，只能自适应内容、无法隔离其他元素，其它元素会紧跟其后。如：<span>、<b>、<a>等文本元素。

行内-块元素：可以设置元素尺寸，但无法隔离其他元素的元素。比如<img>。

注：可以互换，行内元素添加 display:block; 就可以变成块级元素。

4、display

display: block 盒子为块级元素
display: inline 盒子为行内元素
display: inline-block 盒子为行内-块元素
display: none 盒子不可见，不占位

5、颜色和透明度

opacity 设置元素的透明度，值是 0到1的数，如：

opacity:0.8;

6、盒子阴影和轮廓 box-shadow

box-shadow: 5px 4px 10px 2px gray inset;

水平偏移量，垂直偏移，模糊值，阴影延伸半径，颜色，设成内阴影
前2个参数是必须的，后4个是可选的。

7、以在边框的外围再加一层 outline

outline: 10px double red; 在边框的外围再增加一圈轮廓。

8、光标样式 ：

cursor:pointer; 手形；
cursor:move 十字；
cursor:help 问号