CSS基本思想--盒模型

盒子模型

一.盒子的结构

1.外边距(margin)

2.边框(border)

3.内边距(padding)

4.内容区

二. 盒子的设计

1.margin

用法:和padding一样,见下面padding用法详解。

2.border

用法：1.border : 10px solid #f40 ;     2.可以单个设置border的属性：         border-width : 10px 10px 10px 10px ;(可以单独设置上下左右,如border-width-top : 10px ;,用法和padding一样)         border-style :solid ;         border-color : #00f ;

3.padding

用法:1.padding : 100px 100px 100px 100px ;    2.padding-top padding-right padding-bottom padding-left;(可以单个设置)    3.padding : 100px ;(一个值代表四个方向)    4.padding : 100px 100px ;(第一个代表上下方向,第二个代表左右方向)    5.padding : 100px 100px 100px ;( 中间的值代表左右方向)

ps : 1.大部分< body>标签自带默认的 8px的外边距 ;
2.初始化一般为

*{    margin : 0 ;    padding : 0 ;}

便可以去掉标签自带的属性。