视觉格式化模型 1. 简介 在视觉格式化模型中，文档树中的每个元素都将会根据盒模型产生零到多个盒子。这些盒子的布局由如下因素决定： 盒子的尺寸和类型 定位策略（正常文档流，浮动或者绝对定位） 和文档树中其他元素的关系 额外的信息（比如视口的大小，图片的原始尺寸等） 1.1 视口（viewport） 连续媒体（continuous media）的UA（user agent）通常会给用户提供一个视口，一般为一个窗口或者屏幕上的...
1.基本概念 (1)正常流：是指西方语言文本从左向右，从上向下显示。如果要让一个元素不在正常流中国，唯一的办法 就是使之成为浮动或定位元素。 (2)非替换元素：如果元素的内容包含在文档中，则称之为非替换元素。 (3)替换元素：指用作为其他内容占位符的一个元素。例子：img中的图像 (4)块级元素：在正常流中，会在其框之前和之后生...
原汁原味的才是最有味道的，在阅读CSS标准时对这一点的体会更加深刻了，阅读文档后的一大感觉就是很多看上去理所应当的样式表现也都有了对应的支持机制。本文首先从包含块写起，一方面总结标准中相应的阐述，并且结合具体的实例进行具体分析，特别是对于CSS2.1支持并不完善的IE6/7。由于经验尚浅，文中肯定存在一些问题，希望大家可以多多包涵并且指出问题。 阅读本文前，应当对于CSS盒模型以及视觉格式...
在介绍了包含块之后，CSS2.1标准中介绍了width属性和height属性，这两个属性在我们的页面布局中也发挥着重要的作用。在盒模型中，width和height包围了一个框的内容区域(content area)， 是否拥有显式的定义、框的类型、框的布局方式、框与其他框之间的关系以及其他的额外信息 都会影响一个框的最终的width和height值，本文首先介绍width属性以及视觉格式化模型中如何决定width值的相关算法。 ...
本文承接CSS2.1SPEC： 视觉格式化模型之width属性详解(上)，继续分析CSS视觉格式化模型中width以及相关值的计算问题： 注：与上节不同，本节的demo中由于出现了float,absolute等定位方式，因此为了便于效果显示，所有的demo都把body的margin属性设为10px，并且增加了一个class为container的div元素，它具有10px的padding，3px的border，500px的width，并通过设置float:left，_zoom:1来形成一个BF...
这里简单的写一些涉及到字体排版中常用到的属性, 大家可以学习查看, 也可以mark下以后看. font-family: "Micrsoft Yahei"; 设置字体 font-size: 20px; 设置字号 color: red; 设置颜色 font-weight: bold; 文字加粗 font-style: italic; 文字斜体 text-decoration: underline; 文字下划线 text-decoration: line-through; 文字删除线 text-indent: 2em; 段落缩进 text-align; center; ...
目录 [1]基本术语 [2]构造行框 [3]非替换元素 [4]替换元素 前面的话 行内元素没有块级元素那么简单和直接，块级元素只是生成框，通常不允许其他内容与这些框并存。而控制行内元素视觉格式化的主要是font-size、line-height、vertical-align 基本术语 在了解行内元素视觉格式化之前要先了解一些涉及到的基本术语 匿名文本 匿名文本(anonymous text)是指所有未包含在行内元...
英文原文： DevTools Digest: More power with the new Command Menu 作者：Paul Bakaus；翻译：Guokai Han 注：以下 Cmd 键在 Windows 上为 Ctrl 键。 Cmd+Shift+P 唤出命令菜单 Sources 面板中的文件跳转命令 Cmd + P 已经出现有一段时间了。现在我们更进一步带来了命令菜单功能，它能快速执行 DevTools 中的大部分重要功能，就像某些文本编辑器一样。 在任何位置（即使焦点在页面上）都可以使用...
视觉格式化模型 页面(文档树)可以想象成是由一个个的Box组合而成的，而视觉格式化模型(Visual formatting model)是一套规则，将这些框布局成访问者看到的样子。 哪些因素控制了这些布局 盒的尺寸和类型 定位体系 Positioning Scheme （常规流，浮动和绝对定位） 文档树中元素之间的关系 外部信息（如：视口大小，图片的固有尺寸等） 下文讲针对性的解释这些影响布局的因素，先来解释...
CSS中块级元素的（width+padding+marninig+border）因该等于其包含块的width。其中margin可能为负值，其他均为正值。 如果width和margin-left和margin-right都设置为auto的话，浏览器代理会默认将margin-left和margin-right设为0，将width设为包含块的width。 如果width与margin-left、margin-right其中一个为auto，而另一个margin设为固定值的话，浏览器代理会把为auto的那个margin设为0，将width设为包含块的width减去固定值...
前言碎碎语：标题问题在昨天困扰了笔者很久很久，早上把问题提到了各网络也暂时没有回复。因为明天要早起飞异地参加一场校招面试，笔者还是很紧张的，但奈何问题不解决寝食难安……所以还是卯起劲重新思考这个问题，算是暂时有了一个自己比较认可以及清晰的答案，与各位读者分享。如您有不同观点想法意见建议，恳请斧正！ 正式探讨之前，我们观察一个现象（在 Chrome 下的表现，其他浏览器下的表现和计算可能有细微差别）： ...
文本格式化例子 This is my HTML 字体加粗 加重语气 大号字 小号字 强调 斜体字 这是下标字 这是上标字 一打有二十十二件 这封信来自LixianLi 亲爱的panda，欢迎你来中国旅游! 11月17日,2015年 百度、阿里巴巴、腾讯简称为bat，当您将鼠标移到bat上面时可以看到缩写的完整版本,WWW也同理 ...
## sublime prettify 插件不要格式化方维前台页面（html） > prettify插件格式化方维html> url会自动格式化带空格而出错
我遇到了一些问题,无法将数据从HTML表单转换为要发送到的服务器所需的正确JSON格式.我尝试按照本指南进行操作,发现该指南用于提取数据并设置为JavaScript对象的格式,但无法获得与我需要发送的输出相匹配的输出. 我已经能够获得所需的问题键以及正确的值,但是无法添加正确的标签. 电流输出：{"Question1":"Yes", "Question2":"No", "Question3":"1", "Question4":"Female"}要求的输出：{ "Key":"Question1", "Value":"Yes"}, { "Key...