1. 概念 在视觉格式化模型中,文档树中的每个元素都将会根据盒模型产生零到多个盒子.这些盒子的布局由如下因素决定: 盒子的尺寸和类型 定位策略(正常文档流,浮动或者绝对定位) 和文档树中其他元素的关系 额外的信息(比如视口的大小,图片的原始尺寸等) 1.1 视口(viewport) 连续媒体(continuous media)的UA(user agent/用户代理)通常会给用户提供一个视口,一般为一个窗口或者屏幕上的一片可视区域.用户通过这个视口查看文档(document).当视口的大小改变时,…

概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的,所以并不会阻挡其后的元素 * { margin: 0; padding: 0; } 这是在CSS中最常见的初始化CSS的代码,用于覆盖浏览器的默认样式 浏览器兼容性 大多数浏览器都会按照上面的图示来呈现内容.然而 IE 5 和 6 的呈现却是不正确的.根据 W3C 的规范,元素内容占据的空间是由 w…

前言 还是老样子,新博客开始前总是想先啰嗦几句...HTTP协议其实在当初学习java时老师就有提过...但是...反正就那么过去了... 这段时间公司的项目正好要求做https的转换和迁移,然后自己思考了一下,好像自己对于http连一知半解都算不上...更不提http与https的区别...想想作为一个未来的大前端工程师,岂能不去研究这些东西? 好吧,废话就到这里...正文开始 什么是HTTP? 以下来自度娘最为专业的解释: 超文本传输协议(HTTP,HyperText Transfer Pr…

第一次接触CSS预编译,然后对比后发现其实less的上手容易度确实比sass高不少,再加上公司项目也是使用的less.所以想想还是根据网上的各种教程,整理出来了一些比较基础的.而且比较能让我们这种初学者快速上手的例子. 菜鸡一只,代码要是有错或者表达不清的地方,请各位批评指正! 那么,现在我们就开始正文部分了. 1.什么是less LESS是一种动态的样式语言.Less扩展了CSS的动态行为,比如说,设置变量(Variables).混合书写模式(mixins).操作 (operations)和功…

前言 这段时间的小项目中算是真正意义上使用了rem来进行移动端的页面布局,项目结束了我反思了一下之前的对于rem的使用...原来我以前对rem用法完全是在搞笑啊!!结合这次这个小项目,我觉得我也有必要对rem布局以及用法进行一次总结. ps.文笔可能不太好... 1.什么是rem 来自于鹅厂ISUX团队的解释如下: rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem大家一定会想起em单位,em(font s…

前言 在上一篇博客里我总结了下辨认this指向的四种方式,但是有师兄抛出一个问题来,我发现那些this的指向并不能说明更复杂的情况,先看下这段代码 var a = { name: 'a', getName: function(){ console.log(this.name) } } var c = a.getName.bind(a) var b={ } b.getName=a.getName; c();//a 那么为什么最后执行c会得到a呢?this在其中的指向到底是啥呢?我觉得利用上篇的博文…

写在前面 工作有那么一段时间了,但是在工作中,发现自己的理论知识还是有所欠缺.特别是在javascript上,很多东西其实自己属于知道要用这个,但是不知道为什么要这么用...这种情况很是尴尬了,所以写博客的很重要一个目的就是锻炼我自己的总结能力,把学到的东西总结出来,感觉这样能让我更快的去理解所学到的东西. ◇ 关于javascript理论 刚开始做前端的时候还是以完成功能为主,所以忽略掉了理论知识的重要性,但是随着工作的慢慢深入,发现很多原理还是要建立在对理论知识的理解与掌握上. 作为一个合格…

CSS视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.这是CSS 2.1的一个基础概念.视觉格式化模型根据CSS盒模型为文档的每个元素生成0,1或多个盒.每个盒的布局由如下内容组成: 盒尺寸:明确指定,受限或没有指定 盒类型:块级盒(block-level box),行内级别盒(inline-level box),行内盒(inline-box),原子行内级别盒(atomic inline-level box) 定位方案(position…

如果你在日常工作中使用 CSS,你的主要目标可能会重点围绕着使事情“看起来正确”.如何实现这一点经常是远不如最终结果那么重要.这意味着比起正确的语法和视觉结果来说,我们更少关心 CSS 的工作原理. CSS 的视觉结果通常是操作隐藏属性的间接后果,你可能还没有意识到这一点.某些 CSS 属性(比如 background-color)与你看到的内容有直接而明显的关系.同时,其它像 display 这样的属性对于我们很多人来说仍然是模棱两可的,因为结果似乎与上下文环境有很大关系.所以...我们需要对…

盒子模型CSS(重点) 边框border     边框通常使用连写border:1px(边框大小) solid(实线或其他)  red(颜色) border-collapse:collapse (合并边框) 内边距padding padding:10px 上下左右都为10 padding:10px 20px  上下为10px 左右为20px padding:10 20 30 上10 左右 20   下为30 padding:上 右  下  左 padding.border会撑开具有 width…