盒子！盒子！盒子！

最新推荐文章于 2019-08-18 22:49:00 发布

weixin_30737433

最新推荐文章于 2019-08-18 22:49:00 发布

阅读量75

点赞数

原文链接：http://www.cnblogs.com/roytanlu/archive/2012/05/05/2485345.html

版权

话说今天终于开始整CSS中的盒子了。抽象的盒子概念如下：
1、最里面的核，也就是内容content，有width、height；
2、环绕着内容的是一个填充的概念，padding，是padding-top、padding-bottom、padding-left、padding-right；
3、padding外面是盒子的边框border，border也有border-top、border-bottom、border-left、border-right，特别的，border除了上下左右以外，还有宽度(border-width)、颜色(border-color)和样式(border-style)，3个主要属性；
4、border外面是盒子和其它盒子的边缘、间隙或者随便叫其它什么，英文意思很明白：margin，有margin-top、margin-bottom、margin-left、margin-right；

<style type="text/css">
div{
    border-width: 8px;/*边框的宽度为8px*/
    border-color: black;/*边框的颜色为黑色*/
    margin: 15px;/*盒子的外围边界为15px*/
    padding: 6px;/*盒子的内部填充为6px*/
    background-color: white;/*背景颜色为白色*/
}
</style>

<body>
    <div style="border-style:solid">示范边框风格（border-style）为：solid</div>
    <div style="border-style:dashed">示范边框风格（border-style）为：dashed</div>
    <div style="border-style:dotted">示范边框风格（border-style）为：dotted</div>
    <div style="border-style:double">示范边框风格（border-style）为：double</div>
    <div style="border-style:groove">示范边框风格（border-style）为：groove</div>
    <div style="border-style:inset">示范边框风格（border-style）为：inset</div>
    <div style="border-style:outset">示范边框风格（border-style）为：outset</div>
    <div style="border-style:ridge">示范边框风格（border-style）为：ridge</div>
</body>

转载于:https://www.cnblogs.com/roytanlu/archive/2012/05/05/2485345.html

weixin_30737433

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子！盒子！盒子！

话说今天终于开始整CSS中的盒子了。抽象的盒子概念如下：1、最里面的核，也就是内容content，有width、height；2、环绕着内容的是一个填充的概念，padding，是padding-top、padding-bottom、padding-left、padding-right；3、padding外面是盒子的边框border，border也有border-top、border-bottom、...
复制链接

扫一扫