css八股自用不全

用户58612334395
8 阅读7分钟

居中

一、水平垂直居中

  1. Flex 布局：display: flex; justify-content: center; align-items: center;
.parent {
  display: flex; /* 开启Flex */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 400px;
  height: 300px;
  border: 1px solid #ccc;
}
  1. 定位 + transform: 无需知道子元素宽高
.parent {
  position: relative;
  width: 400px;
  height: 300px;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 同时偏移自身50% */
  width: 150px;
  height: 100px;
  background: #f0f0f0;
}
  1. 定位 top: 0; left: 0; right: 0; bottom: 0; + margin: auto（需知道子元素宽高）
.parent {
  position: relative;
  width: 400px;
  height: 300px;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto; /* 上下左右自动 */
  width: 150px; /* 必须指定宽高 */
  height: 100px;
}

解释：top/left/right/bottom: 0 + margin: auto 的协同作用：

  • 当绝对定位的元素同时设置 top: 0; bottom: 0 时，浏览器会让元素的上下边界「拉伸到父容器的上下边界」；同理 left: 0; right: 0 会让左右边界拉伸到父容器的左右边界。
  • 但你又给子元素指定了 width: 150px; height: 100px（小于父容器的 400x300），元素无法被拉伸，此时浏览器会把「未填满的空间」转化为 margin。
  • 加上 margin: auto 后，浏览器会自动平分这些空白 margin（上下空白平分 → 垂直居中，左右空白平分 → 水平居中），最终实现水平垂直居中。

二、水平居中 4. text-align: center适用于文本、图片等行==内或行内块元素==，给其父元素设置即可 5. margin: 0 auto需要居中的块级元素设置(==注==必须有宽度, 不设置子绝父相，因为此方法依赖文档流)

.parent {
  width: 500px;
  border: 1px solid #ccc;
}
.child {
  width: 200px; /* 必须指定宽度 */
  height: 80px;
  background: #f0f0f0;
  margin: 0 auto; /* 核心属性：上下0，左右自动 */
}
  1. flex: display: flex; justify-content: center;
.parent {
  display: flex; /* 核心：开启Flex布局 */
  justify-content: center; /* 水平居中 */
  width: 500px;
  height: 100px;
  border: 1px solid #ccc;
}
.child {
  height: 80px;
  background: #f0f0f0;
}

三、垂直居中

  1. height: 100px; line-height: 100px; ==内或行内块元素== 通过设置行高等于父元素高度实现：
  2. 块级元素 - Flex 布局display: flex; align-items: center;
  3. 块级元素 - 定位 + transform
.parent {
  position: relative; /* 父元素相对定位 */
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
}
.child {
  position: absolute; /* 子元素绝对定位 */
  top: 50%; /* 先向下移动50% */
  transform: translateY(-50%); /* 向上偏移自身50% */
  width: 100px;
  height: 80px;
  background: #f0f0f0;
}

解释CSS中的定位（position）属性及其不同的取值

  1. static（静态定位）默认值，元素遵循正常的文档流，是所有元素的默认定位方式。 不会脱离文档流，top/right/z-index等对其无效

  2. relative（相对定位）相对自身正常文档流位置微调通过top/right/bottom/left 调整位置，调整的是 “偏离原始位置的距离”

  3. absolute (绝对定位) 相对最近的已经定位（不为static）的祖先元素定位

  4. fixed(固定定位) 相对浏览器视口定位，不会随页面的滚动而移动。

  5. sticky(粘性定位) 元素到达指定位置前是relative定位，到达指定位置后变成fixed

.sticky-title { 
  position: sticky; 
  top: 0; /* 滚动到视口顶部时固定 */        background: #f5f5f5; 
}

解释CSS中的伪类和伪元素的区别，并给出一个示例

伪类是元素的特殊状态的样式 伪元素是文档树中不存在的虚拟元素 他们都不是真实的 Dom 节点

伪类主要分为动态伪类和结构伪类

/* 1. 鼠标悬停在按钮上时改变样式 */
.btn:hover {
  background-color: #409eff;
  color: white;
}

/* 2. 按钮被点击（激活）时的样式 */
.btn:active {
  background-color: #337ecc;
}

/* 3. 输入框获取焦点时的样式 */
.input:focus {
  border: 2px solid #409eff;
  outline: none;
}

::before / ::after： 最常用的伪元素，用于在元素内部的前后插入虚拟内容，必须配合 content 属性使用（即使 content: "" 空值）。

/* 1. 给按钮添加图标（通过伪元素） */
.btn-icon::before {
  content: "🔍"; /* 插入搜索图标 */
  margin-right: 5px;
}

/* 2. 给卡片添加装饰性下划线 */
.card-title::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background-color: #409eff;
  margin-top: 8px;
}

/* 选中文本时的背景色和文字色 */
::selection {
  background-color: #409eff;
  color: white;
}

解释CSS中的BFC是什么，它的作用是什么

BFC可以使元素脱离文档流，触发 BFC 的条件（满足其一即可）

想要让一个元素成为 BFC 容器，只需给它设置以下任意一种 CSS 属性：

  1. 根元素（<html>）：页面本身就是最大的 BFC 容器；
  2. 浮动元素：float 为 left/right（非 none）；
  3. 定位元素：position 为 absolute/fixed/sticky（非 static/relative）；
  4. 块级容器：display 为 flow-root/inline-block/table-cell/flex/grid 等；
  5. 溢出处理：overflow 为 hidden/auto/scroll（非 visible）。 推荐用法：display: flow-root 是 CSS 专门为创建 BFC 设计的属性，无副作用（不像 overflow: hidden 可能隐藏溢出内容），是最优雅的触发方式。

解决布局中的互相干扰的问题

  1. 解决浮动元素导致的父元素高度塌陷：给父元素触发BFC
<!-- 问题代码：父元素高度塌陷 -->
<div class="parent">
  <div class="child">浮动元素</div>
</div>

<style>
  .parent {
    border: 2px solid red; /* 父元素边框，但高度为0 */
    /* 触发BFC：解决塌陷 */
    display: flow-root; /* 推荐 */
    /* 或 overflow: hidden; */
  }
  .child {
    float: left;
    width: 100px;
    height: 100px;
    background: blue;
  }
</style>
  1. 解决相邻元素的 margin 重叠问题: 给其中一个元素包裹bfc
<!-- 问题代码：margin 重叠 -->
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>

<style>
  .box1 {
    margin-bottom: 20px;
    height: 50px;
    background: pink;
  }
  /* 给box2包裹BFC容器，解决重叠 */
  .bfc-container {
    display: flow-root; /* 触发BFC */
  }
  .box2 {
    margin-top: 30px;
    height: 50px;
    background: yellow;
  }
</style>
  1. 阻止浮动元素覆盖其他元素: 给被覆盖的元素触发BFC
<!-- 问题代码：浮动元素覆盖正常元素 -->
<div class="float-box">浮动盒子</div>
<div class="normal-box">正常盒子（被覆盖）</div>

<style>
  .float-box {
    float: left;
    width: 100px;
    height: 100px;
    background: green;
  }
  .normal-box {
    /* 触发BFC：避开浮动元素 */
    display: flow-root;
    height: 100px;
    background: purple;
  }
</style>

解释CSS中的媒体查询是什么，它的作用是什么？

常用于前端的响应式布局

/* 语法格式：@media + 媒体类型 + (媒体特性) { 样式规则 } */
@media media-type and (media-feature) {
  /* 满足条件时应用的样式 */
  selector {
    property: value;
  }
}

例如：

  /* 断点1：平板（屏幕宽度≥768px） */
  @media screen and (min-width: 768px) {
    .container {
      width: 80%;
      background: #67c23a;
    }
  }
  
  /* 断点2：PC端（屏幕宽度≥1200px） */
  @media screen and (min-width: 1200px) {
    .container {
      width: 1200px;
      background: #f56c6c;
    }
  }
  
  /* 横屏时的样式 */
@media screen and (orientation: landscape) {
  .phone-box {
    flex-direction: row; /* 水平排列 */
  }
}

/* 打印时隐藏导航栏和广告 */
@media print {
  .nav, .ad {
    display: none;
  }
  /* 打印时文字变黑（避免彩色打印浪费墨水） */
  body {
    color: black;
    background: white !important;
  }
}

常用参数：

  • 媒体类型（media-type）：指定样式应用的设备类型，常用值：

    • screen：屏幕设备（手机、平板、电脑等，最常用）；
    • print：打印设备（打印网页时的样式）；
    • all：所有设备（默认值，可省略）。

  • 媒体特性（media-feature）：设备的具体特性，必须用括号包裹，常用值：

    • width/min-width/max-width：屏幕宽度（最核心，适配不同尺寸设备）；
    • height/min-height/max-height：屏幕高度；
    • orientation：屏幕方向（portrait 竖屏 / landscape 横屏）；
    • aspect-ratio：屏幕宽高比；
    • resolution：屏幕分辨率。

  • 逻辑运算符：组合多个条件，常用：

    • and：同时满足多个条件；
    • or（逗号 ,）：满足任一条件；
    • not：取反（不满足条件时生效）。
avatar
文章
阅读
粉丝