WEB前端学习:CSS学习_CSS盒子模型
CSS盒子模型
文章目录
- CSS盒子模型
- 盒子模型
- 一、主要属性
- 1.外边距（margin）
- 2.边框（border）
- 2.1、border-width（简写属性）：边框的宽度
- 2.2、border-top：边框顶部
- 2.3、border-bottom：边框底部
- 2.4、border-right：边框右边
- 2.5、border-left：边框左边
- 2.6、border-style：边框的样式
- 2.7、border-color：边框的颜色
- 2.8、border-shadow：边框阴影
- 2.9、border-radius（简写属性）：边框圆角
- 2.10、border-image：边框图片
- 2.11、border（简写属性）
- 3.内边距（padding）
- 4.宽度（width）
- 5.高度（height）
- 持续更新...
该篇为讲得是 CSS 盒子模型。盒子模型是当前浏览器对一个文档进行布局渲染的一种标准
盒子模型
可以将所有的HTML元素看作一个盒子，这个盒子有
内容（content），内边距（padding），边框（border），外边距（margin）
可以将这个盒子看作一个装有笔记本的纸盒。
那么内容就相当于纸盒中的笔记本，内边距相当于笔记本到纸盒内壁的距离，边框就相当于纸盒，外边距相当于纸盒外面的物品到纸盒外壁的距离
内边距，边框和外边距都有四个部分分别为
顶部（top），右边（right），底部（bottom）还有左边（left）
一、主要属性
1.外边距（margin）
相当于盒子外面物体到纸盒外壁的距离，不在盒子内部
| 属性名 | 意义 |
|---|---|
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
| margin-right | 右外边距 |
| margin-left | 左外边距 |
1.1、margin（简写属性）
可以同时给四边赋值
| 赋值个数 | 意义 |
|---|---|
| 只赋一个值 | 四边同宽 |
| 只赋两个值 | 第一个代表上下外边距的值，第二个值代表左右外边距的值（上下同宽，左右同宽） |
| 同时赋四个值 | 按照 top，right，bottom，left 进行赋值 |
2.边框（border）
假设这个盒子是个纸盒，边框就是纸盒本身
2.1、border-width（简写属性）：边框的宽度
| 赋值个数 | 意义 |
|---|---|
| 只赋一个值 | 四边同宽 |
| 只赋两个值 | 第一个代表上下边框的值，第二个值代表左右边框的值（上下同宽，左右同宽） |
| 同时赋四个值 | 按照 top，right，bottom，left 进行赋值 |
2.2、border-top：边框顶部
- border-top-width：边框顶部的宽度
- border-top-style：边框顶部的样式
- border-top-color：边框顶部的颜色
2.3、border-bottom：边框底部
- border-bottom-width：边框底部的宽度
- border-bottom-style：边框底部的样式
- border-bottom-color：边框底部的颜色
2.4、border-right：边框右边
- border-right-width：边框右边的宽度
- border-right-style：边框右边的样式
- border-right-color：边框右边的颜色
2.5、border-left：边框左边
- border-left-width：边框左边的宽度
- border-left-style：边框左边的样式
- border-left-color：边框左边的颜色
2.6、border-style：边框的样式
| 值 | 作用 |
|---|---|
| dotted | 定义一个点线边框 |
| dashed | 定义一个虚线边框 |
| solid | 定义实线边框 |
| double | 定义两个边框两个边框的宽度和 border-width 的值相同 |
| groove | 定义3D沟槽边框效果取决于边框的颜色值 |
| ridge | 定义3D脊边框效果取决于边框的颜色值 |
| inset | 定义一个3D的嵌入边框效果取决于边框的颜色值 |
| outset | 定义一个3D突出边框效果取决于边框的颜色值 |
2.7、border-color：边框的颜色
2.8、border-shadow：边框阴影
2.9、border-radius（简写属性）：边框圆角
| 赋值个数 | 意义 |
|---|---|
| 只赋一个值 | 四个圆角值相同 |
| 只赋两个值 | 第一个值为左上角与右下角，第二个值为右上角与左下角 |
| 只赋三个值 | 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角 |
| 赋四个值 | 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角 |
| 属性名 | 意义 |
|---|---|
| border-top-left-radius | 设置边框左上角的圆角效果 |
| border-top-right-radius | 设置边框右上角的圆角效果 |
| border-bottom-right-radius | 设置边框右下角的圆角效果 |
| border-bottom-left-radius | 设置边框左下角的圆角效果 |
2.10、border-image：边框图片
| 属性名 | 意义 |
|---|---|
| border-image-source | 用于指定要用于绘制边框的图像的位置 |
| border-image-slice | 图像边界向内偏移 |
| border-image-width | 图像边界的宽度 |
| border-image-outset | 用于指定在边框外部绘制 border-image-area 的量 |
| border-image-repeat | 用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round） |
2.11、border（简写属性）
可以同时设置边框的宽度，样式，颜色
3.内边距（padding）
内边距相当于盒子内壁与笔记本之间的距离
| 属性名 | 意义 |
|---|---|
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
| padding-right | 右内边距 |
| padding-left | 左内边距 |
| 赋值个数 | 意义 |
|---|---|
| 只赋一个值 | 四边同宽 |
| 只赋两个值 | 第一个代表上下内距的值，第二个值代表左右内边距的值（上下同宽，左右同宽） |
| 同时赋四个值 | 按照 top，right，bottom，left 进行赋值 |
4.宽度（width）
元素的高度
5.高度（height）
元素的宽度
6.box-sizing
定义浏览器如何来计算一个元素的高度和宽度
tips：默认设置为 content-box
- content-box：只计算内容（content）的高度（height）和宽度（width）
- border-box：计算边框（border），内边距（padding）和内容（content）的高度（height）和宽度（width）
持续更新…
该篇主要讲的是 CSS盒子模型。
最后，若有不足或者不正之处，欢迎指正批评，感激不尽！如果有疑问欢迎留言。
往期博客
下面这些是我学习CSS的网站，希望对大家有帮助
- CSS Reference(https://cssreference.io/)
- MDN(https://developer.mozilla.org/zh-CN/docs/Web/CSS)
- 菜鸟教程(https://www.runoob.com/css/css-tutorial.html)