CSS基础语法与盒模型

一、CSS介绍

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

二、CSS基础语法

1.选择器

  • 标签选择器:通过HTML元素的标签名进行选取,如pdiv

  • 类选择器:通过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)可以更方便地控制元素的尺寸,特别是在响应式设计和布局中更加灵活。它能更好地管理内容、内边距和边框所占据的空间,简化了盒子尺寸的计算和调整过程。

你可能感兴趣的:(前端,css,前端)