EasyDemo*CSS尺寸与框模型(六&&七)

六、尺寸与框模型

1. 尺寸与边框

1.1.1样式单位

*%：百分比

*in:英寸

*cm:厘米

*pt:镑(1pt等于1/72英寸)

*px:像素(计算机屏幕上的一个点)

*em:1em等于当前的字体尺寸

*rgb(x,x,x):RGB值，如rgb(255,0,0)

*rgb(x%,x%,x%):RGB百分比值，如rgb(100%,0%,0%)

*#rrggbb:十六进制，如#ff0000

*#rgb:简写的十六进制，如#f00

*表示颜色的英文单词，如red

1.1.2尺寸

*width&&height

*overflow:当内容溢出元素框时如何处理

-vsisible

-hidden

-scroll

-auto

*案例

<div>

         默认为显示,即使超出尺寸，也显示全部内容

</div><br/><br/>

<div class=””hidden>

         文本内容超出尺寸时，隐藏文本不显示

</div><br/>

<div class=”scroll”>

         总显示滚动条

</div><br/>

<div class=”auto”>

         自动1：不超出不显示

</div><br/>

<div class=”auto”>

         自动2：文本内容超出尺寸时，显示滚动条

</div><br/>

1.1.3边框

*简写方式

-border:width style color;

*单边定义

-border-left/right/top/bottom:width style color;

*border-width

-border-left/right/top/bottom-width

*border-style

-border-left/right/top/bottom-style

*border-color

-border-left/right/top/bottom-color

 

七、框模型

1.1框模型

1.1.1框模型

*框模型(Box Model)：定义了元素框处理元素内容、内边距、边框和外边距的方式

*width和height指内容区域的宽度和高度

*增加内边距、边框、和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸

1.1.2内边距padding

*内边距:内容与框线间的距离

-padding:value

*单边设置

-padding-top/right/bottom/left:value;

*简写方式

-padding:value1 value2 value3 value4;

-                 top   right bottom  left

1.1.3外边距margin

*外边距：与下一个元素间的空间量

-margin:value

*单边设置

-margin-top/right/bottom/left:value;

*简写方式

-margin:value2 value2 value3 value4;

-                 top  right  bottom  left

*margin可取值为auto,由浏览器计算外边距