css+divレイアウトでよく使われるメソッド ㈠_html/css_WEB-ITnose

CSS布局常用的方法：float : none | left | right

取值：
none :? 默认值。对象不飘浮
left :? 文本流向对象的右边
right :? 文本流向对象的左边

它是怎样工作的，看个一行两列的例子

xhtml:

这里是第一列

这里是第二列

CSS:

#wrap{ width:100%; height:auto;}
#column1{ float:left; width:40%;}
#column2{ float:right; width:60%;}
.clear{ clear:both;}

position : static | absolute | fixed | relative

取值：

static :? 默认值。无特殊定位，对象遵循HTML定位规则
absolute :? 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义
fixed :? 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative :? 对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置

它来实现一行两列的例子

xhtml:

这里是第一列

这里是第二列

CSS:

#wrap{ position:relative;/*相对定位*/width:770px;}
#column1{ position:absolute; top:0; left:0; width:300px;}
#column2{position:absolute; top:0; right:0; width:470px;}

他们的区别在哪?

显然，float是相对定位的，会随着浏览器的大小和分辨率的变化而改变，而position就不行了，所以一般情况下还是float布局！

2.CSS常用布局实例

一列
单行一列

body { margin: 0px;   padding: 0px;  text-align: center;  }
#content {  margin-left:auto;  margin-right:auto;  width: 400px;  width: 370px; }

两行一列

body {  margin: 0px;   padding: 0px;   text-align: center;}
#content-top { margin-left:auto;   margin-right:auto; width: 400px;  width: 370px;}
#content-end {margin-left:auto; margin-right:auto;  width: 400px;   width: 370px;}

三行一列

body {  margin: 0px; padding: 0px;  text-align: center;  }
#content-top {  margin-left:auto;  margin-right:auto;  width: 400px;   width: 370px;  }
#content-mid { margin-left:auto; margin-right:auto;  width: 400px;  width: 370px; }
#content-end { margin-left:auto; margin-right:auto; width: 400px;  width: 370px; }

两列
单行两列

#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto;  }
#bodycenter #dv1 {float: left;width: 280px;}
#bodycenter #dv2 {float: right;width: 410px;}

两行两列

#header{    width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}
#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
#bodycenter #dv1 { float: left; width: 280px;}
#bodycenter #dv2 { float: right;width: 410px;}

三行两列

#header{    width: 700px;margin-right: auto; margin-left: auto;  }
#bodycenter {width: 700px; margin-right: auto; margin-left: auto;  }
#bodycenter #dv1 {  float: left;width: 280px;}
#bodycenter #dv2 { float: right;  width: 410px;}
#footer{     width: 700px;  margin-right: auto; margin-left: auto;  overflow: auto;  }

三列
单行三列
绝对定位

#left { position: absolute; top: 0px;  left: 0px; width: 120px;  }
#middle {margin: 20px 190px 20px 190px; }
#right {position: absolute;top: 0px; right: 0px;  width: 120px;}

float定位

xhtml:

这里是第一列

这里是第二列

这里是第三列

CSS:

#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}

float定位二

xhtml:

  

This is the main content.

  

This is the left sidebar.

  

This is the right sidebar.

CSS:

body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;}
.column {position: relative;float: left;}
#center {width: 100%;}
#left {width: 180px; right: 240px;margin-left: -100%;}
#right {width: 130px;margin-right: -100%;}

两行三列

xhtml:

这里是顶行

这里是第一列

这里是第二列

这里是第三列

CSS:

#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}

三行三列

xhtml:

这里是顶行

这里是第一列

这里是第二列

这里是第三列

这里是底部一行

CSS:
#header{幅:100%; 高さ:自動;}
#column{ float:left;}
#カラム 1{ フロート: 左; 幅: 30%;}
#column2{ フロート: 右; 幅: 30%;}
.clear{ クリア: 両方;}
#footer{width:100%; height:auto;}

PS: ここにリストされているのは一般的に使用される例であり、研究目的ではありません。幅の位置決めが含まれている場合は、絶対に必要な場合を除き、使用しないのが最善です。そうでない場合、ブラウザーの互換性の問題を解決するのに頭が痛くなり、一連の CSS コードが生成されると思います。効率も効果も良くない！

3. 高度な CSS レイアウト スキル

マージンとパディングは常に使用される可能性がありますが、引き起こされる問題を解決するにはどうすればよいでしょうか?ブラウザーはコンテナーの幅をさまざまな方法で解釈するため、

IE 6.0 Firefox Opera などは
real width=width+padding+border+margin
IE5.X
real width=width-padding-border-margin

明らかに、まず、ある状況では完璧なレイアウトであっても、次の状況では悲惨な結果を招く可能性があります。

解決策はハックです


div.content {
width:400px; //これは間違った幅です、すべてのブラウザはそれを読みます
voice-family: ""}""; //IE5.X/ win は無視しますcontent after ""}""
voice-family:inherit;
width:300px; //IE6/win を含む一部のブラウザはこの文を読み取り、新しい値 (300px) が古い値を上書きします
}
html>body .content { //html>body は CSS2 で書かれています
width:300px; //CSS2 (IE5 ではありません) をサポートするブラウザは幸運にもこの文を読むことができます
}

div.content {
width:300px ! important; !重要なタグをサポートするほとんどのブラウザは、ここで値を使用します
width (space)/**/:400px; したがって、IE6/win はこの文を解析しません。 width は 300px; IE5 の場合は .content { //html>body は CSS2 記述法です
width:300px; //CSS2 記述法をサポートしているブラウザは幸運です
}


コラムとその他の高度なスキル

n 行 n 列のレイアウト、各列が同じ高さ (列の高さは事前に決定できない) は、すべてのデザイナーが追求する目標です。その方法には、背景画像の塗りつぶし、JS スクリプトの
メソッドの追加、およびコンテナー オーバーフローが含まれます。列の負の下部境界線と正の内部境界線を非表示にする部分のパッチの組み合わせ方法。

背景画像の塗りつぶし方法:

xhtml:

これは最初の列です

column1">これは 2 番目の列です

css:

#wrap{ width:776px; background: url(bg.gif)repeat-y 300px;}
#column1{ float:left; width:300px;}
#column2{ float:right; width:476px;}
.clear{ clear:both;}

それこれは、npx 幅の画像を外部コンテナ内で垂直に繰り返し、2 つの列の互い違いの位置に配置し、垂直に繰り返すことで、2 つの列が同じ高さであるかのような視覚的な錯覚を作成します