详谈JavaScript原型链
创建对象的方法在了解原型链之前，首先先了解一下创建对象的几种方式，主要有以下三种 代码： 123456789101112131415<script type="text/javascript"> // 第一种方式：字面量 var o1 = {name: 'o1'} var o2 = new Object({name: 'o2'}) // 第二种方式：构造函数 var M = function (name) { this.name = name; } var o3 = new M('o3') // 第三种方式：Object.create var p = {name: 'p'} var o4 = Object.create(p) console.log(o1) console.log(o2) console.log(o3) ...
三栏布局的五种解决方案及优缺点
问题假设高度已知，请写出三栏布局，左栏、右栏宽度300px，中间宽度自适应。 这道题本身的难度并不大，我们在布局页面的时候，写个三栏布局还是挺简单的。但是如果在面试的时候遇到这道题，就没有那么简单了。看似简单的一道题，想把它答好是不简单的。往往越简单的题越不好答。如果看到这题只想到了浮动和绝对定位，那这题你连及格都及格不了。 样式下面是5种三栏布局的方法。在写布局代码之前，先写两段公共的样式，此段写在头部。 12345678910<style media="screen"> html *{ padding: 0; margin: 0; } .layout article div{ min-height: 100px; } </style> 1. 浮动布局12345678910111213141516171819202122232425262728<!--浮动布局 --> ...
深入理解CSS盒模型
前言如果你在面试的时候面试官让你谈谈对盒模型的理解，你是不是不知从何谈起。这种看似简单的题其实是最不好答的。 下面本文章将会从以下几个方面谈谈盒模型。 基本概念：标准模型 和IE模型 CSS如何设置这两种模型 JS如何设置获取盒模型对应的宽和高 实例题（根据盒模型解释边距重叠） BFC（边距重叠解决方案） 基本概念盒模型的组成大家肯定都懂，由里向外content,padding,border,margin. 盒模型是有两种标准的，一个是标准模型，一个是IE模型。 从上面两图不难看出在标准模型中，盒模型的宽高只是内容（content）的宽高， 而在IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。 css如何设置两种模型这里用到了CSS3 的属性 box-sizing 12345/\* 标准模型 \*/box-sizing:content-box;...
深入解析 Cookie、sessionStorage 和 localStorage 的区别
在前端开发中，Cookie、sessionStorage 和 localStorage 是我们经常使用的存储方式。它们的区别看似简单，但如果你能理解它们的核心特性、性能影响以及安全风险，你就能在面试或实际开发中游刃有余。 1. 容量限制与数据格式 存储方式 容量限制 数据格式 Cookie 4KB 只能存储字符串 sessionStorage 约 5MB 只能存储字符串（可转换为 JSON） localStorage 约 5MB 只能存储字符串（可转换为 JSON） 🔹 扩展点： 虽然 sessionStorage 和 localStorage 只能存储字符串，但我们可以使用 JSON.stringify() 存入对象，取出时用 JSON.parse() 还原。 1234const user = { name: "张三", age: 25 };localStorage.setItem("user", JSON.stringify(user));const storedUser =...
