忍者ブログ
いろいろ
2024-031 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 prev 02 next 04
15  14  13  12  11  10  9  8 
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

いまさらな自分用おさらい

ブラウザは

Firefox 2.0.0.9
Internet Explorer 7.0.5730.13
Opera 9.24

一部ライブラリに

Prototype 1.6.0

で、確認
要素はdiv

----

element.style.width / height
    内容が表示される領域のサイズ
    border,padding,marginは含まない
   
client area な理解

computed width / height (getWidth() / getHeight() @  prototype.js)
    border,paddingを含んだサイズ
    marginは含まない

element.style.top / left / right / bottom
    border,paddingを含んだ領域の位置
    marginは含まない
    つまり実際にはmargin分ずれて表示される
    取得時にもmarginは加味されない

positioned offset top / left (positionedOffset() @ prototype.js)
    border,padding,marginを含んだ領域の位置
    取得のみ + top,leftのみ
    例えばstyleで top: 2px; left: 2px; margin:4px; のとき
    positioned offset は [6px,6px]
    要はcontainer代わりの祖先要素のclient area(に相当する部分)からの相対位置

----

センタリング

CSS的にはセンタリングされる要素のmarginで設定して欲しいそうな
margin-left:auto ; margin-right:auto ;
が、ブラウザ対応がいまいち。
個人的に、センタリングされるほうで指定するのはなんか気持ちが悪いのですが。

<div align="center">...</div>
ブラウザ対応的には無難。
だがしかし非推奨。
alignは子孫要素にも継承されるっぽいので注意。

<div style="text-align: center">...</div>
自分および子孫のインライン要素に対する指定なのでブロック要素には無意味。
のはずだけどIEだとバージョン+DOCTYPE次第でブロック要素にも効いたり効かなかったり。
alignの代替表記というのはガセ。意味が違う。

----
PR
NAME
TITLE
COLOR
MAIL
URL
COMMENT
EMOJI
Vodafone絵文字 i-mode絵文字 Ezweb絵文字
PASS
TRACKBACK URL 
blog.Calendar
02 2024/03 04
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
フリーエリア
とくになし
blog.RecentComments
[08/14 山本さん]
[03/07 NONAME]
[11/24 けーぞー]
[04/11 NONAME]
[04/11 NONAME]
blog.RecentTrackbacks
blog.Search()
"Nag" WROTE ALL ARTICLES.
PRODUCED BY SHINOBI.JP @ SAMURAI FACTORY INC.
忍者ブログ [PR]