CSS基础语法与盒模型-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS基础语法与盒模型。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、CSS介绍

CSS的中文全称是“层叠样式表”(Cascading Style Sheets)。最新版本是CSS3。
CSS的主要功能是用于为HTML和XML等文档添加样式和布局。通过CSS，可以控制网页的外观和格式，如设置文本颜色、背景、字体样式、布局等。
CSS还支持过渡效果、动画、响应式设计和媒体查询等高级特性，使得网页制作更加灵活和可交互。

二、CSS基础语法

1.选择器

标签选择器：通过HTML元素的标签名进行选取，如p、div。
类选择器：通过HTML元素的class属性进行选取，使用.开头，如.container。
ID选择器：通过HTML元素的id属性进行选取，使用#开头，如#header。
属性选择器：通过元素的属性值进行选取，如[type="text"]。
伪类选择器：通过元素的状态或位置进行选取，如:hover、:nth-child(2)。

2.声明块

声明块用于设置选中元素的样式属性和值。声明块由一对大括号{}包围，包含一个或多个属性及其对应的值。
CSS属性由属性名和属性值组成，中间用冒号:分隔，每条声明以分号;结束。常见的CSS属性有：

color：设置文本颜色
background：设置背景颜色或图片
font-size：设置字体大小
border：设置边框样式
margin：设置外边距大小
padding：设置内边距大小
width：设置宽度大小

以下是一个简单的CSS代码示例：

p {
  color: blue;
  font-size: 16px;
}

.container {
  background: #f5f5f5;
  margin: 10px;
  padding: 20px;
}

以上是CSS的基础语法，通过选择器和声明块，你可以对指定的HTML元素应用相应的样式。
注:背诵记忆CSS属性是重中之重

3.伪类和伪元素的区别

选择器表示方式不同：伪类使用单个冒号:来表示，而伪元素使用双冒号::来表示。不过，为了保持向后兼容性，某些旧版本的伪元素依然使用单个冒号。
应用范围不同：伪类选择的是处于特定状态的元素，例如:hover（鼠标悬停）、:active（被点击）等。而伪元素则选择的是元素的特定部分，例如::before（前面添加内容）和::after（后面添加内容）。
是否插入内容：伪类仅用于选择元素，并不能实际插入新的内容。而伪元素可以在选中元素的特定位置插入新的内容或样式，使得开发者能够通过CSS添加额外的元素。
语法上的限制：在使用伪元素时，还需要为其添加content属性来指定要插入的内容。而伪类通常只需要直接用作选择器即可。

4.选择器权重计算

CSS选择器的权重（specificity）用于确定在页面中定义多个相同样式属性的情况下，哪个样式将应用于特定的元素。权重是根据选择器的特性和数量来计算的。

内联样式具有最高的权重，为1000。
ID选择器的权重为100。
类选择器、属性选择器和伪类选择器的权重为10。
标签选择器和伪元素选择器的权重为1。

当应用到一个元素上的多个选择器具有相同的权重时，后面出现的选择器将覆盖先前的选择器。

5.继承性

继承性（inheritance）是CSS中的一个特性，指的是某些属性值能够从父元素继承到子元素。这意味着如果在父元素上设置了某个具有继承性的属性的值，那么子元素将默认继承该属性的值，除非显式地在子元素上重新定义该属性的值。

一些常见的具有继承性的属性包括：

字体相关属性：font、font-size、font-family、font-weight等。
文本相关属性：color、line-height、text-align、text-decoration等。
盒子模型属性：margin、padding等。
表格相关属性：border-collapse、border-spacing等。

然而，并非所有属性都具有继承性。例如，宽度（width）、高度（height）、背景图片（background-image）等属性通常不会被子元素继承。

就近原则（cascading principle）是CSS中指定样式应用优先级的规则。按照就近原则，当同一个元素被多个选择器选中时，其样式将从具有最近位置的选择器那里继承。

具体来说，就近原则可以简化为以下几个层次的优先级：

内联样式的样式表优先级最高，将覆盖其他样式。
ID选择器的样式表优先级次之。
类选择器、属性选择器和伪类选择器的样式表优先级比标签选择器高。
具有相同优先级的多个选择器时，后面出现的选择器将覆盖先前的选择器。

三、盒模型

1.盒模型的基本概念

盒模型是CSS中用于描述和布局HTML元素的基本概念。它将每个HTML元素视为一个矩形的盒子，由四个部分组成：内容区域、内边距、边框和外边距。

具体来说，盒模型包括以下组成部分：

内容区域（Content）：表示元素实际显示内容的区域，它的大小由width和height属性决定。

内边距（Padding）：位于内容区域的周围，用于设置元素内部的空白区域。通过padding属性设置，可以为每个边设置不同的值。

边框（Border）：位于内边距的外部，创建一个可见的边界。可以使用border属性设置边框的样式、颜色和宽度。

外边距（Margin）：位于元素边框之外，用于设置元素与其他元素之间的距离。通过margin属性设置，也可以为每个边设置不同的值。

2.盒模型的布局

内容溢出处理:指当元素的内容超出其指定的尺寸或容器时，如何处理溢出的部分。在CSS中，可以使用一些属性和值来控制内容溢出的处理方式。

以下是常用的内容溢出处理属性：

overflow：该属性用于设置元素的溢出内容处理方式。常见的取值包括：

visible（默认值）：内容超出元素范围时可见。

hidden：超出元素范围的内容被剪切，不可见。

scroll：显示滚动条，以便用户可以查看超出元素范围的内容。

auto：根据需要自动显示滚动条。

text-overflow：该属性用于设置文本内容溢出时的处理方式，仅适用于单行文本。常见的取值包括：

clip（默认值）：将内容截断并隐藏溢出的部分。

ellipsis：使用省略号（…）表示溢出的文本。

如果想区分水平和垂直方向的内容溢出处理，可以使用属性overflow-x和overflow-y来分别控制。比如，可以只在水平方向上显示滚动条，而在垂直方向上则隐藏。

需要注意的是，内容溢出处理通常只应用于具有指定宽度和高度的块级元素，并且要求父容器也有明确的尺寸。

行内块元素和流动性：当需要将块级元素转换为行内块元素时，可以使用CSS的display属性来实现。

将元素转换为行内块元素：使用display属性将元素的display值设置为"inline-block"。

.block-element {
  display: inline-block;
}

这样，该元素就会具有行内块元素的特性，可以在同一行内显示且可以设置宽度、高度等。

2.调整元素的流动性：

浮动元素：使用CSS的float属性，可以将元素设置为浮动。比如，将元素向左浮动可以使用float: left;。

.float-element {
  float: left;
}

清除浮动：如果希望解决由浮动元素引起的父元素高度塌陷问题，可以使用clearfix技巧。创建一个clearfix的CSS类，并将其应用于浮动元素的父元素上。

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.parent-element {
  /* 添加clearfix类 */
  /* 清除浮动元素的影响 */
  /* 防止父元素高度塌陷 */
  overflow: auto;
}

margin的塌陷:在某些情况下，相邻的元素的垂直外边距会合并，导致它们之间的间距比预期的要小或消失。

Margin的塌陷规则主要适用于垂直方向：

上下相邻块级元素的外边距发生塌陷：

当上面的元素没有上边距时，下面的元素的上边距会与上面的元素的下边距合并，取两者中的较大值作为最终的上边距。

当下面的元素没有下边距时，上面的元素的下边距会与下面的元素的上边距合并，取两者中的较大值作为最终的下边距。

如果上面和下面的元素都有边距，则它们不会发生塌陷，边距不会合并。

嵌套块级元素的外边距不会发生塌陷：

对于父子元素，父元素和子元素的外边距不会合并。

如果父元素和子元素的外边距存在重叠问题，可以采用使用padding或border属性来避免。

注:行内元素、浮动元素和绝对定位元素的外边距不会发生塌陷。

为了避免意外的Margin塌陷，可以采用以下方法：

使用padding属性替代外边距。

使用边框（border）或空的块级元素创建一个层以防止Margin塌陷。

使用浮动（float）或者定位（position）属性等来改变元素的布局方式。

实现盒子居中

使用margin属性和auto值实现水平居中：
```
.box {
  margin-left: auto;
  margin-right: auto;
}
```
这将使盒子在水平方向上居中显示。这适用于具有块级属性（display: block）的盒子。
使用flex布局实现居中：
在容器元素上应用flex布局，并使用align-items和justify-content属性来实现水平和垂直居中。
```
.container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}
```
这将使容器内的盒子在水平和垂直方向上均居中。
使用绝对定位实现居中：
在父容器上设置position: relative;，在子盒子上设置position: absolute;和以下样式：
```
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```
这将使用绝对定位和transform属性将子盒子在父容器中居中显示。
使用网格布局实现居中：
将父容器设为网格容器，使用grid布局的place-items: center;属性将盒子在中心定位。
```
.container {
  display: grid;
  place-items: center;
}
```

盒模型的盒子模型类型：内容盒模型（content-box）和边框盒模型（border-box）。

内容盒模型（content-box）：
- 默认的盒子模型类型。
- 宽度和高度仅应用于内容区域。
- 内容区域宽度 = width - 左右内边距 - 左右边框。
- 内容区域高度 = height - 上下内边距 - 上下边框。
- 内容盒模型不包含内边距和边框，它们会增加盒子的总尺寸。
边框盒模型（border-box）：
- 设置盒子模型类型为 border-box，将宽度和高度应用于整个盒子，包括内容区域、内边距和边框。
- 宽度和高度直接指定整个盒子的尺寸，不会减去内边距和边框的大小。
- 内容区域的尺寸会受到内边距和边框的影响，并自动调整以适应设置的总体尺寸。