CSS选择器，常见元素，布局与定位详解

一、CSS概述

1.1 css是什么

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

1.2引入css的三种方式

方式一：任意的html标签中都可以嵌入style属性

<a href="#" style="color:red; ">唐诗</a>

方式二：head标签中嵌入style标签

<style>
    h1{
        text-align: center;
        font-size: 70px;
        font-family: 楷体;
    }
</style>

<h1>唐诗</h1>

方式三：外部引入css样式

<link rel="stylesheet" href="style/style.css">

应用场景：

方式一：个别标签需要单独处理样式的时候使用
方式二：当一个页面中有多个标签有相同样式的时候，可以用方式二提炼出相同的样式。
方式三：多页面中有相同样式

二、CSS选择器

标签选择器

通过HTML标签名选择元素。

p {
  color: blue;
}

选择所有<p>标签，设置文本颜色为蓝色。

ID选择器

通过元素的id属性选择唯一元素。

#header {
  background-color: gray;
}

选择id="header"的元素，设置背景色为灰色。

class选择器

通过元素的class属性选择多个元素。

.highlight {
  font-weight: bold;
}

选择所有class="highlight"的元素，设置为粗体。

分组选择器

同时选择多个元素并应用相同样式。

h1, h2, h3 {
  margin-bottom: 10px;
}

同时选择<h1>、<h2>、<h3>，设置底部边距为10px。

层级选择器

选择嵌套在另一个元素内的元素。

div p {
  font-size: 14px;
}

选择所有位于<div>内的<p>标签，设置字体大小为14px。

同辈选择器

选择紧跟在另一个元素后的同级元素。

h2 + p {
  color: red;
}

选择紧跟在<h2>后的第一个<p>标签，设置文本颜色为红色。

属性选择器

通过元素的属性或属性值选择元素。

input[type="text"] {
  border: 1px solid #ccc;
}

选择所有type="text"的<input>元素，设置边框。

伪类选择器

通过元素的特定状态或位置选择元素。

a:link初始化状态
a:hover 悬停状态
a:visited 点击之后状态

a:hover {
  text-decoration: underline;
}

选择鼠标悬停在其上的<a>标签，添加下划线。

这些选择器可以组合使用，以更精确地定位元素。例如：

div.container > ul li.active {
  color: green;
}

选择类名为container的<div>的直接子元素<ul>中，类名为active的所有<li>元素。

三、行块元素

3.1 块级元素（Block Elements）

特点：

• 独占一行，即使内容不足也会占据整行宽度。
• 可设置 width 和 height，默认宽度是父元素的100%。
• 可包含块级元素和行内元素。

常见块级元素：

1. 容器类：
   • <div>：最常用的通用容器，无特殊语义。
   • <section>：表示文档中的章节或区域（HTML5语义化标签）。
   • <article>：表示独立的内容（如博客文章、评论）。
   • <aside>：侧边栏或附属内容。
   • <header>：页面或区域的头部（通常包含导航或标题）。
   • <footer>：页面或区域的底部（通常包含版权信息）。
2. 文本结构类：
   • <p>：段落。
   • <h1>~<h6>：标题（h1最高，h6最低）。
   • <blockquote>：长引用。
   • <pre>：预格式化文本（保留空格和换行）。
3. 列表类：
   • <ul>：无序列表（项目符号）。
   • <ol>：有序列表（数字编号）。
   • <li>：列表项（可嵌套）。
   • <dl>、<dt>、<dd>：定义列表（术语+定义）。
4. 表单类：
   • <form>：表单容器。
   • <fieldset>：表单分组。
   • <legend>：字段集标题。
5. 其他：
   • <hr>：水平线。
   • <address>：联系信息。

3.2 行内元素（Inline Elements）

特点：

• 不独占一行，与其他行内元素并排显示。
• 默认宽度和高度由内容决定，无法直接设置宽高（除非设置 display: inline-block）。
• 只能包含行内元素，不能包含块级元素。

常见行内元素：

1. 文本格式化类：
   • <a>：超链接。
   • <span>：通用行内容器，用于样式化文本。
   • <strong>：强调文本（默认加粗）。
   • <em>：斜体强调。
   • <u>：下划线。
   • <s>：删除线。
   • <del>：已删除文本。
   • <ins>：插入文本。
   • <mark>：高亮文本。
   • <code>：代码片段。
   • <kbd>：键盘输入。
   • <var>：变量。
   • <cite>：引用（如书籍、文章标题）。
2. 图片与媒体类：
   • <img>：图片（特殊的行内元素，可设置宽高）。
   • <video>：视频。
   • <audio>：音频。
3. 表单类：
   • <input>：输入框（根据 type 属性变化）。
   • <select>：下拉选择框。
   • <textarea>：多行文本输入。
   • <button>：按钮。
   • <label>：表单标签。
4. 其他：
   • <br>：换行。
   • <wbr>：可选换行点。
   • <i>：斜体（常用于图标）。
   • <b>：加粗（无强调语义）。
   • <q>：短引用。
   • <sub>：下标。
   • <sup>：上标。

3.3 行内块元素（Inline-Block Elements）

特点：

• 不独占一行，但可设置宽高（综合了块级和行内元素的特性）。
• 元素间会有空白间隙（由HTML中的换行符、空格等导致）。

常见行内块元素：

• <input>：输入框（默认 display: inline-block）。
• <select>：下拉选择框。
• <textarea>：文本域。
• <img>：图片（默认 display: inline-block）。

3.4 注意事项

1. 可通过CSS改变显示类型：
   • 使用 display: block/inline/inline-block 可切换元素类型。
   • 例如，将 <a> 标签设为 display: block 可使其成为块级链接。
2. HTML5语义化标签：
   • <header>、<nav>、<main>、<section>、<article>、<footer> 等均为块级元素，用于提升代码可读性。
3. 浮动和绝对定位的影响：
   • 浮动（float: left/right）或绝对定位（position: absolute/fixed）的元素会脱离文档流，表现类似块级元素。

四、css常见属性

4.1 文本属性

用于控制文本的显示样式，包括字体、大小、颜色等。

• color：设置文本颜色（如 color: #ff0000; 或 color: red;）。
• font-family：指定字体（如 font-family: "Microsoft YaHei", sans-serif;，多个字体用逗号分隔，备选字体用于兼容）。
• font-size：设置字体大小（如 font-size: 16px; 或 font-size: 1.2rem;）。
• font-weight：控制字体粗细（常用值：normal（正常）、bold（加粗）、100-900 数值，数值越大越粗）。
• font-style：设置字体样式（normal（正常）、italic（斜体）、oblique（倾斜））。
• text-align：文本对齐方式（left（左对齐）、right（右对齐）、center（居中）、justify（两端对齐））。
• text-decoration：文本装饰（none（无装饰，常用于去除链接下划线）、underline（下划线）、overline（上划线）、line-through（删除线））。
• line-height：行高（可设置数值、百分比或具体单位，如 line-height: 1.5; 常用于优化文本可读性）。
• text-indent：首行缩进（如 text-indent: 2em; 表示缩进2个字符宽度）。
• letter-spacing/word-spacing：字符间距/单词间距（如 letter-spacing: 2px;）。

4.2 盒模型属性

控制元素的尺寸、边距、边框等“盒子”特性（CSS盒模型=内容区+内边距+边框+外边距）。

• width/height：元素内容区的宽度/高度（如 width: 300px;，可设置 auto 自适应）。
• padding：内边距（内容与边框的距离），可分方向设置（padding-top/right/bottom/left，或简写 padding: 10px 20px; 表示上下10px、左右20px）。
• margin：外边距（元素与其他元素的距离），分方向设置方式同 padding，支持 margin: 0 auto; 水平居中块级元素。
• border：边框，可设置 border-width（宽度）、border-style（样式，如 solid 实线、dashed 虚线）、border-color（颜色），简写如 border: 1px solid #000;。
• box-sizing：盒模型计算方式（content-box（默认，宽高仅含内容）、border-box（宽高含内容+内边距+边框））。

4.3 背景属性

控制元素的背景样式。

• background-color：背景颜色（如 background-color: #f0f0f0;）。
• background-image：背景图片（如 background-image: url("img.jpg");）。
• background-repeat：背景图片重复方式（repeat（默认，平铺）、no-repeat（不重复）、repeat-x/repeat-y（水平/垂直重复））。
• background-position：背景图片位置（如 background-position: center; 或 background-position: 50% 50%;）。
• background-size：背景图片尺寸（如 background-size: cover;（覆盖元素，可能裁剪）、contain（完整显示，可能留空白））。
• background-attachment：背景图片滚动方式（scroll（随内容滚动）、fixed（固定不动））。
• 简写属性 background：可合并上述属性，如 background: #f0f0f0 url("img.jpg") no-repeat center;。

4.4 布局与定位属性

控制元素的排列方式和位置。

4.4.1 display（元素显示类型）

• block：块级元素（独占一行，可设置宽高，如 div、p）。
• inline：行内元素（不独占一行，宽高由内容决定，如 span、a）。
• inline-block：行内块元素（不独占一行，可设置宽高）。
• none：隐藏元素（不占据空间）。
• flex：启用弹性布局（父元素设置后，子元素可灵活排列）。
• grid：启用网格布局（二维布局，适合复杂排列）。

4.4.2 position（定位方式）

• static：默认定位（遵循文档流）。
• relative：相对定位（相对于自身原位置偏移，仍占原空间）。
• absolute：绝对定位（相对于最近的非 static 父元素偏移，不占原空间）。
• fixed：固定定位（相对于视口偏移，不随滚动变化，如导航栏）。
• sticky：粘性定位（滚动到特定位置后固定，如表格表头）。
• 配合定位使用的属性：top/right/bottom/left（偏移量）、z-index（层级，数值越大越靠上）。

4.4.3 浮动与清除浮动

• float：浮动元素（left/right，使元素脱离文档流，向指定方向浮动）。
• clear：清除浮动影响（left/right/both，用于解决父元素高度塌陷问题）。

4.5 边框与圆角

• border-radius：圆角边框（如 border-radius: 5px; 或 border-radius: 50%; 实现圆形）。
• box-shadow：盒子阴影（如 box-shadow: 2px 2px 5px rgba(0,0,0,0.3);，参数：水平偏移、垂直偏移、模糊度、颜色）。

4.6 列表属性

控制列表（ul/ol）的样式。

• list-style-type：列表项标记类型（如 disc（默认圆点）、circle（圆圈）、square（方块）、none（无标记））。
• list-style-image：用图片作为列表项标记（如 list-style-image: url("icon.png");）。
• list-style-position：标记位置（inside（在内容内）、outside（默认，在内容外））。
• 简写 list-style：如 list-style: none; 常用于清除默认列表样式。

4.7 过渡与动画属性

用于实现元素的动态效果。

• transition：过渡效果（指定属性、时长、 timing-function（速度曲线）、延迟，如 transition: width 0.3s ease; 表示宽度变化在0.3秒内以缓动效果完成）。
• animation：动画（需配合 @keyframes 定义关键帧，如 animation: move 2s infinite; 表示名为 move 的动画持续2秒，无限循环）。

4.8 其他常用属性

• cursor：鼠标指针样式（如 cursor: pointer;（手型）、cursor: default;（默认箭头））。
• opacity：透明度（0-1之间的数值，1为不透明，0为完全透明）。
• overflow：内容溢出处理（visible（默认，显示溢出）、hidden（隐藏溢出）、scroll（显示滚动条）、auto（按需显示滚动条））。
• white-space：文本换行方式（normal（默认，自动换行）、nowrap（不换行）、pre（保留空格和换行））。

五、css布局

好的！以下从原理、核心属性、使用场景、优缺点四个维度详细对比 浮动布局（Float）、Flexbox（弹性布局）、Grid（网格布局），并附示例代码帮助理解。

5.1 浮动布局（Float Layout）

5.1.1 核心原理

通过 float: left/right 使元素脱离文档流，向左或向右浮动，其他元素围绕其排列。
关键点：

• 浮动元素会脱离正常文档流，但仍占据空间（影响父元素高度计算）。
• 需通过 清除浮动（clearfix） 解决父元素高度塌陷问题。

5.1.2 核心属性

• float: left/right/none：设置浮动方向。
• clear: left/right/both：清除浮动影响（用于解决高度塌陷）。

5.1.3 使用场景

• 简单的多列布局（如新闻列表、卡片网格）。
• 文字环绕图片效果。

5.1.4 示例代码

<style>
  .container {
    border: 1px solid #ccc;
    /* 清除浮动方案1：overflow:auto */
    overflow: auto;
  }
  .box {
    float: left;
    width: 33.33%;
    padding: 10px;
    box-sizing: border-box;
  }
  /* 清除浮动方案2：伪元素（推荐） */
  .container::after {
    content: "";
    display: block;
    clear: both;
  }
</style>
<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

5.1.5 优缺点

• 优点：兼容性好（IE6+）。
• 缺点：
  • 需要手动清除浮动，容易出现布局问题。
  • 不支持自动等高列，对齐困难。
  • 复杂布局需嵌套多层元素，代码冗余。

5.2 Flexbox（弹性布局）

5.2.1核心原理

通过 display: flex 在父元素创建弹性容器（Flex Container），子元素自动成为弹性项（Flex Items），可灵活控制：

• 主轴（main axis） 和 交叉轴（cross axis） 的排列方向。
• 空间分配、对齐方式和元素顺序。

5.2.2 核心属性

容器属性（父元素）

• flex-direction：主轴方向（row（默认）、column、row-reverse、column-reverse）。
• justify-content：主轴对齐方式（center、space-between、space-around、flex-start、flex-end）。
• align-items：交叉轴对齐方式（center、stretch（默认）、flex-start、flex-end、baseline）。
• flex-wrap：换行（nowrap（默认）、wrap、wrap-reverse）。
• gap：元素间距（如 gap: 10px）。

项目属性（子元素）

• flex：分配空间（如 flex: 1 表示平均分配剩余空间）。
• order：排序（数值越小越靠前，默认0）。
• align-self：单独调整对齐方式（覆盖 align-items）。

5.2.3 使用场景

• 一维布局（单行或单列）。
• 导航栏、表单控件、卡片对齐。
• 响应式布局（元素自动换行）。

5.2.4 示例代码：水平居中三列布局

<style>
  .flex-container {
    display: flex;
    justify-content: center; /* 主轴居中 */
    align-items: center; /* 交叉轴居中 */
    gap: 10px; /* 元素间距 */
    height: 200px;
    background: #f0f0f0;
  }
  .flex-item {
    flex: 1; /* 平均分配空间 */
    padding: 20px;
    background: #ddd;
    text-align: center;
  }
</style>
<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

5.2.5 优缺点

• 优点：
  • 动态分配空间，适应不同尺寸元素。
  • 自动等高列，对齐灵活。
  • 代码简洁，减少嵌套。
• 缺点：
  • 二维布局能力有限（只能控制行或列）。
  • 兼容性：IE10+（部分属性需前缀）。

5.3 Grid（网格布局）

5.3.1 核心原理

通过 display: grid 创建二维网格容器，同时控制 行（rows） 和 列（columns） 的布局，支持精确的单元格定位和跨越。

5.3.2 核心属性

容器属性（父元素）

• grid-template-columns/rows：定义列/行（如 1fr 2fr 或 repeat(3, 1fr)）。
• gap：网格间距（如 gap: 10px）。
• place-items：内容对齐（center、start、stretch）。
• grid-auto-flow：元素排列方向（row（默认）、column）。

项目属性（子元素）

• grid-column/row：跨越列/行（如 span 2 表示跨越两列）。
• place-self：单独调整对齐（center、start）。
• grid-area：命名区域（结合 grid-template-areas 使用）。

5.3.3 使用场景

• 二维布局（多行多列）。
• 照片墙、仪表板、棋盘游戏。
• 复杂的多区域页面（如圣杯布局）。

5.3.4 示例代码：3×3网格

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
    grid-template-rows: repeat(3, 100px); /* 三行等高 */
    gap: 10px;
    background: #f0f0f0;
    padding: 10px;
  }
  .grid-item {
    background: #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
  }
  /* 跨越两列 */
  .grid-item:first-child {
    grid-column: span 2;
  }
  /* 跨越两行 */
  .grid-item:last-child {
    grid-row: span 2;
  }
</style>
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

5.3.5 优缺点

• 优点：
  • 二维布局能力强大，直接控制行列。
  • 支持精确的定位和跨越。
  • 自动填充和自适应布局（auto-fit/auto-fill）。
• 缺点：
  • 语法复杂，学习成本高。
  • 兼容性：IE11部分支持（需前缀），现代浏览器（Chrome、Firefox、Safari）完全支持。

六、css定位

在CSS中，position 属性用于控制元素在页面中的定位方式。通过结合 top、right、bottom、left 和 z-index 属性，可以精确定位元素的位置和层级。以下是详细介绍：

6.1 position属性值

6.1.1 static（默认值）

• 特点：元素按正常文档流排列，top、right、bottom、left 和 z-index 属性无效。
• 示例：

  .box {
    position: static; /* 默认值，无需显式声明 */
  }
  

6.2.2 relative（相对定位）

• 特点：元素相对于其正常位置偏移，仍占据原空间（不影响其他元素布局）。
• 核心属性：top、right、bottom、left 定义偏移量。
• 示例：

  .box {
    position: relative;
    top: 20px; /* 向下偏移20px */
    left: 10px; /* 向右偏移10px */
  }
  

6.2.3 absolute（绝对定位）

• 特点：元素脱离文档流，相对于最近的已定位祖先元素（即 position 为 relative、absolute、fixed 或 sticky 的元素）定位。若没有已定位祖先元素，则相对于 <html>。
• 核心属性：top、right、bottom、left 定义与祖先元素边界的距离。
• 示例：

  <div style="position: relative;"> <!-- 已定位的父元素 -->
    <div class="box" style="position: absolute; top: 0; right: 0;">
      右上角定位
    </div>
  </div>
  

6.2.4 fixed（固定定位）

• 特点：元素脱离文档流，相对于浏览器视口固定位置，滚动时不移动。
• 典型场景：固定导航栏、悬浮按钮。
• 示例：

  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #333;
  }
  

6.2.5sticky（粘性定位）

• 特点：元素在滚动时先按正常文档流排列，直到滚动到指定位置后固定（类似 fixed）。
• 核心属性：需配合 top、right、bottom、left 中的至少一个属性使用。
• 典型场景：滚动时固定的表头、侧边栏。
• 示例：

  .sidebar {
    position: sticky;
    top: 20px; /* 距离视口顶部20px时固定 */
  }
  

6.2 z-index属性（层级控制）

• 作用：控制定位元素的堆叠顺序（数值越大越靠前）。
• 注意事项：
  • 仅对 position 为 relative、absolute、fixed 或 sticky 的元素有效。
  • 父元素的 z-index 会影响子元素的层级。
• 示例：

  .box1 {
    position: relative;
    z-index: 2; /* 显示在box2上方 */
  }
  .box2 {
    position: relative;
    z-index: 1;
  }
  

6.3 常见定位技巧

6.3.1 水平垂直居中（绝对定位+负边距/transform）

.parent {
  position: relative;
  height: 300px;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 推荐方式 */
  /* 或使用负边距（需已知元素宽高）：
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  */
}

6.3.2 全屏覆盖层（模态框）

.overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.5); /* 半透明背景 */
  z-index: 1000; /* 确保在最上层 */
}

3. 图片悬浮标签

<div class="image-container">
  <img src="example.jpg" alt="示例图片">
  <span class="badge">New</span>
</div>
<style>
.image-container {
  position: relative;
  display: inline-block;
}
.badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: red;
  color: white;
}
</style>

合理使用定位属性可以实现各种复杂的布局效果，但需注意避免过度使用 absolute 和 fixed，以免破坏文档流和影响可维护性。建议结合 Flexbox 和 Grid 等现代布局方式使用。