css

CSS预处理器 Css 作为一门标记性语言，语法相对简单，对使用者的要求较低，但同时也带来一些问题需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为

背景 在开发中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素。 居中是一个非常基础但又是非常重要的应用场景，实现居中的方法存在很多，可以将这些方法

选择器 id选择器（写法：id="box"; 使用: #box:选择id为box的元素） 类选择器（写法：className="father";使用: .father: 选择类名为 father的所有

浏览器解析渲染机制 解析HTML，生成DOM树 解析CSS，生成CSSOM树 将DOM树和CSSOM树结合，生成渲染树(RenderTree) Layout(回流):根据生成的渲染树，进行回流(Lay

实现方式 display: none visibility: hidden opcity: 0 width: 0; height: 0 position: absolute 将元素移到可视区域外 cl

选择器 CSS3新增了多种选择器，主要包括属性选择器、结构伪类选择器和伪元素选择器这些选择器使得CSS的选择更加灵活和强大。‌ 属性选择器 属性选择器可以根据元素的属性和属性值来选择元素。其基础语法如

单行文本溢出省略 同时设置以下属性： white-space: nowrap‌;强制文本不换行，确保文本在一行内显示‌ overflow: hidden‌;隐藏溢出的内容。 text-overflow

‌减少CSS文件体积‌： ‌压缩CSS文件‌：使用工具如cssnano或CleanCSS来压缩CSS文件，移除多余的空格、注释和换行符‌。 ‌移除未使用的CSS‌：通过工具如PurgeCSS或UnCS

一、盒模型 1.1 什么是盒模型？ 当对一个文档进行布局(layout)的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basic box model)，将所有元素表示为一个个

什么是响应式设计？基本原理？如何实现？优缺点？ 什么是响应式设计 响应式网站设计是一个网站能够兼容多个终端，智能地根据不同设备环境进行相对应的布局 (同时适配PC+平板+手机) 基本原理 基本原理是通

两栏布局右侧自适应 父元素BFC:overfllow:hidden，子元素固定宽度左浮动:float: left,右侧：margin-left:XXpx flex弹性布局:父元素display：fle