发新话题
打印

块元素的水平布局

块元素的水平布局

块元素的水平布局
1.块元素在正常流中,即不float, 不定位的元素,其width+pdding+border+margin == 包含块的宽度;
2.可以设置 auto的水平属性有 margin-left,margin-right,width. padding,border,必须是定值或默认值0;
3.margin-left,margin-right,width其中一个为auto,  其他定值,则auto = 包含块宽度 - 非auto1 - 非auto2, 如:
   <div style='width:400px'><p style='width:auto;margin:100px;'> width = 400px - 200px == 200px</p><div>
4.如果margin-left,margin-right,width,三个都为定值,则称为overconstrained, 则margin-right被强制为auto;
5.margin-left,margin-right为auto,width为定值,则有居中效果;
6.width==auto,margin-left=auto,margin-right=定值,则过份宽松,margin 为auto的置为0,width可计算出:
附件: 您所在的用户组无法下载或查看附件

TOP

margin,padding,border,width,其中margin 可以为负值,其他都不行

TOP

1. 边框可以不指定颜色,不指定颜色时,则使用元素的前景色为边框颜色;
2. 元素的背景一直延伸至边框,所以,在边框为虚线时,可在缝隙中,看到背景色;
3. 什么是包含块?包含块就是最近的那个block,td,或者行内块;
4. block的布局,取决于包含块,而inline不一定;
5. 布局规则,一般是z字型流,但设置一个元素为浮动,或定位,可脱离这个流;
6. img,input都是替换元素;
7. 块组元素在流中,垂直摆放;等级元素横向连续摆放;


可替换块元素(img)布局
1. width为auto时,即为图片原始宽度
2. width为定值,则height同比例缩放

块元素的垂直布局
1. margin-top,和margin-bottom为auto时,等同为0
2. 子块高度为百分比,包含块必须显式指定高度,否则失效,任何百分比等同auto;
3. 只有当包含块,有上下padding,或border时,子块的margin-top,margin-bottom才会起作用。
4. margin可以纵向合并,也可以在不同层次的相邻margin合并,比如底图:
复制内容到剪贴板
代码:
<ul style='margin-bottom:15px;'><li style='margin-bottom:20px;'>hello,world.</li></ul><h1 style='margin-top:30px;'>Here is title</h1>
附件: 您所在的用户组无法下载或查看附件

TOP

5. 当包含块设置padding或border时,其margin只能与包含块的margin合并,不会与外面的margin合并,如:
附件: 您所在的用户组无法下载或查看附件

TOP

6. list-style-position:inside/outside 可以控制li是否包含marker.

行内元素
1. 行高取决于行内框;
2. 行内框对于可替换元素(img,input),取决于包含margin的框;
3. 行内框对于非可替换元素,取决于line-height;
4. 非可替换元素的内容区,即width,height取决于字体大小,显示设置无效;
结论:
1. 影响行高的因素有,非可替换元素的 line-height,可替换元素的 height,padding,margin;
2. 非替换元素的margin-top,margin-bottom,总被忽略;
3. 非替换元素的height,被忽略,其height被强制为 font-size;
4. 非替换元素的padding,会影响背景范围;

TOP

vertical-align
1. 可替换元素的baseline就是元素外边框底边;
2. middle不是指行框居中,实际是基线以上,0.25em处:


ex和em
ex一般为 0.5 * em,即假定小写x 高度为 font-size的一半大小
附件: 您所在的用户组无法下载或查看附件

TOP

1. p{line-height:20px;} 设置最小行框高,并应用到段落内行内元素。
2. line-height相同,字体不同,其行高可能大于line-height,因为字体基线不同:
附件: 您所在的用户组无法下载或查看附件

TOP

行框高度的算法
=======================================================================
复制内容到剪贴板
代码:
var LINE_BOX_ASCENDING = 0,LINE_BOX_DECENDING = 0,LINE_BOX_HEIGHT =0
for(所有行元素 -> I)
{
     var BASE,INLINE_BOX_HEIGHT
     if(I是可替换元素)
     {
         BASE = I字体.BASELINE
         INLINE_BOX_HEIGHT = inlineHeight; // 非替换元素的行内框高度,就是line-height
     }else
     {
         BASE = 0  // 替换元素的基线,就是底边
         INLINE_BOX_HIEGHT = I.height+I.padding+I.border+I.marginTop+I.marginBottom  // 替换元素的行内框高度,包括所有外边框
     }

     if(I.verticalAlign == super,baseline,sub,?px,text-top,text-bottom)
     {
        BASE = 需要调整..
        // 算出本元素的基线上部和下部
        LINE_BOX_ACENDING=max(INLINE_BOX_HEIGHT - BASE,LINE_BOX_ACENDING);
        LINE_BOX_DESCENDING=max(BASE,LINE_BOX_DESCENDING);
     }else if(I.verticalAlign == top,bottom,middle)
     {
        // 上下中对齐,跟元素基线无关,但要使 LINE_BOX_HEIGHT,足以容纳本元素。
        LINE_BOX_HEIGHT=max(INLINE_BOX_HIEGHT,LINE_BOX_HEIGHT);
     }
}
//行框高度,取决于基线上下高度,及top,bottom,middle对齐的元素的行内框高度
LINE_BOX_HEIGHT = max(LINE_BOX_HEIGHT,LINE_BOX_ASCENDING+LINE_BOX_DECENDING);

TOP

3. 字体基线是由字体文件决定,css无法更改。
4. line-height: 1,1.5指定不带单位的值时,表示相对于font-size的绽放因子

TOP

复制内容到剪贴板
代码:
<p style='font-size:30px;background:red'>
  <img style='border:solid 1px blue;' src='http://bbs.jatools.com/images/default/logo.gif'/>
  </p>
效果如下:

下边有空隙,原因是img默认vertical-align是 baseline, 该baseline取决于 font-size,和字体.
要去掉下面空格,可以使用 top,bottom,middle,
附件: 您所在的用户组无法下载或查看附件

TOP

1.inline-block ,行内布局规则,类似img
2.
复制内容到剪贴板
代码:
<span style='display:inline-block;height:90px'>inline block的height属性起作用</span>
3.
复制内容到剪贴板
代码:
<p style='display:inline-block;height:2em'>其宽度相当于auto</p>
4.如何让五个<a>占据一行,并均分行宽:
复制内容到剪贴板
代码:
a{display:inline-block;width:20%} /*非常好,inline-block是最好的解决办法,如果inline,则对其设置width无效*/
5.run-in可以使这个元素成为下一个块级框的内容:
复制内容到剪贴板
代码:
<h1 style='display:run-in'>Here is title!</h1><p>content here !</p>
附件: 您所在的用户组无法下载或查看附件

TOP

background 属性
1.body{background-image:url(a.gif);}   /*  x,y两方向平铺*/
2.background-position:top       // 等价 top center
3.background-position:水平% 垂直%,
4.background-position:x y    // 像素位置,相对于内边框
5.background-repeat : no-repeat/repeat/repeat-x/repeat-y
6.可使用负值使用图像中的某一部分,作为背景,这在有些js框架,如jquery ui中,构建图片按钮时,经常使用的技巧:
  一图像,300x300,使用右下角100x100像素作为背景,可以设:
复制内容到剪贴板
代码:
span.button{background-image:url(all.gif);background-repeat:no-repeat;background-position:-200px -200px}

TOP

浮动元素:
1. 浮动元素的margin不会被合并;
2. 浮动一个非替换元素,必须指定width,否则,宽度为0(css规范如此,其实在ie中,并不是必须)
3. 被浮动的元素,不论元素的本来类型,都被视为block 元素;
4. 浮动元素的包含块,是最近的块级祖先;
position
1. static ,relative为流中定位,不脱离流.relative只导致位置偏移,兄弟元素仍然按正常布局;
2. fix,absolute,为脱流定位,fix相对于视窗,即 html;
3. static,relative包含块是最近的block,td,inline-block;
4. absolute的包含块,是任何relative,fix,absolute取值的元素,可以是任何类型;
   如果是块元素,包含块为其内边框;
   如果是行内元素,包含块为其内容区,即inline-height(span),或外边框(img)围成的区域;
   如果没有这样的祖先元素,则为初始根元素(html或body);
5. 元素在包含块外面,也是合法的;
6. relative定位后,大小不变。absolute定位后,视为块级元素,所以高宽可变;
7. 如何占据右下角?解:
复制内容到剪贴板
代码:
span.占右下角{position:absolute;top:50%;left:50%;bottom:0px,right:0px;} 注意,top/bottom/left/right是对包含块四边的偏移;
8. 我理解 ,定位布局是在确定包含块大小之后进行的,所以,任何定位不会影响包含块的自动高度:
附件: 您所在的用户组无法下载或查看附件

TOP

9. 当按百分比,指定offset 时,不要同时指定 width,height百分比,否则容易超出包含块;

10. visibility: hidden; 不可见,但占位
    display:none; 不可见,也不占位
11. 可以设置一个position为relative,且不偏移的元素作为绝对定位的包含块;
12. absolute时,left,top,right设置为 auto,意味着,其流中应该出现的位置,但取不到 bottom的静态位置;
13. 默认 static 的元素,设置left,top无效;

z-index:
1. 可以把z-index , 想象成在屏幕上建造的高楼,其楼层数越高,离我们越近;


table布局
1. col,colgroup,合法的css属性有: background,width,border,visibility;
2. table 的 border-collapse == collapse时,col/colgroup的border设置才管用;
3. tr,td的background为transparent时,col/colgroup的background才可见;
4. col/colgroup的width,指出单元格可用的最小宽度,实际可能超过;
5. <table cellspacing='?'>的对应css属性是 border-spacing
6. table没有padding,但可以有 margin;
7. table,tr,td,col,colgroup都可以有边框;
8. table-layout==fixed的表宽度算法
   a. 取所有col的width值,
   b. 如果是定值,则该列宽,取该值;
   c. 如果是auto,取第一行的对应单元格的width,如果是定值,则取该值,如果是auto,不知道咋取?没理解!
   d. max(各列总和,table.width),如果各列总和< table.width,则多余的均分加到各列;
   结论: 可以设置 table{width:0},或者干脆不设置,这样,table的实际宽度,总等于各列宽度之和;
9. table{width:auto} 可能覆盖 table-layout的值,自动强制为 table-layout:auto;
10. td的text-align属性,类似块级框;
11. td的vertical-align: top/bottom/middle,

TOP

发新话题