css 知识点

选择器

1.标签选择器
通过标签的名字命名

body{
color:red
}

2.id选择器
标签中的id属性，通常应用于某些标签中独有的样式

#one{
color:red
}

3.类选择器
标签中的class属性
通常应用于某几个标签具有相同的样式

.pink{
color:pink
}

4.全选择器
使用*号来表示对整个html中所有标签都起作用

*{
font-size:36px
}
 

盒子模型

元素的总高度和元素的宽度计算如下：

总高度：高度 + 上下内边距 + 上下边框 + 上下边距。

总宽度：宽度+左右内边距+左右边框+左右外边距。

CSS box-sizing 属性：

元素的总高度和总宽度由称为 box-sizing 的 CSS 属性定义。CSS 属性 box-sizing 定义元素的总高度和宽度。

box-sizing 的默认值为 content-box。

简单来说，这意味着边距、边框和填充将添加到使用 width 和 height 属性指定的总高度和宽度中。

此外，添加边距、内边距和边框不会减小内容区域的总大小。

box-sizing 还有另一个值，称为border-box。

设置时会减小内容区域的大小。或者换句话说，当向元素添加边距、内边距和边框时，元素的总高度和总宽度不会增加。

内容：

这是 CSS 盒子模型的主要元素。简单来说，它就像一个显示文本、图像、视频等的框，通过使用宽度和高度等属性来调整大小。内容区包含元素的主要内容。内容包括文本、图像或视频。

填充：

填充在其边界内围绕元素创建空间。

使用属性在 HTML 元素上设置填充。

a) 内边距：2px；// 2px 填充所有边

b) 内边距：2px 3px；//上下2px，左右3px

c) 内边距：2px 3px 4px；// 顶部2px，左右3px，底部4px

d) 内边距：2px 3px 4px5px ；// 顶部 2px，右侧 3px，底部 4px，左侧 5px

或使用单独的 CSS 属性。

填充左：填充顶部：填充右：填充底部：

边框：

边框在元素周围创建分隔线或空间，标记元素的结束。填充和内容包含在其中。边框可根据要求定制。

您可以使用 CSS 属性边框为例，通过“border: 1px solid green”来更改边框的大小、样式、颜色和宽度。

而 1px 是大小，solid 是样式，green 是边框的颜色。

其他各种 CSS 属性可以应用于边框。这些属性包括但不限于边界半径等。

边距：

边距是元素边界之外的空间。它在相邻元素之间创建了一个空间。边距大小由简写属性 margin 或单独的属性决定，例如 margin-top、margin-bottom、margin-left、margin-bottom。这些 CSS 属性的工作方式与填充大小属性的工作方式类似。