CSS基础03

文章目录

• • 盒子模型（Box Model）
  • 盒子边框（border）
  • 外边距（margin）
  • 盒子阴影

盒子模型（Box Model）

所谓盒子模型：

    就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

   CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括： 外边距（ margin ）、边框 （ border ）、内边距（ padding ）、实际内容（ content ）四个属性。

盒子边框（border）

border-width  定义边框粗细，单位是px

border-style  边框的样式

border-color  边框颜色

外边距（margin）

margin 属性用于设置外边距。 设置外边距会在元素之间创建 “ 空白 ” ， 这段空白通常不能放置其他内容。

margin-top: 上外边距

margin-right: 右外边距

margin-bottom: 下外边距

margin-left: 上外边距

margin: 上外边距 右外边距 下外边距 左外边

取值顺序跟内边距相同

盒子阴影

默认是外阴影 (outset) ，不用设置， 想要内阴影设为 inset