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元素视为一个矩形的盒子，由四个部分组成：内容区域、内边距、边框和外边距。

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

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

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

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

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

2.盒模型的布局

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

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

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

   • visible（默认值）：内容超出元素范围时可见。
   • hidden：超出元素范围的内容被剪切，不可见。
   • scroll：显示滚动条，以便用户可以查看超出元素范围的内容。
   • auto：根据需要自动显示滚动条。

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

   • clip（默认值）：将内容截断并隐藏溢出的部分。
   • ellipsis：使用省略号（…）表示溢出的文本。

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

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

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

1. 将元素转换为行内块元素：使用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的塌陷规则主要适用于垂直方向：

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

   • 当上面的元素没有上边距时，下面的元素的上边距会与上面的元素的下边距合并，取两者中的较大值作为最终的上边距。
   • 当下面的元素没有下边距时，上面的元素的下边距会与下面的元素的上边距合并，取两者中的较大值作为最终的下边距。
   • 如果上面和下面的元素都有边距，则它们不会发生塌陷，边距不会合并。

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

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

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

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

• 使用padding属性替代外边距。
• 使用边框（border）或空的块级元素创建一个层以防止Margin塌陷。
• 使用浮动（float）或者定位（position）属性等来改变元素的布局方式。

• 实现盒子居中

1. 使用margin属性和auto值实现水平居中：

   .box {
     margin-left: auto;
     margin-right: auto;
   }
   

   这将使盒子在水平方向上居中显示。这适用于具有块级属性（display: block）的盒子。

2. 使用flex布局实现居中：
   在容器元素上应用flex布局，并使用align-items和justify-content属性来实现水平和垂直居中。

   .container {
     display: flex;
     align-items: center; /* 垂直居中 */
     justify-content: center; /* 水平居中 */
   }
   

   这将使容器内的盒子在水平和垂直方向上均居中。

3. 使用绝对定位实现居中：
   在父容器上设置position: relative;，在子盒子上设置position: absolute;和以下样式：

   .parent {
     position: relative;
   }
   .child {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
   }
   

   这将使用绝对定位和transform属性将子盒子在父容器中居中显示。

4. 使用网格布局实现居中：
   将父容器设为网格容器，使用grid布局的place-items: center;属性将盒子在中心定位。

   .container {
     display: grid;
     place-items: center;
   }
   

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

1. 内容盒模型（content-box）：

   • 默认的盒子模型类型。
   • 宽度和高度仅应用于内容区域。
   • 内容区域宽度 = width - 左右内边距 - 左右边框。
   • 内容区域高度 = height - 上下内边距 - 上下边框。
   • 内容盒模型不包含内边距和边框，它们会增加盒子的总尺寸。

2. 边框盒模型（border-box）：

   • 设置盒子模型类型为 border-box，将宽度和高度应用于整个盒子，包括内容区域、内边距和边框。
   • 宽度和高度直接指定整个盒子的尺寸，不会减去内边距和边框的大小。
   • 内容区域的尺寸会受到内边距和边框的影响，并自动调整以适应设置的总体尺寸。

为了使用边框盒模型（border-box），可以在 CSS 中使用 box-sizing 属性进行设置。

.box {
  box-sizing: border-box;
}

使用边框盒模型（border-box）可以更方便地控制元素的尺寸，特别是在响应式设计和布局中更加灵活。它能更好地管理内容、内边距和边框所占据的空间，简化了盒子尺寸的计算和调整过程。