【前端】css笔记（6）

目录：

盒子模型

border-style属性

 border-width 属性

border-color 属性

单独设置边框各边

边框-简写属性

outline 属性：

轮廓的样式

 轮廓的颜色

轮廓的宽度

---

盒子模型

• Margin（外边距） - 清除边框区域。Margin 没有背景颜色，它是完全透明
• Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
• Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响
• Content（内容） - 盒子的内容，显示文本和图像

<style>
    div.ex
    {
    width:220px;
    padding:10px;
    border:5px solid gray;
    margin:0px;
    }
</style>
    <div class="ex">上面的图片是250像素宽。这个元素的总宽度也是250px。</div>

ps：

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

---

border-style属性

用来定义边框的样式（列举）：

none: 默认无边框

dotted: 定义一个点线框

dashed: 定义一个虚线框

solid: 定义实线边界

double: 定义两个边界。 两个边界的宽度和border-width的值相同

groove: 定义3D沟槽边界。效果取决于边界的颜色值

ridge: 定义3D脊边界。效果取决于边界的颜色值

inset:定义一个3D的嵌入边框。效果取决于边界的颜色值

outset: 定义一个3D突出边框。 效果取决于边界的颜色值

<style>
    p.none {border-style:none;}
    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;}
    p.hidden {border-style:hidden;}
</style>

---

 border-width 属性

为边框指定宽度（"border-width" 属性如果单独使用则不起作用