css 学习笔记

云满笔记

已于 2022-12-01 11:59:15 修改

阅读量263

点赞数

分类专栏： node 文章标签： css margin padding

于 2022-11-30 19:43:12 首次发布

本文链接：https://blog.csdn.net/wan212000/article/details/128120936

版权

25 篇文章 2 订阅

订阅专栏

本文详细介绍了CSS中的盒模型，包括内容(content)、内边距(padding)、边框(border)和外边距(margin)，并提供了示例展示如何使用这些属性改变元素样式。此外，还讨论了选择器优先级的概念，建议避免过度依赖ID选择器以保持样式代码的可维护性。

摘要由CSDN通过智能技术生成

1. css 学习笔记

padding: 内边距
margin: 外边距

元素的盒模型

一个元素的盒模型由四个部分组成 (在矩形图示中, 开发者工具以四种不同的颜色分别表示这四个部分)。

.thumbnail-title {
 display: block; 
 margin: 0;
 padding: 4px 10px;

 background: rgb(96, 125, 139);
 color: rgb(202, 238, 255);
}

display: block 声明更改了所有类名为. thumbnail-title 的元素的盒子, 使这些元素可以占据包含它们的元素的完整宽度。

最好不用 ID 选择器。在文档中, ID 值是唯一的。尽管 ID 选择器优先级最高, 但与其相关的样式难以复用, 进而成为代码维护中的 “最糟实践”。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity

元素之盒子模型

盒子模型就是把HTML中的布局元素看做一个矩形盒子，就是可以盛装内容的容器，标准的盒子模型：

特点：
盒子模型由元素的内容content、边框border、内边距padding、外边距margin组成
盒子模型的厚度我们称为边框
盒子模型的内容与边框的距离为内边距
盒子与盒子之间的距离叫外边距

内容content
内容区域：用来存放文字、图片、标签
内边距 padding
设置内边距：内容与边框的距离
padding-left : 10px
padding-top : 10px
padding-right : 10px
padding-bottom : 10px
padding : 4(上右下左) 3（上左右下） 2（上下左右） 1（上下左右）

当我们给盒子指定padding之后，发生2件事情：
1.盒子变大
2.内容和边框之间有距离了
边框 border
border-width 边框宽度
border-style :solid实线 dashed虚线 dotted点线 none没有边框（边框样式）
border-color : 边框颜色默认颜色为黑色
border : 边框宽度边框样式边框颜色;
外边距 margin
设置外边距：盒子与盒子的距离
margin-left : 10px
margin-top : 10px
margin-right : 10px
margin-bottom : 10px
margin : 4个值(上右下左)
```
           3个值（上   左右    下）

           2个值（上下      左右）

           1个值（上下左右）
```

关注