CSS 盒子模型.pdf

CSS 盒子模型 CSS 盒子模型，也称为框模型，是一种将 HTML 元素表示为一个矩形区域的模型。这个模型由多个部分组成，包括元素内容、内边距、边框、外边距等。 一、什么是盒子模型？ CSS 盒子模型是将 HTML 元素表示为一个矩形区域的模型。盒子的最内部是元素的实际内容，即元素内容，紧挨着元素框外部的是内边距，其次是边框，然后最外层是外边距，这些部分共同组成了盒子模型。 二、边框 border-color 属性 border-color 属性用于设置边框的颜色，可以单独设置每个边框的颜色，也可以设置四个边框的统一颜色。 * border-top-color: 上边框颜色 * border-right-color: 右边框颜色 * border-bottom-color: 下边框颜色 * border-left-color: 左边框颜色 * border-color: 四个边框统一颜色 例如： ```css border-top-color: #369; border-right-color: #369; border-bottom-color: #fae45b; border-left-color: #efcd56; ``` 三、边框粗细 border-width 属性 border-width 属性用于设置边框的粗细，可以单独设置每个边框的粗细，也可以设置四个边框的统一粗细。 * border-top-width: 上边框粗细 * border-right-width: 右边框粗细 * border-bottom-width: 下边框粗细 * border-left-width: 左边框粗细 * border-width: 四个边框统一粗细 例如： ```css border-top-width: 5px; border-right-width: 10px; border-bottom-width: 8px; border-left-width: 22px; ``` 四、边框样式 border-style 属性 border-style 属性用于设置边框的样式，可以单独设置每个边框的样式，也可以设置四个边框的统一样式。 * border-top-style: 上边框样式 * border-right-style: 右边框样式 * border-bottom-style: 下边框样式 * border-left-style: 左边框样式 * border-style: 四个边框统一样式 例如： ```css border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; ``` 五、外边距 margin 属性 margin 属性用于设置元素的外边距，可以单独设置每个边框的外边距，也可以设置四个边框的统一外边距。 * margin-top: 上边距 * margin-right: 右边距 * margin-bottom: 下边距 * margin-left: 左边距 * margin: 四个边框统一外边距 例如： ```css margin-top: 1px; margin-right: 2px; margin-bottom: 2px; margin-left: 1px; ``` 六、内边距 padding 属性 padding 属性用于设置元素的内边距，可以单独设置每个边框的内边距，也可以设置四个边框的统一内边距。 * padding-top: 上内边距 * padding-right: 右内边距 * padding-bottom: 下内边距 * padding-left: 左内边距 * padding: 四个边框统一内边距 例如： ```css padding-top: 10px; padding-right: 5px; padding-bottom: 8px; padding-left: 10px; ``` 七、圆角边框 border-radius 属性 border-radius 属性用于设置元素的圆角边框，可以设置四个边框的圆角半径。 例如： ```css border-radius: 20px 10px 50px 30px; ``` 八、圆形边框 可以使用 border-radius 属性制作圆形边框，需要元素的宽度和高度相同，并将圆角半径设置为元素宽度的一半。 例如： ```css div { width: 100px; height: 100px; border: 4px solid red; border-radius: 50%; } ``` 九、盒子阴影 box-shadow 属性 box-shadow 属性用于设置元素的阴影，可以设置阴影的颜色、大小和位置。 例如： ```css box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); ``` CSS 盒子模型是将 HTML 元素表示为一个矩形区域的模型，由多个部分组成，包括元素内容、内边距、边框、外边距等。了解盒子模型的各个部分和属性，可以更好地控制元素的样式和布局。