2016年10月_茂树24

翻译 Definition of "containing block" 细说包含块

元素盒子的位置和大小有时候依赖于某个包含元素来计算，这个包含元素就是包含块。一个元素的包含块定义如下：

2016-10-31 13:26:55 843

原创 inline-block基线对布局的影响&vertical-align&vertical-align等应用

在上一篇博客 http://blog.csdn.net/wmaoshu/article/details/52961394 中介绍了line-height，探讨了行框模型以及行替代元素的空白节点问题。在这一篇中多次强调了在行框中字母“x”的一半并不是内容区域的一半，这是由“文字下沉”导致的。在将要介绍的这一篇中介绍line-height一个好基友是vertical-align，他俩可以说无论在哪

2016-10-29 13:43:45 6059

原创分析 line-height属性&行框模型&行替换元素空白节点

在这篇博客 http://blog.csdn.net/wmaoshu/article/details/52836000 中已经介绍了通过对行内元素的包含块添加text-align属性使包含块内部的行内元素是水平居中，但是要注意的是在IE6 IE7 IE8（Q）模式下可能由于执行的是分析 line-height属性&行框模型&行替换元素空白节点

2016-10-29 00:11:02 1551 1

原创 margin在多栏布局上的应用

左栏定宽，右栏自适应方法一使用浮动<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>左栏定宽，右栏自适应方法一使用浮动</title> <style> div { width: 400px; } div im

2016-10-22 17:38:50 420

原创盒模型之padding

Padding 说明值值长度值或者百分数值初始值未定义应用于所有元素继承性无 padding的值不能出现负值如果出现padding为负值的情况css解析引擎会忽略这行声明。要记住，在盒模型中只有margin为负值。元素的背景色会延伸到padding <!DOCTYPE html> <html lang="en"> <head>

2016-10-17 13:28:01 563

原创 text-align存在的兼容性问题分析

text-align这个属性存在兼容性的问题，原因在于css2.1和css1之间标准规范不同，但是IE6IE7混杂模式下的IE8还遵循css1的规范。 CSS2.1规范如下： Text-align 应用于：块元素，表格单元格，行内块元素有继承性仅仅对“块元素，表格单元格，行内块元素”中的行内内容起作用。 CSS1规范如下： Text-align

2016-10-17 09:15:25 7855

原创 css中基本的选择器

CSS在html css JavaScript中所处的位置，如下图所示。至少说明了一点，CSS和JavaScript都是为html富含语义的文档内容服务的。从浏览器角度看，浏览器内核会将html文档解析成一棵DOM树，DOM树的每个节点都是一个元素，同时在我们使用者看来更像是一个个有某元素类型的对象。这些对象都有相应的属性和方法，其中有些属性代表着css的，比如width，height等属性

2016-10-15 15:35:06 459

.