第十一章:Div盒子模型

盒子模型概念

宽度=盒子模型设置的宽度

+左内边距+右内边距+左边框线

+右边框线+左外边距+右外边距

 

一、盒子模型内边距

1、padding-top 上面(顶部)内边距

padding-top:20px;  或  padding-top：10%;（值大小:元素宽度*10%）

2、padding-right  右边内边距

同上

3、padding-bottom   下面(底部)内边距

同上

4、padding-left左边内边距

同上

 

(1）、paddding 四个值

padding:上  右  下  左;   padding:3px 6px 10px 20px;

(2）、padding 三个值

padding:上  左右  下;padding:3px 10px 5px;

(3）、padding  两个值

padding:上下  左右;padding:3px 10px;

(4)、padding  一个值   

padding:上下左右;padding:3px;

 

二、盒子模型外边距

1、margin-top 上面(顶部)内边距

2、margin-right  右边内边距

3、margin-bottom   下面(底部)内边距

4、margin-left左边内边距

5、margin简写属性。作用是在一个声明中设置元素的所内边距属性。

 

(1）、margin  四个值

margin:上  右  下  左;   margin:3px 6px 10px 20px;

(2）、margin 三个值

margin:上  左右  下;margin:3px 10px 5px;

(3）、margin  两个值

margin:上下  左右;margin:3px 10px;

(4)、margin  一个值   

margin:上下左右;margin:3px;

 

三、边框线（border）

（一）、三要素

  边框线大小    边框线风格   边框线颜色   

（二）、边框样式值

1、none  无边框   border:none;

2、solid  实线

3、dashed  虚线

4、dotted 点状 

5、double  双线

6、groove  3D 凹槽边框

7、ridge   3D 垄状边框

8、inset  3D inset 边框

9、outset  3D outset 边框

 

（三）、边框线颜色

1、十六进制颜色值 #CC00FF

2、英文单词中的颜色red blue 

 

（四）、单独定义某个边框线样式

1、border-top  顶部(上)边框线    border-top:1px solid #CC00FF;

2、border-right  右边框线样式border-right:5px solid red;

3、border-bottom底边框线样式border-bottom:10px dotted  #660033

4、border-left左边框线样式border-left:15px double blue;

 

JAVA技术交流群 532101200