@寒冬winter 大神的css作业问题

块级元素

 

①总是在新行上开始；
②高度，行高以及外边距和内边距都可控制；
③宽度缺省是它的容器的100%，除非设定一个宽度。
④它可以容纳内联元素和其他块元素

行内级元素

 

①和其他元素都在一行上；
②高，行高及外边距和内边距不可改变；
③宽度就是它的文字或图片的宽度，不可改变
④内联元素只能容纳文本或者其他内联元素

替换元素

替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。

比如：<input /> type="text" 的是，这是一个文本输入框，换一个其他的时候，浏览器显示就不一样

(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素，这些元素都没有实际的内容。

非替换元素

(X)HTML 的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。

比如<p>wanmei.com</p>

浏览器将把这段内容直接显示出来。

块容器

 

没到找资料 求资料

 

 

包含块

根元素
默认条件下，html元素为包含块，一些浏览器把body设为包含块。

非根元素分为两种情况：

1、对于没有设置position:absolute的非根元素如position:relative position:static
这种情况下包含块设置为最近的块级元素内容区的边缘，注意是内容区的边缘，而不是margin和padding边缘。

2、使用了position:absolute绝对定位的元素，
这种情况下包含块设置在最近的postion不是static的祖先元素(这里的祖先元素可以是块级元素，也可是内联元素)
a、如果祖先元素是块级元素，包含块设为该块级元素的padding边
沿
b、如果祖先元素是内联元素则包含块设为该内联元素的内容边沿

定位：
“相对于”是相对于元素在文档流中的初始位置。
“绝对”是相对于最近的已定位的祖先元素。

绝对定位会覆盖页面上的其他元素，可以通过z-index属性来控制堆放顺序。

流动布局中的相对定位：
流动布局是默认的布局，自然的从左到右，从上到下。
如果元素position:relative并且设置了坐标，该元素则会以原位置为坐标进行偏移

块级上下文

http://lllt.iteye.com/blog/1440532 这里有演示实例

Block Formatting Context （块格式化上下文）是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。

在创建了 Block Formatting Context 的元素中，其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于 'margin' 特性。在 Block Formatting Context 中相邻的块级元素的垂直边距会折叠（collapse）。

以上是关于BFC的相关概念和一点解释，引自：w3help

BFC的用处：

非 BFC 元素，会忽略其添加 float 的子元素的高度值；其上下边距会与子元素的边距产生折叠；其内、外部的float元素会对自身以及其子元素布局产生影响。

触发 BFC 是解决这三个问题的有效方式。这也就是为何可用overflow:hidden来清除浮动等问题的原因。

触发BFC的条件：

1. "float"的值不是"none"
2. "overflow"的值不是"visible"
3. "display"的值是"table-cell"
4. "table-caption",或"inline-block"
5. "position"的值既不是"static"也不是"relative"

以上是网络上普遍的答案，但并未给出具体触发后相关元素的特点，以及该如何使用

行内上下文

http://www.w3help.org/zh-cn/kb/010/

行框( line boxes )

相对于块格式化上下文，在行内格式化上下文中，框( boxes )一个接一个地水平排列，起点是包含块的顶部。 水平方向上的 margin，border 和 padding 在框之间得到保留。 框在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐。 包含那些框的长方形区域，会形成一行，叫做行框。

示例代码：

<p style="background-color:silver; font-size:30px;">TEXT1<span style="border:3px solid blue;">text in span</span>great1<em style="border:3px solid red;">thx a lot</em>bee<strong style="border:3px solid green;">give me 5!</strong>Aloha!</p>

以上代码中，无换行符及空格，共形成了 7 个行内框。

示意图：

行框的宽度由它的包含块¹和其中的浮动元素决定。高度的确定由行高度计算规则决定。

html中的换行造成空格问题的探讨

对于html内置的内联级标签以及表单元素标签，源代码中连续几个内联级标签中的换行在浏览器中会被解释为一个空格。

包括ie和ff。而这个空格是会被当作一个空白节点（nodeType等于3的节点，就是文字节点）。

对于html内置的块级标签使用了display:inline;则没上述问题。

对于html内置的块级标签之间的换行，ff会当作一个空白节点（用js可以获取到），ie则会忽略掉这个换行。

这个换行在ie和ff的页面上并无任何影响，不会出现空格。