kleinBlue.的博客

一 、静态页面布局传统页面布局，网页上的所有元素的尺寸一律使用px作为单位。静态页面布局通常有几下几种：1、表格布局2、层布局3、div+css样式表布局表格布局：表格布局容易把握，是最简单的一种总局方式，适用于初学者。设计网页的第一步是设计版面布局。所谓布局，就是以最适合浏览的方式将图片、文字以及表单等元素排放在页面的不同位置。网页设计常用布局方法是表格布局。另外一种方便的工具，就是使用框架。框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。案例：①在

当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）一个盒子由四个部分组成：content、padding、border、margincontent，即实际内容，显示文本和图像boreder，即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成padding，即内边距，清除内容周围的区域，内边距是透明的，取值不能为负，受盒子的backgr

一、选择器CSS选择器是CSS规则的第一部分它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式选择器所选择的元素，叫做“选择器的对象”我们从一个Html结构开始<divid="box"><divclass="one"><pclass="one_1"></p><pclass="one_1">&...

一、介绍传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等二、单位在css单位中，可以分为长度单位、绝对单位，如下表所指示CSS单位 相对长度单位 em、ex、ch、rem、vw、vh、vmin、vmax、% ..

一、背景在css中我们通常使用px作为单位，在PC浏览器中css的1个像素都是对应着电脑屏幕的1个物理像素这会造成一种错觉，我们会认为css中的像素就是设备的物理像素但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的当我们做移动端开发时，同为1px的设置，在不同分辨率的移动设备上显示效果却有很大差异这背后就涉及了css像素、设备像素、设备独立像素、dpr、ppi的概念二、介绍CSS像素CSS像素..

一、前言在平常的样式排版中，我们经常遇到将某个模块隐藏的场景通过css隐藏元素的方法有很多种，它们看起来实现的效果是一致的但实际上每一种方法都有一丝轻微的不同，这些不同决定了在一些特定场合下使用哪一种方法二、实现方式通过css实现隐藏元素方法有如下： display:none visibility:hidden opacity:0 设置height、width模型属性为0 position:absolute clip-path..

一、是什么我们在页面布局的时候，经常出现以下情况： 这个元素高度怎么没了？ 这两栏布局怎么没法自适应？ 这两个元素的间距怎么有点奇怪的样子？ ...... 归根究底是元素之间相互的影响，导致了意料之外的情况，这里就涉及到BFC概念BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则： 内部的盒子会在垂直方向上一个接一个的放置 对于同一个BFC的俩个相邻的盒子的..

一、背景在开发中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素居中是一个非常基础但又是非常重要的应用场景，实现居中的方法存在很多，可以将这些方法分成两个大类： 居中元素（子元素）的宽高已知 居中元素宽高未知 二、实现方式实现元素水平垂直居中的方式： 利用定位+margin:auto 利用定位+margin:负值 利用定位+transform table布局 flex布局 ..

一、背景在日常布局中，无论是两栏布局还是三栏布局，使用的频率都非常高PS: 文末有彩蛋两栏布局两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满，比如Ant Design文档，蓝色区域为主要内容布局容器，侧边栏为次要内容布局容器❝这里称宽度较小的列父元素为次要布局容器，宽度较大的列父元素为主要布局容器❞这种布局适用于内容上具有明显主次关系的网页三栏布局三栏布局按照左中右的顺序进行排列，通常中间列最宽，左右两...

一、是什么Flexible Box简称flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局采用Flex布局的元素，称为flex容器container它的所有子元素自动成为容器成员，称为flex项目item容器中默认存在两条轴，主轴和交叉轴，呈90度关系。项目默认沿主轴排列，通过flex-direction来决定主轴的方向每根轴都有起点和终点，这对于元素的对齐非常重要二、属性关于flex常用的属性，我们可以划分为容器属性和容器成员属性容器属性有：...

一、是什么Grid布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系这与之前讲到的flex一维布局不相同设置display:grid/inline-grid的元素就是网格布局容器，这样就能出发浏览器渲染引擎的网格布局算法<divclass="container"><divclass="itemitem-1">...

一、是什么css，即层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更为美观css3是css的最新标准，是向后兼容的，CSS1/2的特性在CSS3里都是可以使用的CSS3也增加了很多新特性，为开发者带来了更佳的开发体验从几个维度列举一些常见的特性，如下二、选择器css3中新增了一些选择器，主要为如下图所示：三、新样式边框css3新增了三个边框属性，分别是： border-radius：创建圆...

一、是什么CSS动画（CSS Animations）是为层叠样式表建议的允许可扩展标记语言（XML）元素使用CSS的动画的模块即指元素从一种样式逐渐过渡为另一种样式的过程常见的动画效果有很多，如平移、旋转、缩放等等，复杂动画则是多个简单动画的组合css实现动画的方式，有如下几种： transition 实现渐变动画 transform 转变动画 animation 实现自定义动画 二、实现方式transition 实现渐变动画transition的属..

一、是什么在HTML中，每个元素都可以理解成一个盒子，在浏览器解析过程中，会涉及到回流与重绘： 回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置 重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制 具体的浏览器解析渲染机制如下所示： 解析HTML，生成DOM树，解析CSS，生成CSSOM树 将DOM树和CSSOM树结合，生成渲染树(Render Tree) Layout(回流):根据生成的渲染树，进行回流(Lay..

一、是什么响应式网站设计（Responsive Web design）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整描述响应式界面最著名的一句话就是“Content is like water”大白话便是“如果将屏幕看作容器，那么内容就像水一样”响应式网站常见特点： 同时适配PC + 平板 + 手机等 标签导航在接近手持终端设备时改变为经典的抽屉式导航 网站的布局会根据视口来调整模块的大..

一、前言每一个网页都离不开css，但是很多人又认为，css主要是用来完成页面布局的，像一些细节或者优化，就不需要怎么考虑，实际上这种想法是不正确的作为页面渲染和内容展现的重要环节，css影响着用户对整个网站的第一体验因此，在整个产品研发过程中，css性能优化同样需要贯穿全程二、实现方式实现方式有很多种，主要有如下： 内联首屏关键CSS 异步加载CSS 资源压缩 合理使用选择器 减少使用昂贵的属性 不要使用@import 内联..

一、前言在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号PS: 文末彩蛋对于文本的溢出，我们可以分成两种形式： 单行文本溢出 多行文本溢出 二、实现方式单行文本溢出省略理解也很简单，即文本在一行内显示，超出部分以省略号的形式展现实现方式也很简单，涉及的css属性有： text-overflow：规定当文本溢出时，显示省略符号来代表被修剪的文本 ..

一、是什么视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验我们可以把网页解刨成：背景层、内容层、悬浮层当滚动鼠标滑轮的时候，各个图层以不同的速度移动，形成视觉差的效果二、实现方式使用css形式实现视觉差滚动效果的方式有： background-attachment transform:translate3D background-attachment作用是设置背景图像是否固定...

一、前言在前端开发的时候，我们有时候会需要用到一个三角形的形状，比如地址选择或者播放器里面播放按钮通常情况下，我们会使用图片或者svg去完成三角形效果图，但如果单纯使用css如何完成一个三角形呢？实现过程似乎也并不困难，通过边框就可完成二、实现过程在以前也讲过盒子模型，默认情况下是一个矩形，实现也很简单<style>.border{width:50px;height:50px;border:...

一、背景Chrome 中文版浏览器会默认设定页面的最小字号是12px，英文版没有限制PS: 文末彩蛋原由 Chrome 团队认为汉字小于12px就会增加识别难度 中文版浏览器 与网页语言无关，取决于用户在Chrome的设置里（chrome://settings/languages）把哪种语言设置为默认显示语言 系统级最小字号 浏览器默认设定页面的最小字号，用户可以前往 chrome://settings/fonts 根据需求更改而我们在实际项目中，不能奢求用户更改浏览..

一、是什么Css作为一门标记性语言，语法相对简单，对使用者的要求较低，但同时也带来一些问题需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少Css编写经验而很难写出组织良好且易于维护的Css代码Css预处理器便是针对上述问题的解决方案预处理语言扩充了Css语言，增加了诸如变量、混合（mixin）、函数等功能，让Css更易维护、方便本质上，预处理是Css的超集包含一套自定义的语法及一个解析器，根据这些语法...