CSS2.1
关注
分享
扫一扫
文章平均质量分 85
茂树茂树
这个作者很懒，什么都没留下…
展开
-
Definition of "containing block" 细说包含块
元素盒子的位置和大小有时候依赖于某个包含元素来计算，这个包含元素就是包含块。一个元素的包含块定义如下：翻译 2016-10-31 13:26:55 · 873 阅读 · 0 评论 -
为什么要用浮动&浮动元素如何显示&浮动元素对其他元素的影响&清浮动
什么是浮动,我们真的用浮动布局吗？A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow alon原创 2016-11-01 14:53:44 · 5093 阅读 · 0 评论 -
css属性值得确定（继承，层叠）
当html加载完之后开始进行解析最终生成DOM树，然后与此同时相关的CSS解析器开始对文档中的样式表进行解析以便于生成CSSOM树。然后最终将DOM树和CSSOM树合并成render树在经过布局和绘制等过程最终绘制到浏览器窗口或者其他设备的显示屏上。那么在CSS解析器在解析样式表的过程中属性最终值是怎么确定的？ 确定某个属性的值大致要经过这么几个过程：首先通过从多条匹配规则中根据规则指原创 2016-12-10 16:38:12 · 597 阅读 · 0 评论 -
BFC
一、BFC是什么？BFC是定义了在正常流中块元素的布局方式。怎么理解，看下面叙述。当一个元素的position声明为static或者是默认状态下，这个元素就会被布局在正常流中。我们知道在根元素也就是html或者body元素中嵌套一个块元素的话，这个块元素就会尽可能的向左和向上的位置进行布局。那么为什么会这样？这是因为这个根元素为这个块元素生成了一个BFC的环境，这个环境决定了这个块元素的布原创 2016-12-13 17:44:26 · 562 阅读 · 0 评论 -
你真的了解行盒模型吗？
这一篇博客主要讨论的是行盒模型原理性的东西，如果想学习技巧的话可能这篇博客不适合。组成这个行盒模型的成分有不可替换的行内元素、可替换的行内元素、匿名行框、等。所以为了能够讨论明白行盒模型之前先明白行内元素在盒子模型中的表现。进而讨论行盒模型，并且详细的说明了控制行盒模型的几个属性Line-height和vertical-align。详细介绍之前先引入一个问题，请看这个代码。原创 2016-12-15 10:57:13 · 3069 阅读 · 0 评论 -
link与@import引入外部样式表的区别
使用上的区别link： 某html文件的head中有：<link rel="stylesheet" type="text/css" href="sheet.css">link是一个比较老的html的标签在任何浏览器下都可以很好的工作，link的作用是将外部文件引入到当前文件中，可以引入除去css文件之外别的类型的文件。但是只能位于head中。rel = “stylesheet”表示的是当前文档与引原创 2016-08-22 15:58:45 · 4458 阅读 · 0 评论 -
框模型
框模型 盒的content，padding和border区域的背景样式通过生成元素的’background’属性来指定。Margin背景总是透明的存在兼容性问题是： IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding。 margin 说明 值原创 2016-12-26 12:19:53 · 550 阅读 · 0 评论 -
绝对定位实现左右上下自适应布局
绝对定位实现单栏左右自适应上下自适应布局。这里的左右上下自适应布局是依赖于绝对定位的绝对定位的可视化格式模型的。下面就要介绍绝对定位在水平方向和垂直方向上各个参数之间的关系。绝对定位元素的包含块？ 在介绍正式内容之前，先介绍绝对定位即position为absolute元素的包含块。绝对定位元素的包含块是离他最近的position不为static元素的padding框区域，这个元素可以是行内元素或者原创 2016-12-27 16:57:09 · 7780 阅读 · 0 评论 -
inline-block基线对布局的影响&vertical-align&vertical-align等应用
在上一篇博客 http://blog.youkuaiyun.com/wmaoshu/article/details/52961394 中介绍了line-height，探讨了行框模型以及行替代元素的空白节点问题。在这一篇中多次强调了在行框中 字母“x”的一半并不是内容区域的一半，这是由“文字下沉”导致的。在将要介绍的这一篇中介绍line-height一个好基友是vertical-align，他俩可以说无论在哪原创 2016-10-29 13:43:45 · 6130 阅读 · 0 评论 -
分析 line-height属性&行框模型&行替换元素空白节点
在这篇博客 http://blog.youkuaiyun.com/wmaoshu/article/details/52836000 中已经介绍了通过对行内元素的包含块添加text-align属性使包含块内部的行内元素是水平居中，但是要注意的是在IE6 IE7 IE8（Q）模式下可能由于执行的是分析 line-height属性&行框模型&行替换元素空白节点原创 2016-10-29 00:11:02 · 1584 阅读 · 1 评论 -
关于input style属性兼容性问题
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script> window.onload = function(){ //当修改input的style的属性的时候在ie6 ie7 ie8存在兼容性的问题//当input元素还未插入文档流之前，是可以修改它的值的，在ie和ff下都没问题。但如果input已经存在于页面，//其type属性在ie下就成了只读属性了，不可以修改。在ff下仍是可读写属性。 var olnp原创 2016-05-21 13:45:37 · 4712 阅读 · 0 评论 -
CSS兼容问题
CSS兼容问题原创 2016-08-15 07:31:03 · 284 阅读 · 0 评论 -
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 · 451 阅读 · 0 评论 -
使用浮动布局还是inline-block布局？
在上篇博客中对浮动做了介绍 http://blog.youkuaiyun.com/wmaoshu/article/details/52995912 浮动存在的问题也是很明显的，首先他会脱离文档流对父元素兄弟节点和孩子节点都有影响，那么为了实现对浮动布局的替代，那么我的考虑是使用inline-block。浮动和inline-block他们在文档流中排版方式相似，但是inline-block是基线对齐，浮动是原创 2016-11-03 18:25:31 · 2619 阅读 · 0 评论 -
css中基本的选择器
CSS在html css JavaScript中所处的位置，如下图所示。 至少说明了一点，CSS和JavaScript都是为html富含语义的文档内容服务的。从浏览器角度看，浏览器内核会将html文档解析成一棵DOM树，DOM树的每个节点都是一个元素，同时在我们使用者看来更像是一个个有某元素类型的对象。这些对象都有相应的属性和方法，其中有些属性代表着css的，比如width，height等属性原创 2016-10-15 15:35:06 · 478 阅读 · 0 评论 -
text-align存在的兼容性问题分析
text-align这个属性存在兼容性的问题，原因在于css2.1和css1之间标准规范不同，但是IE6IE7混杂模式下的IE8还遵循css1的规范。 CSS2.1规范如下： Text-align 应用于：块元素，表格单元格，行内块元素 有继承性 仅仅对“块元素，表格单元格，行内块元素”中的行内内容起作用。 CSS1规范如下： Text-align原创 2016-10-17 09:15:25 · 7944 阅读 · 0 评论 -
盒模型之padding
Padding 说明 值 值 长度值或者百分数值 初始值 未定义 应用于 所有元素 继承性 无 padding的值不能出现负值如果出现padding为负值的情况css解析引擎会忽略这行声明。要记住，在盒模型中只有margin为负值。 元素的背景色会延伸到padding<!DOCTYPE html><html lang="en"><head>原创 2016-10-17 13:28:01 · 596 阅读 · 0 评论 -
CSS系列目录
CSS系列目录原创 2016-12-26 11:03:00 · 1201 阅读 · 0 评论