学习原生js的人一定会接触到client家族、scroll家族和offset家族。其中clienHeight、scrollHeight和offsetHeight一般用来求网页内容的高度，而对应的clientWidth、scrollWidth和offsetWidth则用来求网页内容的宽度，由于width和Height属性是类似的，所以这里我只挑这三个height来讲一下。
有时候我们会有让内容恰好占一屏，并且适配各种尺寸的设备的需求。我们先不谈这样做会导致在一些设备上的显示不尽人意，直接谈如何实现。
例：html中字体尺寸为 20px，盒子宽度为 5rem，则最后显示的盒子宽度为 100px。
我们怎样加速嵌套的这层循环呢，其实可以预先计算从左往右和从右往左的最大高度数组，在循环数组的时候，可以直接拿到该位置左右两边的最大高度，当前位置的接水量就是左右两边高度的较小者减去当前位置柱子的高度
一、tooltip（提示框） 源码文件： Tooltip.js Tooltip.scss 实现原理： 1、获取当前要显示tooltip的元素的定位信息（top、left、bottom、right、width、height等） 2、计算tooltip的位置，是top、left、bottom、right其中一个 3、然后根据计算的位置值，运算出坐标值 4、给tooltip应用坐标值 源码分析： 1、ownerDocument：文档；包含两个对象：<DocType>、documentElement（根节点） 2
大家好，又见面了，我是你们的朋友全栈君。屏幕可见区域高（内容的可视高度，不包括边框，边距或滚动条）：document.body.clientHeight 正文内容高（整个元素的高度，包括带滚动条的隐蔽的地方）：document.body.scrollHeight 内容高+padding+边框：document.body.offsetHeight 滚动条已经滚动的高度：document.body.scrollTop
我已经将这 5 种场景的实现封装成 npm 包，npm 包地址：https://www.npmjs.com/package/react-masonry-component2，可以直接在 React 项目中安装使用。
[获取元素具体的某个样式值] 1.[元素].style.xxx 操作获取 只能获取所有写在元素行内上的样式(不写在行内上,不管你写没写都获取不到,真实项目中我们很少会把样式写在行内上),outer.style.width =>'' (width是写在样式表中的) 2.获取当前元素所有经过浏览器计算的样式 经过计算的样式：只要当前元素可以在页面中呈现（或者浏览器渲染它了），那么它的样式都是被计算过的 不管当前样式写在哪,不管你是否写了(浏览器会给元素设置一些默认样式) 标准浏览器(IE9+) window.getComputedStyle([元素],[伪类,一般都写null]) 获取到当前元素所有被浏览器计算过的样式(对象) IE6~8 [元素].currentStyle 获取经过计算的样式
在上一篇《常用的web方法 web API(一)》中我们学习了：绑定事件的几种方式、解绑事件的几种方式、创建元素的几种方式、获取节点的几种方式本篇我们将继续学习：轮播图的js方法、offset系列相关属性、scroll系列属性、client系列以及获取元素计算后的样式属性值。好了，接下来我们接着学习：
为了理解插件背后的原理机制，我们实现一个自己简易版的虚拟列表，希望在实际业务项目中能带来一些思考和帮助。
因为这篇文章前戏很长，所以将结果放在了最前面呈现，完整的示例可以前往 https://masonry.daidr.me 查看。
------------------------------------盒子模型常用的八个属性--------------------------------- Js盒子模型 Js盒子模型指的是通过js提供的一系列的属性和方法，获取页面中元素的样式信息值 client系列(当前元素的私有属性) clientWidth/clientHeight:内容的宽度/高度+左右/上下填充，（和内容溢出没有关系） clientLeft:左边框的宽度(borderLeftWidth) clientTop:上
搞定大厂算法面试之leetcode精讲13.单调栈 视频讲解（高效学习）:点击学习 目录： 1.开篇介绍 2.时间空间复杂度 3.动态规划 4.贪心 5.二分查找 6.深度优先&广度优先 7.双指针 8.滑动窗口 9.位运算 10.递归&分治 11剪枝&回溯 12.堆 13.单调栈 14.排序算法 15.链表 16.set&map 17.栈 18.队列 19.数组 20.字符串 21.树 22.字典树 23.并查集 24.其他类型题 239. 滑动窗口最大值 (hard) 方法1.优先队列 动画过大，点击查
position属性取值：static(默认)、relative、absolute、fixed、inherit、sticky。 float属性取值：none(默认)、left、right、inherit。 display属性取值：none、inline、inline-block、block、table相关属性值、inherit。 固定定位 fixed： 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定 位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。（脱离文档流） 相对定位 relative： 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直 或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是 否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。 绝对定位 absolute： 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那 么它的位置相对于 。absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。（脱离文档流） 粘性定位 sticky： 元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定 位，之后为固定定位。 默认定位 Static： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声 明）。 inherit: 规定应该从父元素继承 position 属性的值。
上一小节我们了解了固定高度的滚动列表实现，因为是固定高度所以容器总高度和每个元素的 size、offset 很容易得到，这种场景也适合我们常见的大部分场景，例如新闻列表左图右文、会话消息这种。但是也有一些场景是例如有图片，我们的高度是一种，没有是另一种，这种情况也适合一些常见场景即高度可控，本小节我们看下不同子项高度情况下容器的总高度和每个元素的 size 和 offset 如何计算得到。
height、offsetheight、clientheight、scrollheight、innerheight、outerheight
俗话说「人靠衣装马靠鞍」，一个网页的漂亮与否CSS起到了很大的作用。它能够帮助我们进行美化。因此 CSS 在前端开发中的地位不用多说。
前端性能优化，是每个前端必备的技能，优化自己的代码，使自己的网址可以更加快速的访问打开，减少用户等待，今天就会从几个方面说起前端性能优化的方案，
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。 1. 常见的适配方案 百分比+固定高度布局方案 固定屏幕为理想视口宽度 少许的媒体查询设置字体 水平百分比布局 水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取值：根据页面的dpr动态改变 Rem的取值： 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度 chrome浏览器字体小于12px（会被重置为12px) 固定设计稿的宽度开发+根据设
在工作中，有时会遇到需要一些不能使用分页方式来加载列表数据的业务情况，对于此，我们称这种列表叫做 长列表。比如，在一些外汇交易系统中，前端会实时的展示用户的持仓情况(收益、亏损、收入等)，此时对于用户的持仓列表一般是不能分页的。
利用JS来控制页面控件的显示和隐藏有两种方法，两种方法分别利用HTML的style中的两个属性，两种方法的不同之处在于控件隐藏后是否还在页面上占空位。
CSS 布局本质就是控制元素的位置和大小。比如这样的布局：元素宽960px，水平居中。宽960px是大小。水平居中是位置。又如这样的布局：两个元素在一行，左侧元素固定宽200px，右侧元素撑满剩余空间。固定宽200px，撑满剩余空间是大小。两个元素在一行是位置。
你还在用rem弹性布局吗？在html文件头部放入一大段压缩过的js代码，是不是让你很难受？来了解下vw吧，能让你的代码更纯粹。
前端代码的编写永远逃不过“兼容”二词，从前PC时代，因为IE的傲娇，导致程序猿们一直在兼容IE的道路上挣扎，如今移动设备的普及，仿佛让我们看到了希望，仿佛马上就要摆脱IE了，可是！一波还未平息，一波又来侵袭~移动端确实不用考虑IE了，各种CSS新特性也用的爽到飞起，但一座大山压了过来，那就是分辨率的适配，移动端由于展示区域比较小，因此对于页面在不同分辨率手机上的展示细节也要求更加严格，这时像PC端有些固定宽高的布局方式显然不适应，我们被要求对于不同大小手机页面能自适应，真是非常有（tong）趣（ku）呢~ 话不多说，下面就总结了一些移动端常用的适配手法：
先放个图看看滑动固顶是啥效果： image.png 中间那个 tab 条，平常的时候是固定的，等到页面滑上去的时候，又像 fixed 一样贴在顶部。 position: sticky 就是用来实现这个效果的，元素不脱离文档流，仍然保留高度，所以这个属性真是人畜无害啊，而且效果如丝般润滑，堪比原生。 事实上，很多看起来人畜无害的东西，其背后都有一个大坑。 我们的 html 结构是这样的： <body ontouchstart=""> 06
HTML5学堂（码匠）：网站中最为常见的一种特效——鼠标移入元素，出现介绍信息的悬浮框，要么是淡入，要么是单方向的滑入，总觉得太单一了有木有？其实，稍微调整一下，这个效果就可以变得“高大上”起来，虽然
前段时间一直在折腾中文排版相关的事情，自认为结果还算不错。故开源之，即是Entry.css。这是一个可配置的、更适合阅读的中文文章样式库，可以用来快速搭建中文博客主题或是用于项目文档的样式。在这篇博文中会介绍下在做这个库过程中学到的一些中文排版知识，以及它的特色。
案例验证的浏览器为 - Google Chrome 版本 119.0.6045.123（正式版本）（arm64）
WPJAM Basic 在后台使用 Thickbox 实现弹窗效果的，Thickbox 基于 jQuery，虽然很古老，最后一次更新已经是 2014 年了，但是一直非常好用，所以我在各种 WordPress 后台的各种弹窗都是使用 Thickbox 实现的。
获取页面中元素到文档区域document的横向、纵向坐标的两种方法及其比较 在js控制元素运动的过程中，对于页面元素坐标位置的获取是经常用到的，这里主要总结下两种方法：
一、跨浏览器事件 跨浏览器添加事件 //跨浏览器添加事件 function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(type,fn,false); }else if(obj.attachEvent){//IE obj.attchEvent('on'+type,fn); } } 跨浏览器移除事件 //跨浏览器移除
CSS 是层叠样式表（Cascading Style Sheets）的简写，它是一种用于定义网页和网页应用程序外观的标准格式语言。
本文设计到的css属性有background、inline-block、line-height
在最近开发移动端页面，遇到这么一个情况：当页面宽度 100% 时，高度为宽度一半，并随手机宽度变化依然是一半。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。 CSS盒模型：标准模型 + IE模型
小包在学习阮一峰大佬的《ES6入门教程》时，对文章顶部的阅读进度功能产生了浓厚的兴趣。小包当时猜想应该是使用 JavaScript 实现的，但最近爱上了浩如烟海的 CSS ，于是小包有个大胆的想法，单纯的 CSS 能实现阅读进度功能吗？
伪元素 伪元素能做什么？我们要他有何用？它能为我们解决什么问题？和其他的方法相比她有什么有点？我们为什么要使用它？ 伪元素和伪类一样，添加到选择器，但是不是描述状态，他允许我们为元素某些部分设置样式；
最近玩了玩用css来构建3D效果，写了几个demo，所以博客总结一下。 在阅读这篇博客之前，请先自行了解一下css 3D的属性，例如：transform-style，transform-origin，transform, perspective。
和百分比有区别的,百分比是相对于父元素来说的,而vw和vh总是针对当前视口来说的.
前言 最近忙里偷闲，给自己加油充电的时候，发现自己脑海中布局这块非常的凌乱混杂，于是花了一些时间将一些常用的布局及其实现方法整理梳理了出来，在这里，分享给大家。 单列布局
1.margin与百分比单位 Paste_Image.png Paste_Image.png 2.margin重叠 margin重叠通常特性： 只发生在block水平元素（例如：p、div、list、
在中文里面，我们一般会在文字下方加上圆形符号。在日语中会在文字上方加上小顿号。在CSS3中如下属性可以控制着重符号:
（1）block： 会独占一行，多个元素会另起一行，可以设置width、height、margin和padding属性；
伪元素能做什么？我们要他有何用？它能为我们解决什么问题？和其他的方法相比她有什么有点？我们为什么要使用它？
display:none使用后，元素的宽度，高度都会丢失，视为不存在不加载；元素原来占据的空间位置不保留；产生回流和重绘；
1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。 2、设计方法： PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分； 移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
