absolute布局和css布局释疑

jqueryui也不是万能的,

有时候, 也需要自己写一些, 由 css 和jquery结合的一些东西, 如: banner中, 依次播放的div等

## 关于jquery设计的一些思想和理念?
button是html5中的概念. button...content  /button 中间的内容都会出现在button上.
平时, 我们看到的 "数字" 外面的东西, 如边框 图片 背景等等都是css style样式的东西.
凡是: 多个地位平等的东西, 并列的东西, 滑动的东西等等, 实际上都是通过 列表的方式来写的:
列表有三：　　UL，　 OL,  dL.
```
    写web的三步走:
    结构（ｈｔｍｌ）
    样式(.class, style) **首先清除所有样式: **{padding:0; margin:0; list-style:none; border:0}**
    最后是jquery.
```
一般写zen coding的时候, 比较少的使用*N, 是因为其中并列的部分, 通常是通过复制来的, 使用*N, 反而会事复制受到影响.

<font color="red"> 为什么写html的时候, 多用class少用id? </font>
    class是类, id是文档结构的概念?
    定位到一个类class所消耗的系统开销比定位到一个id的开销更少, 更快.
    class可以叠加, id是唯一的, 而用addClass 和 removeClass, 使得使用类比id更灵活.

 ## css的 postition=absolute和float: left?的区别?

一般来说, 像 position/ float等定位的使用, 都要一个 大的外部包含框(容器框, 父框), 使得position/ float的使用, 只在该大的包含框中,

而 该包含框是static或relative top/left=0的这样不会对文档流中该div上面和下面的内容造成影响. 很少会在body中鲁莽的直接使用的
 
所以, position和float都是两种元素定位的方法, 看你的目的而言, 来选择使用的方法, 都重要都需要!

 

一般的使用场景:

如果要使本来默认的垂直排列的 block级元素要 横向排列, 使用float: left/right;

如果要使某些元素在父容器的空间, 按照我们的意图, 任意定位到某个位置, 用position:...
 
那一般外部大的 容器框为static默认的, 或者relative top/left=0, 父框的位置相对于普通文档流都不会变化, 为什么还要用relative呢?

答:　是为了 满足:  当 子div要使用 position: absolute时, 子div要寻找除static以外的 直接 祖先元素的需要 而设置的.

如果没有absolute, 通常就没有必要使用relative了!

-----------------------------------------------------

position 和 float 两者都是css的样式;

其中, position主要是偏向于布局方面的, 从其可能的值也可以看出.

而float主要是偏向于 "图文混排"类似于文字排版的.

position可能的值 :　子绝父相

值	描述
absolute	生成绝对定位的元素，<font color="red">相对于 static 定位</font>以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

一般banner中div呈幻灯片效果的设计方法是
先设置一个大的div 作为整体的容器, 要设置容器的大小宽高/ 设置: overflow: hidden; position: relative;

然后, 设置 ul, ol的样式 可能是position: absolute, z-index: -1,0,1,2...

最后才是设置li的样式.

绝大多数灵活布局控制其实都需要float+position匹配的方式来实现，区别在于主次。

一段时间内，不要使float做主布局，浮动的逻辑不是那么纯粹。

“两者按需使用，各得所需的效果”，并且两者应该各有侧重，比如在整体分栏上使用float就比用position要合理，

而position更适合用来做局部效果微调，还不能对页面中同类单元比较多的元素使用position。

相信很多人都有这样的问题，在页面布局中float和position:absolute哪个更好用呢？

既然是布局，就用float好，这个我比较常用。这个浮动是可以清除的，一般不会影响整体布局。

而position，定位，是不受约束的，这个貌似都谈不上布局了，一般要是做什么特殊的定位或者浮动层的时候，可以考虑使用。

正常页面布局，我个人建议用FLOAT

关于写css的层次性问题?
写css, 也要体现/ 用层次/树形的结构和思想去写:

一般为了便于控制和jquery的定位,  以及html的 模块化结构,  通常是用div来组成" 模块" .

通常是 给 模块化的 外面的 "大的"div 一个类(通常不用id), 然后在该类 中进行层次化/树形结构的子元素(这时候一般class就用得少些

了, 当然也有用的) style样式的书写, 如:

.all {

.......

}

.all ul{

.....

}

.all ol{

....

}

.all ol li{

....

}

浮动float元素的排列方法?n

看这个w3school上的链接:

http://www.w3school.com.cn/css/css_positioning_floating.asp

在css中, 任何元素都可以浮动, 而不管原来的元素是何级别

浮动的主要适用场景:
主要是用在布局中：当多个div块级元素在一个div容器中时, 块级元素默认是占一行的, 所以会纵向排列
很多时候, 想要这些div水平排列,这时候, 就要用到float(简单的说, 就是要求：　块级元素 横排的时候)

最多的情形:
    主要是要求, float的多个块, 是等高 等宽的, 而且不会超过父容器的宽和高,
否则float很容易出错!(当父容器的宽度不够时, float元素会下降, 如果浮动元素的高度不同, 浮动元素
可能会被卡住.)

float的排列方法:  w3school上的权威解释:
第一，　由于浮动框不在文档的普通流中(就是说, float要脱离文档流. )，所以文档的普通流中的块框(注意是块框, 不是所有的元素)
表现得就像浮动框不存在一样。(而实际上行内元素/内联元素, 如span等是不会忽略这些float元素的, 所以才形成图文混排的效果)

 

注意这个不占文档空间 , 这个空间 , 是说的块级空间, float框不会占据块空间, 会覆盖在div块的上面,

但是, 它会占据 行框 空间, 所以就形成了" 图文混排"的效果

 

也可以这样理解: float浮动框和div等块框不是在同一个平面空间, float框和行内元素在同一个平面空间,所以, float对div没有影响,但是对span等布局有影响.

第二，　ｆｌｏａｔ框究竟该怎样排?   浮动的框可以向左或向右移动，直到它的外边缘碰到包含框(父容器)
或另一个浮动框的边框为止。 (所以说, float一定要给一个 父容器, 放在包含框中,不然就跑到body最前面最上面的位置了.)

关于浮动元素的一个问题?(float跑到空的div容器外)

如果包含浮动元素的div中, 没有其他内容, 全都是float的, 由于float脱离文档流, 那么该div由于内部为空, 这时候, 外部的div的空间就为0.

根据float元素如果超出了容器的范围, float元素将会" 脱离 "空的"div的包围, 而跑到div的下方去!

应用float的clear?

第一,  注意应用clear样式的元素, 并不是float浮动框, 而是浮动框周围的 行框/或div框等等.

第二, 为什么要应用clear?  原本: 是为了解决:  图文混排时, 行框(文字框)将会缩短, 给浮动框 留出空间. 从而实现图文混排.

但是, 如上所述, 会出现 div全部为float元素时, div会成空, 而使 float元素跑到div的下方去的问题.

解决方法有两种:

一是, 添加一个空的div, 对这个纯粹是为了布局的需要 而使用的div , 应用 clear: both. (注意, clear只是在左右方向left, right没有上下)

二是, 对div容器本身 也使用 float. 但是会影响div容器后面的元素, 所以  [有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。这有助于减少或消除不必要的标记。事实上，W3School 站点上的所有页面都采用了这种技术，如果您打开我们使用 CSS 文件，您会看到我们对页脚的 div 进行了清理，而页脚上面的三个 div 都向左浮动。]

<em>在文本中加入强调也需要有技巧。如果强调太少，有些重要的短语就会被漏掉；

如果强调太多，就无法真正突出重要的部分。这与调味品一样，最好还是不要滥用强调。

尽管现在 <em> 标签修饰的内容都是用斜体字来显示，但这些内容也具有更广泛的含义，

将来的某一天，浏览器也可能会使用其他的特殊效果来显示强调的文本。如果你只想使用斜体字来显示文本的话，请使用 <i> 标签。

<em><strong><i><b>的区别?

使用html标签, 要真正的理解其 语义!  以便在最恰当的地方使用最恰当的标签.

<i>和<b>仅仅只是文字外形上的变化, i成倾斜, b成粗体

<em><strong>则更多的/ 都/ 具有具体的语义上的表达.

em是局部的, 具有语义上的作用, 如: <p>1cats 2are  3cute animals 在1,2,3位置处添加<em>标签, 表达的强调 的语义 是不同的

strong则是全局的强调, 表示重要性的强调, 如:＜strong> warning, important</strong>

参考http://www.blueidea.com/tech/web/2008/6342.asp

三种字体单位px, em, pt的用法

px: 像素, 也是一种相对单位, 相对于(屏幕)像素的单位. html页面中的文字和图片的 大小 跟屏幕的分辨率的设置有关...

em: 也是一种相对单位, 相当于%, 是字符大写字母M的宽度.有两个用法:

一是, 表示字符的相对宽度.  二是用来表示字体大小, 这时候的用法是: 在父元素中使用em, 由于子元素会继承父元素的大小, 所以,

可以只调节一个父元素的大小, 就可以调整所有子元素的大小, 这样就很方便.

pt是一种绝对单位, 1pt=1/72inch, 通常用在word打印中, 便于打印到纸张上的文字大小总是一致的.

em和px的换算: 默认的1em=16px, 1px=0.0625em, 所以在<body style="font-size: 62.5%">就可以实现1em=10px....

使段落的首字母浮动于左侧

使段落的首字母浮动于左侧，并向这个字母添加样式。

<style type="text/css">

span
{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
</head>

<body>
<p>
<span>T</span>his is some text.

line-height和基线base-line

行高是指 文本行之间基线 之间的距离, 但是文本之间的空白距离不仅仅是行高决定的，同时也受字号的影响。

而基线（Base line），指的是一行字横排时下沿的基础线，基线并不是汉字的下端沿，而是英文字母x的下端沿，

同 时还有文字的顶线（Top line）、中线（Middle line）和底线（Bottom line），用以确定文字行的位置，如图7-17所示。

行高与字体尺寸的差称为行距（leading）

行高line-height= 字体高度font-size + 行距 line-space

两个概念:　行内框inline-box, 和行框 line box的区别?

都是虚拟框, 无法显示, 但是确实存在, 并影响布局...

这里的意思是: inline-box line-box的边框是虚拟框, 是无法显示的, border: 1px solid red; 只会显示仅仅包含文字内容的那部分区域的边框线.

1  在没有设置行高的情况下, 行内框等于内容区域, 即等于字体高度

2 在设置了行高的情况下,  行内框: = 字体高度 + 上下各增加  行距的1/2, 因此, 此时 该元素的行内框 = 行高

3 由于 同一行内 , 多个float的<p> 或 <span>文本元素, 可以分别设置行高,  因此 各个元素的行内框 可以不同

　　那么在同一行内,  所有这些行内框中,  最大的那个行内框, 就叫做 这一行的 行框. 也就是说, 行框= 所有元素中, 最大的那个行高(line-height).

4 而且, 如果文本有多行, 那么, 每一行都有自己独立的/ 可以不同的  行框!

5  注意：行框的高度只同本行内元素的行高有关，而和父元素的高度（height）无关

6  用line-height只对文字起作用 对于图片时失效

 该值不能使用负值，使用了也无效的

需要注意的是,在各浏览器下对于line-height的解决也是有细微 的区别的,上下会有1px的差别,如果行高是偶数的话,大部分浏览器解释还是比较正常,如果是奇数的话,有些浏览器会上比下多1px,而另一些浏览器会下 比上多1px,对于有些要求比较严格的网站,建议行高设计时用偶数

 

在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。

实际上, 这里是把 英文 文字 划分成为 4行, 而不是传统的3行,  x占2行, x的中心线 称为middle line

CSS的框模型?

css中, 一切元素都是框,  每个元素都会生成 一个 包含其内容 的 框.

元素分类:

可替换元素，　浏览器根据元素标签的类型和属性来 决定其显示内容, 如img根据src, input根据 type来显示. 一般都是空元素...

不可替换元素, 就是其包含的值不可更改,如<span>文字</span>

 

元素的类型也不是固定的，通过设定CSS 的display属性，可以使行内元素变为块级元素，也可以让块级元素变为行内元素。

 

根据元素的显示方式, 分为:

块级元素, 和 行内元素(inline , 内联元素).

 

 

所有的行内元素(span,img,input)都具有框模型中规定的所有属性(width margin border padding)，(只是说具有, 但没有说一定有效!)

但通过css自定义的某些属性对于某些元素来说是没有效果的，也就是说浏览器会忽略你设定的某些属性。

• 当对行内 非替换元素(Inline, non-replaced elements)设定 width、height、(内外边距 的上下属性 )margin-top、margin-bottom、padding-top、padding-bottom (这6个属性) 等css属性时将被浏览器忽略
• 块级元素默认宽度为父元素的整个宽度
• 浮动元素的默认宽度为 能包含其内容的最小宽度

关于 行高, 参考这个:　http://www.ddcat.net/blog2005/archives/2008/06/227.html

-----------------------------------------------------------------------------------

inline和text-align, vertical-align? display: inline-block