笔记大全

你必须了解后端也得会的两万字CSS技术

更新时间：2024-01-01

关于全栈程序员需要掌握的两万字CSS技术

在当今互联网时代，全栈程序员不仅要求能够熟练掌握多种编程语言和框架，同时也需要具备良好的前端开发能力。其中，CSS技术作为前端重要的一环，更是全栈程序员必备的技能之一。下面，我将从CSS的基本概念、盒模型、选择器以及布局等方面，为大家讲解掌握CSS的必备技能。

一、CSS 基本概念

CSS（Cascading Style Sheets）级联样式表，是用来为HTML（或XML）文档添加样式的语言，可以控制一个HTML元素在页面中的表现方式，包括布局、颜色、字体、大小等。在HTML文档中，可以使用<style>标签或外部样式表的方式来引入CSS代码。

      /* CSS代码示例 */
      h1 {
        color: red;
        font-size: 24px;
      }

      .class1 {
        background-color: #ccc;
        padding: 10px;
        margin: 20px;
      }

      #id1 {
        border: 1px solid blue;
      }

上述示例代码中，CSS选择器包括元素选择器（h1）、类选择器（.class1）和 ID选择器（#id1）。CSS属性包括颜色（color）、字体大小（font-size）、背景色（background-color）、内边距（padding）、外边距（margin）等。

二、CSS 盒模型

CSS盒模型指的是为页面中的元素划分出一个矩形的盒子，包含内容区域、内边距、边框和外边距。在CSS中，可以使用box-sizing属性来控制盒模型的计算方式，有两种可选值：content-box和border-box。其中content-box指的是以元素内容区域的大小来计算盒模型，而border-box指的是以包括内边距、边框和内容区域的大小来计算盒模型。

      /* box-sizing 属性代码示例 */
      div {
        box-sizing: content-box;
        width: 200px;
        height: 100px;
        border: 1px solid red;
        padding: 10px;
        margin: 20px;
      }

      div {
        box-sizing: border-box;
        width: 200px;
        height: 100px;
        border: 1px solid red;
        padding: 10px;
        margin: 20px;
      }

上述示例代码中，第一个div使用content-box计算盒模型的大小，而第二个div使用border-box计算盒模型的大小。两个div的内容区域大小相同，但是由于盒模型计算方式不同，导致整个盒子的大小不同。

三、CSS 选择器

CSS选择器可以根据元素标签名、类名、ID和属性等特征，来选择页面中的元素并对其进行样式设置。常见的选择器包括元素选择器、类选择器、ID选择器、属性选择器、伪类选择器和后代选择器等。

      /* CSS选择器代码示例 */
      /* 元素选择器 */
      h1 {
        color: red;
      }

      /* 类选择器 */
      .class1 {
        font-size: 16px;
      }

      /* ID选择器 */
      #id1 {
        background-color: blue;
      }

      /* 属性选择器 */
      input[type="text"] {
        border: 1px solid gray;
      }

      /* 伪类和后代选择器 */
      a:visited {
        color: purple;
      }

      div p {
        font-weight: bold;
      }

四、CSS 布局

CSS布局指的是在页面中摆放元素的位置和大小。常用的布局方式包括流动布局、浮动布局、定位布局和弹性布局等。其中，流动布局是默认的布局方式，元素按照在页面中出现的先后顺序，从左到右依次排列。而浮动布局可以让元素脱离文档流，向左或向右移动，实现多栏布局。定位布局则可以让元素相对于其父元素进行绝对或相对位置的定位。弹性布局则可以根据元素所占空间的大小，自动调整元素的位置和大小。

      /* 浮动布局代码示例 */
      /* HTML 代码 */
      <div>
        <div class="box">A</div>
        <div class="box">B</div>
        <div class="box">C</div>
      </div>

      /* CSS 代码 */
      .box {
        width: 100px;
        height: 100px;
        background-color: gray;
        float: left;
        margin-right: 10px;
      }

上述示例代码中，三个div元素都设置了相同的宽度和高度，并使用float：left让它们向左浮动。同时，通过margin-right属性设置了相邻元素之间的间距为10px。

总之，CSS技术是前端开发必备的重要技能之一。在掌握CSS的基本概念、盒模型、选择器和布局等技术后，在项目开发中灵活运用CSS技术，可以让我们的网站更具美感和用户友好性，更有效地吸引用户，提升网站的用户体验，进而提升我们的工作效率。

c语言编程笔录