CSS盒子剖析

在网页制作中，盒子标签的使用无处不在且相当重要，本文将全面的带你认识盒子，了解盒子，运用盒子！

在HTML中，每个元素或者标签都可看作落在一个个盒子中，我将在此介绍：

1. 控制盒子的大小
2. 创建盒子的边框
3. 设置盒子的内外边距
4. 隐藏盒子  显示盒子

多说无益，现在开始

盒子的大小

• width ， height 属性        利用给定的像素控制或者使用百分数控制大小  em值控制（利用盒子内文本为标准，灵活的设计方案，可以用来针对不同的屏幕大小）
• 宽度限制 min-width，max-width      min-height，max-height 属性(可以使页面内容在不同的屏幕大小下不至于过小或过大)
• 超出部分(内容溢出)  overflow hidden/scroll属性（hidden属性将溢出内容直接隐藏/scroll属性在盒子上添加一个滚动条，用来显示溢出的内容）
• 一个常用的居中盒子的方法 margin：0 auto；

创建盒子的边框  设置内外边距

• border  复合属性  1.宽度   2.样式  3.颜色
• border-style   solid 一套直线   dotted  一串方形点   dashed 一条虚线（还有很多，但没用过）
• border-width  不可以使用百分数  可以设置瘦胖或边框上下左右等
• padding 内边距  可以使用像素或em或百分比 其中内边距为其外部的盒子的百分比
• margin 外边距   使用方法同上，如果一个盒子位于另一个盒子的上方 就会出现一个bug，margin重叠  就是较大的外边会生效，小的将被忽略   如果盒子已经指定了宽度  ，外边距就会加到盒子的宽度

隐藏盒子  显示盒子

• 将内联元素于块级元素进行转化 display：inline/block/inline-block/none（行元素/块级元素/兼具两者/完全隐藏）
• 盒子的隐藏 visibility：hidden/visible（隐藏/显示元素）
• 盒子的投影 box-shadow
• 圆角 border-radius（其中50%为圆，也可以用像素）