夯实前端基础之CSS篇

ops/2025/1/11 23:47:18/

知识点概览

在这里插入图片描述

这一篇是讲CSS的，前面还有一篇总结HTML的哦~夯实html" title=前端>前端基础之HTML篇，后面还会更新其他系列哦~

一、必知必会

html_10">1. html中引入样式的几种方式？

  • 内联样式（html元素的style属性）
  • 内部样式表（style标签）
  • 外部样式表 （使用link标签）
html"><head><link rel="stylesheet" type="text/html" title=css>css" href="./meta.html" title=css>css"><!-- rel:必需。规定当前文档和被链接文档直接的关系 -->
</head>

2. display有哪些属性？行内元素和块级元素区别及转换方式？

2.1 display的属性
  • none：不显示
  • inline：行内
  • block：块类型
  • inline-block：行内块元素
  • flex：弹性布局
    • flex:1：相当于flex-grow: 1、flex-shrink: 1、flex-basis: 0%
      • flex-grow: 1：在主轴上尽可能占据剩余空间
      • flex-shrink: 1：容器剩余空间不足时，该元素会按照一定比例缩放
      • flex-basis: 0%：意味着元素在没有分配剩余空间或收缩之前，它在主轴方向上的初始大小为 0
  • inherit：继承
  • grid：网格
2.2 行内元素和块级元素的区别？
  • 行内元素（span，a，br， input，img…）
    • 无法设置宽高
    • 水平方向可以设置margin + padding，垂直方向则不可
    • 不会自动换行
  • 块级元素（div，p，ul，li，h1-h6，语义化标签）
    • 可以设置宽高
    • 水平垂直方向都能设置margin + padding
    • 可以换行
    • 多个块级元素是自上而下换行排列
2.3 内联元素和块级元素有哪几种转换方式及原理 ***
  • display
  • float：left|right => 当一个元素浮动时，它的行为在某些方面会类似于内联块元素（inline - block） => 可用于解决内联元素之间的空白问题
    • 行内元素之间的空白问题：这是因为浏览器在解析 HTML 文档时，会把换行，制表符等空白字符当作文本节点来处理，并且根据 CSS 的布局规则，这些空白文本节点会占据一定的空间，所以就出现了元素之间的空白。
  • position：absolute|fixed

3. 选择器 & 优先级

  • 简单选择器（根据名称、id、类来选取元素）
  • 组合器选择器（根据它们之间的特定关系来选取元素）
  • 伪类选择器（根据特定状态选取元素）
  • 伪元素选择器（选取元素的一部分并设置其样式）
  • 属性选择器（根据属性或属性值来选取元素）
3.1 选择器的优先级是什么样的？选择器如何做样式判断？这段样式能不能生效？
名称写法权重
内联样式1000
id选择器#id100
类选择器.class10
属性选择器a[ref=‘link’]10
标签选择器div1
伪类选择器:hover10
伪元素选择器:after1
兄弟选择器div+p0
子选择器ul>li0
后代选择器div a0
通配符*0
3.2 特殊场景的优先级如何判断？
  • !important 优先级最高
  • 如果优先级相同，则后者高于前者
  • 继承得到的样式，优先级最低
3.3 可继承的样式有哪些？
  • 字体属性： font-family, font-size, font-weight, font-style
  • 文本属性： text-align, text-indent, line-height, color
  • 列表部分属性： list-style
  • 光标： cursor

4. 隐藏和显示相关

  • display: none:直接删除了该元素，并且不再占据空间-重排，不会被继承
  • visibility: hidden : 隐藏，页面上不可见，但仍然占据原来的空间-重绘（性能更好），会被继承
  • opacity:0:不透明度，取值范围0-1，为0时完全透明，看起来像被隐藏了一样-重绘
  • z-index 负值: 不占位
  • transform：scale(0,0): 占位

5. 盒模型及其特性

5.1 什么是标准盒模型和IE盒模型？如何转换？

在这里插入图片描述

  • 盒模型的转换方式
    • box-sizing: content-box（标准盒模型） | border-box（IE盒模型）;
5.2 伪元素和伪类是什么？区别？如何使用？
  • 伪元素：产生新元素，只出现在html" title=css>css样式表中，不存在于doc中。
html" title=css>css">p::before {content: "before";color: red;
}
  • 伪类：已有元素上加上新的特殊类别，不产生新元素
html" title=css>css">p:hover{color: blue;
}

6. 图片格式及CSS-sprites

6.1 图片格式有哪些？怎么应用？如何选择？
  • JPEG（Joint Photographic Experts Group）：有损压缩格式，支持百万种颜色，适合还原度要求较高的照片。
  • PNG（Portable Network Graphics）：无损压缩格式
    • PNG-8：支持透明度调节，适用于颜色较少（最多 256 种颜色）的图像，如简单的图标。
    • PNG-24：支持更多颜色，适用于色彩丰富且需要透明度的图像。
  • GIF（Graphics Interchange Format）：无损，有压缩，最多支持256种颜色，适合表情包，动画。
  • SVG（Scalable Vector Graphics）：无损，放大不会失真，适合logo，图标。
  • BMP：无损，没有压缩，通常体积比较大。
html" title=css>csssprites_146">6.2 html" title=css>css-sprites精灵图（雪碧图）怎么处理？
  • 所有涉及到的图片都放到一张图上
    • 使用background - position属性来定位具体图标。这个属性接受两个值，分别表示水平方向和垂直方向的偏移量。偏移量可以使用像素（px）、百分比（%）或者关键字（如top、left、center等）来表示。

7. 像素密度与图片应用

7.1 什么是像素密度？
  • 单位长度（通常指每英寸）所包含的像素数量
    • 经典设备宽高414px * 896px, 物理像素1242px * 2688px => 1242/414=3 => 逻辑像素 ：物理像素 = 1：3 => 像素密度3 => 3倍屏
7.2 如何在图片的加载上应用动态密度？
  • 设计师提供@2x, @3x, @4x的图片
  • 200 * 300 => 3倍屏幕 => 600 * 900
html" title=css>css">image {background: ('1x.png)
}
// 利用媒体查询
@media only screen and (min-device-pixel-ratio: 2) {image {background-image: url('2x.png')}
}

8. CSS工程化与预处理

  • 预处理器：less，shtml" title=css>css， stylus
    • 利用编译库提供能力，提供层级，mixin，变量，循环，函数
  • 后处理器；postCss
    • 利用后处理编译，属性增加前缀，实现跨浏览器兼容。如：-webkit-flex; display: flex

9. 单行/多行文本超出

html" title=css>css">/* 单行超出 */
p{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}/* 多行超出 */
div{width: 500px;overflow: hidden;text-overflow: ellipsis;/* 弹性伸缩盒子模型 */display: -webkit-box; /* 盒子从上往下垂直排列 */-webkit-box-orient: vertical;-webkit-line-clamp: 3;
}/* 兼容性方案 */
div{width: 500px;position: relative;line-height: 18px;max-height: 54px;overflow: hidden;
}
div::after{content: "...";position: absolute;bottom: 0;right: 0;
}

10. 文本对齐

  • 水平对齐：text-align：left | right | center
  • 垂直对齐：vertical-align：top | middle | bottom

二、布局场景

1. 如何实现响应式

响应式设计介绍：https://www.w3school.com.cn/html" title=css>css/html" title=css>css_rwd_intro.asp

1.1 视口（viewport）设置
  • 视口是浏览器显示页面内容的区域。比如initial - scale=1表示初始缩放比例为 1，这使得页面在加载时以设备的原始分辨率显示，不会出现缩放情况。
html"><meta name="viewport" content="width=device-width,initial-scale=1.0">
1.2 媒体查询（@media）
  • 媒体查询是 CSS3 中的技术，它允许根据设备的特性（如屏幕宽度、高度、分辨率、设备方向等）来应用不同的 CSS 样式。
html"><style>html" title=css>css">img {width: 200px;}@media screen and (min-width: 600px) {p {color: red;}img {width: 600px;}}/* 针对手机竖屏的基本样式 */@media (max-width: 600px) and (orientation: portrait) {/* 样式规则 */}/* 针对手机横屏的样式调整 */@media (max-width: 900px) and (orientation: landscape) {/* 样式规则 */}/* 针对高像素密度设备的样式优化 */@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {/* 样式规则 */}</style>
<body><p>这是一段文字</p><img src="./scene.jpeg" alt`="`风景图">
</body>

在这里插入图片描述

1.3 相对单位（如vw，vh，rem等）
  • vw（视口宽度单位），vh（视口高度单位）
    • 基础用法：背景铺满屏幕：直接100vw,100vh
    • 进阶用法：通过数学运算将vw，vh结合起来：图片宽高4:3
  • rem（根元素字体大小单位）
    • 在 HTML 根元素（html）上设置字体大小，然后使用 rem 单位来定义其他元素的字体大小。
  • em（父元素字体大小单位）
    • 原理同rem，只不过是根据父元素
html"><style>html" title=css>css">html{font-size: 16px;}img {width: 100vw;height: calc(75vw);}p{/* 1.5*16=24px */font-size: 1.5rem; }</style>
1.4 弹性盒子布局（Flexbox）和网格布局（Grid Layout）
  • Flexbox：它允许轻松地控制子元素在主轴（flex - direction定义的方向）和交叉轴上的排列方式，如居中、分散、两端对齐等。
html" title=css>css">.box{display: flex;flex-direction: row;
}
@media screen and (max-width: 500px){.box{flex-direction: column;}
}
  • Grid Layout：使用grid-template-columns和grid-template-rows属性来定义网格的列和行。在响应式布局中，可以使用媒体查询来改变这些属性的值。
html" title=css>css">.grid-container {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(2, 100px);
}
@media screen and (max-width: 600px) {.grid-container {grid-template-columns: 1fr;grid-template-rows: repeat(6, 100px);}
}

2. 常见的水平垂直居中实现方案

  • flex(我的神！)
html" title=css>css">.container {display: flex;justify-content: center;align-items: center;
}
  • grid布局
html" title=css>css">.container {display: grid;place-items: center;height: 100vh;}
  • 绝对定位 + margin: auto（自我拉扯）
    • 浏览器会自动计算并分配剩余空间，使子元素在父元素中水平垂直居中
html" title=css>css">.container {position: relative;height: 100vh;
}
.box1 {position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;
}
  • 绝对定位 + 负margin
html" title=css>css">.container {position: relative;height: 100vh;
}
.box1 {position: absolute;top: 50%;left: 50%;margin-left: -width/2 px;margin-top: -height/2 px;
}
  • 绝对定位 + transform
    • 先将子元素定位到父元素的一半位置（使其左上角位于父元素中心位置），然后将子元素相对于自身宽高的一半进行偏移
html" title=css>css">.container {position: relative;height: 100vh;
}
.box1 {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

3. 实现一个三栏布局有哪几种办法？

浮动，flex，grid，table，绝对定位等方案可以实现，以前写过一篇文章：CSS实现三栏布局

三、定位浮动

1. position有哪些属性

  • static（默认值）：不受top、bottom、left、right属性的影响。
  • relative（相对定位）：不脱离文档流，使用top、bottom、left、right属性来调整元素相对于自身原始位置的偏移量。
    • 元素微调：用于对元素位置进行小幅度的精确调整。
    • 作为绝对定位元素的参考容器：例如实现元素水平垂直居中
  • absolute（绝对定位）：元素相对于最近的非static定位的祖先元素进行定位。如果没有这样的祖先元素，则相对于<html>元素。元素脱离文档流
    • 弹出层和模态框定位：用于创建弹出层（如警告框、登录框等模态框）。
    • 复杂布局中的元素精确定位：比如在制作一个具有动态效果的广告位，将广告元素绝对定位在页面的某个角落。
  • fixed（固定定位）：元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。
    • 悬浮广告和提示信息
  • sticky（粘性定位）： 使用场景 - 页面滚动时元素固定到顶部

2. 为什么有时候用translate来改变位置而不是定位？

  • 性能方面的优势
    • 使用定位属性时可能会引起文档流的改变，导致浏览器进行重排（reflow）
    • translate（不会影响其他元素在文档流中的位置，只是重绘，不会重排
  • 动画效果的优势：translate在制作动画效果时能提供更平滑的过渡
  • 兼容性和灵活性方面的优势
    • translate可以更好地与相对单位（如em、rem、%）配合使用
      • 例如使用transform:translate(50%, 50%)可以很方便地将一个元素相对于自身的尺寸进行中心定位。

3. 什么是BFC？使用场景？

Block Formatting Context 块级格式化上下文，规定内部的块级盒子的布局方式，独立的渲染区域，与外面的元素相互隔离，互不影响。

  • 如何触发BFC？
    • 根元素（html）：本身就是一个BFC
    • 浮动元素（float不为none）：浮动元素脱离文档流，这种脱离使得它需要一个独立的布局环境来管理自身以及与其他元素的布局关系，这就是 BFC 产生的一个原因。
    • 绝对定位元素（position属性为absolute或fixed）：原因同上。
    • 行内块元素（display: inline - block）：具有行内元素和块级元素的双重特点
    • overflow不为visible：例如，当overflow: hidden时，元素会隐藏超出自身范围的内容；overflow: auto会根据内容是否溢出自动添加滚动条；overflow: scroll则无论内容是否溢出都会添加滚动条。这些处理方式都要求元素建立一个独立的布局环境来管理内部内容，这与 BFC 的概念相契合。
  • 使用场景
    • 清除浮动（解决父元素高度坍塌）
    • 防止外边距重叠

html" title=css>css_454">4. 什么是html" title=css>css单一浮动？原理？形成什么状态？如何清除浮动？

CSS 单一浮动是指将一个元素设置为向左（float: left）或向右（float: right）浮动。

  • 原理：
    • 浮动元素从文档流中脱离出来，意味着它不再占据原来文档流中的垂直空间
  • 形成的状态
    • 水平排列：多个单一浮动元素如果宽度允许，会在同一行水平排列。
    • 父元素高度塌陷：因为浮动元素脱离了文档流，父元素在计算高度时，不会将浮动的子元素的高度计算在内。
    • 影响周围元素布局：除了文本环绕，浮动元素还会对其他非浮动的块级元素产生影响。
  • 如何清除浮动：
    • 使用空的块级元素清除浮动（添加额外标签法）：不推荐！不符合语义化要求且增加了冗余代码。
    • over：hidden|auto（除了visible之外的）：触发BFC，BFC会包含浮动元素，使得父元素的高度能够正确计算
    • 使用伪元素清除浮动（推荐）：利用 CSS 的伪元素（:after）在父元素内容的最后添加一个虚拟的元素，通过对这个虚拟元素进行样式设置，使其清除浮动。

5. 什么是高度坍塌，什么引起？怎么解决？

高度坍塌指父元素没有包裹住子元素，导致父元素的高度小于预期，甚至变成0的现象

  • 引起原因：
    • 浮动元素导致的高度坍塌：浮动元素会脱离文档流
    • 绝对定位元素导致（部分情况）：如果父元素仅依靠子元素的高度来撑开自身高度，那么在这种情况下，父元素的高度可能会坍塌。
  • 解决办法
    • 使用BFC来解决
    • 清除浮动
    • 给父元素设置固定高度（不灵活，不推荐）

四、手写案例

1. 三角形

  • 利用border属性：通过创建一个宽度和高度均为 0 的元素，并为其设置不同颜色的border。由于元素本身没有内容区域，其边框会直接交汇于中心点。通过指定其中两条边框为透明，只留下需要形成三角形的那一条或两条边框有颜色，从而形成一个三角形形状。
  • 使用 linear-gradient 作为背景：通过设置元素的background-image属性为一个线性渐变（linear-gradient），并通过控制渐变的角度、颜色起止位置以及透明度，使得渐变仅显示为两种颜色的边缘过渡，从而形成三角形的效果。
  • 使用SVG绘制（代码略复杂）
html" title=css>css">// 1.利用border属性
.triangle{width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid rgb(139, 121, 243);
}
// 2.利用渐变.triangle {width: 200px;height: 200px;background-image: linear-gradient(to right bottom, red 50%, transparent 50%);}

2. 扇形

  • 利用border
  • 使用 conic-gradient ()锥形渐变实现
  • 利用SVG（较复杂）
  • 使用clip-path剪裁（较复杂）
//1.border.pie {width: 0;height: 0;border: 50px solid transparent;border-right-color: red;border-radius: 50%;}// 锥形渐变.pie {width: 100px;height: 100px;border-radius: 50%;background: conic-gradient(red 0deg,red 120deg, /* 扇形结束角度 */blue 120deg, /* 扇形结束角度 */blue 360deg /* 或 0deg */);
}

3. 1px问题

  • 产生原因：
    • 设备像素比不同：CSS 中的 1px 问题主要出现在移动端，大多数机型的 DPR 不是 1，如 iPhone 的 DPR 普遍是 2 和 3。这意味着在 CSS 中设置的 width:1px，在物理像素中可能对应的是 2px 或 3px，从而导致边框看起来变粗。
    • 用户缩放导致：当用户对页面进行缩放操作时，CSS 中 1px 所代表的物理像素也会相应地增加或减少。例如，将页面放大一倍，那么 CSS 中 1px 所代表的物理像素也会增加一倍。
  • 解决方案
html" title=css>css">// 1. 使用视口单位和rem
html{font-size: 16px; /*基准值，根据设备屏幕宽度调整*/
}
.border{border: 0.05rem solid #000; /*0.05rem约等于1px*/
}// 2.使用border-image：专门制作一个边框图像
// 3. 0.5px边框：在设备像素比为2或者更高时使用0.5px边框（注意：这种方法需要确保设备支持 0.5px 边框，部分安卓浏览器和 iOS8 及以下版本不支持该写法）
.border{border:1px solid #bbb;
}
@media screen and (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.border{border-width:0.5px;}
}

http://www.ppmy.cn/ops/149283.html

相关文章

目标值子矩阵的数量

目标值子矩阵的数量

目标值子矩阵的数量 问题描述 小M最近在研究矩阵&#xff0c;他对矩阵中的子矩阵很感兴趣。给定一个矩阵 matrix 和一个目标值 target&#xff0c;他的任务是找到所有总和等于目标值的非空子矩阵的数量。子矩阵通过选择矩阵的某个矩形区域定义&#xff0c;形式为 (x1, y1, x2,…
阅读更多...
adb remount 重新挂载 system时报错 Device or resource busy

adb remount 重新挂载 system时报错 Device or resource busy

问题&#xff1a; android 7.1.2系统中 system 属于只读权限&#xff0c;选用更改成读写权限。 操作&#xff1a;使用一下3个步骤后报错Device or resource busy。 1. adb shell 2. su 3. mount -o remount,rw /system 解决方案&#xff1a;执行以下5个步…
阅读更多...
Ruby语言的软件开发工具

Ruby语言的软件开发工具

Ruby语言的软件开发工具概述 引言 Ruby是一种简单且功能强大的编程语言&#xff0c;它以优雅的语法和灵活性而闻名。自1995年首次发布以来&#xff0c;Ruby已经被广泛应用于各种开发领域&#xff0c;特别是Web开发。随着Ruby语言的普及&#xff0c;相关的开发工具也日益丰富。…
阅读更多...
CAN总线入门指南：从原理到实践

CAN总线入门指南：从原理到实践

1 CAN通信基础概述 CAN&#xff08;Controller Area Network&#xff09;是一种串行通信协议&#xff0c;由德国BOSCH公司于1986年专门为汽车分布式控制系统开发。它最初的目标是减少汽车中的线束数量&#xff0c;降低整车重量和成本。经过30多年的发展&#xff0c;CAN已经成为…
阅读更多...
嵌入式驱动开发详解9（platform驱动）

嵌入式驱动开发详解9（platform驱动）

文章目录 前言platform简介总线驱动设备设备树下的platform驱动在设备树中创建设备节点编写 platform 驱动 后续参考文献 前言 Linux 系统要考虑到驱动的可重用性&#xff0c;提出了驱动的分离与分层这样的软件思路&#xff0c;在这个思路下诞生了我们最常打交道的 platform 设…
阅读更多...
初学stm32 --- adc光敏传感器

初学stm32 --- adc光敏传感器

光敏二极管简介 1&#xff0c;光敏二极管 核心是一个PN结&#xff0c;对光强非常敏感&#xff0c;单向导电性&#xff0c;工作时需加反向电压 2&#xff0c;暗电流 无光照时&#xff0c;反向电流很小&#xff08;一般小于0.1微安&#xff09;&#xff0c;称为暗电流 3&#…
阅读更多...
AWS Control Tower基础知识

AWS Control Tower基础知识

1.多账户策略 Account Vending&#xff1a;AWS Control Tower 使用 AWS Organizations 自动执行创建新账户的过程。这包括创建具有预定义防护机制 &#xff08;策略&#xff09; 的账户。组织单位 &#xff08;OU&#xff09;&#xff1a;Control Tower 利用 AWS Organization…
阅读更多...
贪心算法（五）

贪心算法（五）

目录 一、单调递增的数字 二、坏了的计算器 三、合并区间 四、无重叠区间 五、用最少数量的箭引爆气球 一、单调递增的数字 单调递增的数字 贪心策略&#xff1a; 对于这道题&#xff0c;相邻数字相等&#xff0c;也表示是递增的。 解题代码&#xff1a; class Soluti…
阅读更多...
最新文章

Copyright @ 2022~2023