box盒子属性摘要

padding属性：

在一个声明中设置所有内边距属性。

可能的值：

auto	浏览器计算内边距。
length	规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的内边距。
inherit	规定应该从父元素继承内边距。

注：不允许使用负值。

例1：

padding:10px 5px 15px 20px;

 显示结果：

      上内边距：10px，

      右内边距： 5px，

      下内边距：15px，

      左内边距：20px，

注：padding设置四个值时，分别为上右下左的内边距。

例2：

padding:10px 5px 15px;

       上内边距：10px,

 

       右内边距和左内边距：5px,

       上内边距：15px,

注：padding设置三个值时，分别为上（左右）下的内边距。

例3.

padding:10px 5px;

       上内边距和下内边距：10px,

 

       右内边距和左内边距：5px,

注：padding设置二个值时，分别为（上下）（左右）的内边距。

例4.

padding:10px;

         上下左右内边距为：10px, 

 

注：padding设置一个值时，为上下左右的内边距，且相等。

例5.

h1 {padding: 10px 0.25em 2ex 20%;}

注：可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值。

 

单边内边距属性：

通过使用下面四个单独的属性，分别设置上、右、下、左内边距：

     padding-top:,

     padding-right:,    

     padding-bottom:,

     padding-left:,

注：其值也可以使用不同的单位或百分比值。

内边距的百分比数值：是相对于其父元素的 width 计算的

例6：

p {padding: 10% auto;}

 

<div style="width: 200px;height:100px">
<p>lish sui  kiing hbons aiea alis</p>
</div> 

 注：段落P的内边距是根据其父类div的width计算,并且左右内边距相等。

 

 margin属性

在一个声明中设置所有外边距属性，与padding用法几乎相似。

 

CSS 定义了一些规则，允许为外（内）边距指定少于 4 个值。规则如下：

    如果缺少左边的边距值，则使用右边的边距值代替。

    如果缺少下边的边距值，则使用上边的边距值代替。

    如果缺少右边的边距值，则使用上边的边距值代替。

box-sizing 属性用来改变默认的 css盒模型对元素宽高的计算方式。

 

/*关键字*/
box-sizing:content-box;
box-sizing:border-box;

 content-box：

 

width和height都等于内容高度，不包括边框和内边距。

border-box:

width=内容宽度+border+padding.

height=内容高度+border+padding.

box-show： 描述一个或者多个阴影效果。

语法：

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

 offset-x:是阴影水平偏移量，如果是负值，则阴影位于元素的左边。

offset-y:是阴影垂直偏移量，如果是负值，则阴影位于元素的上边。

blur-radius:是阴影的模糊程度，值越大模糊面积越大，阴影越淡。默认为0，没有负值。

spread-radius:阴影的扩大和收缩，正值扩大，负值收缩。

color：隐形颜色。rgba(red,green,blue,透明度)。

注：如果box元素设置了border-radius,阴影也会有圆角效果。

min-width,min-height:,max-width,max-height.

设置BOX元素的最小高宽，最大高宽。

overflow

规定当元素溢出元素框是如何处理

默认值是：visible,溢出不会处理，呈现在框外。

hidden,溢出的其余内容不可见。内容被修剪。

scroll,溢出会出现滚动条。

auto,浏览器自己判断，如果被裁剪，会出现滚动条。

inherit,继承父类。