CSS盒子模型

来源:互联网 发布:jsp写java方法 编辑:程序博客网 时间:2024/06/05 17:23

盒子模型

margin: 外边距

margin-topmargin-rightmargin-bottommargin-left

使用方式:

(1)margin30px;表示上下左右外边距都留白30px

(2)margin-left30px;单独设置上下左右外边距

(3)margin10px 20px 30px 40px;分别设置上下左右四个外边距为10px 20px 30px 40px

<styletype="text/css">
    div{
        width: 200px;
        height: 200px;
        background-color:maroon;
        margin: 10px 20px30px40px;
    }
</style>

 

padding:内边距

也有上下左右边距,和margin类似。


border:边框

solid 实线

double 双实线

dotted 点虚线

dashed 虚线

border-width 边框宽度

border-style  边框样式

border-color  边框颜色

word中设置边框的操作

也可以使用更优化的书写方式

border10px dashed blue


outline: 轮廓线