CSS基础（三）基础框模型

CSS 框模型概述

由图可知一般框模型由四个元素构成由外到内是：margin（外边距），border（边框），padding（内边距），element（元素）

一.外边距

看例子：h1{margin:10px 1in 50% 2em}

从左到右margin的值代表距离上边10像素，距离右边1英寸，距离下边为其父类width值的50%，距离左边2个字体长度

也可以设置为auto。

要对每一个单边的外边距设置样式，则可以使用margin-top,margin-right,margin-bottom,margin-left.

二.边框

边框属性：border-style

常用的

<style type="text/css">
p.dotted {border-style: dotted}
p.dashed {border-style: dashed}
p.solid {border-style: solid}
p.double {border-style: double}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}
</style>

效果可以测试。

也可以同时定义很多的样式p{border-style:dotted dashed solid inset}从左到右分别代表上边框，右边框，下边框，左边框

如果想对单个的边设置边框样式，可以使用border-top-style，border-right-style,border-bottom-style,border-left-style来设置上边右边下边和左边的边框

三.内边框

和外边框基本相似；

四.外边距合并

当两个垂直的边框碰到一起时，外边距会合并成一个边距，边距值取两个边框中最大的那个