CSS页面布局基础1

CSS页面布局基础

CSS盒模型——定义：

                      每个元素（不管事块级元素还是内联元素）都会产生一个矩形盒子围绕在元素内容之外，这个盒子

                                        就称为元素盒，下面这个图就显示了所定义的所有区域和边界               

外边距margin——形式如下：

                       margin-top | right |bottom | left | auto

                       其特点为：1、外边距总是透明的 

                                                            2、元素属性值可以有负外边距

                                                            3、相邻块级元素的垂直（top和bottom）外边距将会重合，即相邻的两个块级元素

                                                                   之间的空白将会是两个元素的外边距中较大那一个

内边距——形式如下：

                    padding-top | right | bottom | left | auto

                     其特点：1、不允许属性值为负值

                                            2、如果父级元素的宽度改变了，所有的子级元素的padding值也会改变

                                            3、元素的背景色和背景图像在padding区可以显示

                                            4、可以用来在盒子边缘以及内容之间放置一些空白

                                            5、padding是不会重合的

边框border——形式如下：

                   border-top( right | bottom | left )-style

                   border-color 属性用来显示盒模型边框颜色

                    其特点为： 1、  边框画在元素的背景之上

                                2、非可替代内嵌元素（文本元素）的边框对于该元素所在的行高没有影响

                                                       3、可替代元素的边框将影响行高

                   它有九种边框样式，如下面这张图片：