CSS Web ページのレイアウトについての深い理解 - Theory_html/css

CSS Web 開発レイアウトでは、簡単に開発できるようにフローティングと配置について深く理解する必要があります。

これに基づいて、これらの要約は、いくつかの本を読んだ後の実践的な経験と理解に基づいて作成されました。主な内容は、フローティング、フローティングのクリア、ポジショニングです。

(画面左側のディレクトリをクリックして表示できます)

1. float 属性を深く理解します

まず、簡単なレイアウト、コードは次のとおりです:

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>css Test</title><style type="text/css">#bigBox {    border: 2px solid Gray;    width: 500px;    height: 400px;    margin: 100px auto;}#box1{    background: yellow;    width: 100px;    height: 100px;}#box2{    background: SkyBlue;    width: 120px;    height: 100px;}#box3{    background: pink;    width: 140px;    height: 100px;}</style></head><body><div id="bigBox">    <div id="box1">1</div>    <div id="box2">2</div>    <div id="box3">3</div></div></body></html>

ログイン後にコピー

レンダリング:

Picture p1

1. ドキュメントフローから切り離します

ドキュメントフローから切り離されます。つまり、要素の元の位置から切り離されます。これはフローティングとして理解できますが、一部の詳細は変更する必要があります。に注意を払った。

詳細 1

浮動要素の背後に非浮動要素がある場合、その背後の非浮動要素は浮動要素が消えたとみなして、その位置に押し込みます。

テストしてみましょう: 2 番目の div (id=box2) に float を設定し、3 番目の div の位置を観察します

#box1{    background: yellow;    width: 100px;    height: 100px;}#box2{    background: SkyBlue;    width: 120px;    height: 100px;    float:left;/*测试内容*/}#box3{    background: pink;    width: 140px;    height: 100px;}

ログイン後にコピー

レンダリング:

Picture p2

3 番目の div が表示されます。 div がプッシュされていますここでの float: left は right に設定されます。つまり、2 番目の div が消え、次の div が上に押し上げられます。

レンダリング:

Picture p3

詳細 2

レンダリングでは確認できますが、float を設定した後、この要素が設定されていない float 要素の上に完全に浮くということは理解できません。詳細には、1 が上に浮かんでいます (3 の上に 2)。この詳細は、フローティングは後続の要素にのみ影響し (いわゆる影響とは、後続の要素がそれを消滅したとみなすことを意味します)、その前の兄弟ブロック要素の位置には影響しません。 (つまり、前の兄弟ブロック要素が浮動に設定されていない場合、この要素の上に浮動しません)。 p1 の例の詳細 1 では、この機能が検証されています (2 はまだ 1 未満です)。

それでは、1 位にランクされている同じレベルのインライン要素はどうでしょうか?同じレベルの inline 要素の場合、float 属性が設定されている要素は、前の inline 要素と同じレベルに属し、同じレベルの前の inline 要素よりも高い優先度を持ちます。ここでの優先度は、位置優先度を指します。 float: left のような場合、前のインライン要素がもともと左端の位置を占めていた場合、その優先順位は浮動要素よりも低いため、浮動要素に道を譲り、浮動要素の右側にランクされます。

テストコードを見てみましょう (コメントのテスト内容に注目してください):

#box1{    background: yellow;    width: 100px;    height: 100px;    display: inline-block; /*测试内容*/}#box2{    background: SkyBlue;    width: 120px;    height: 100px;    float:left;  /*测试内容*/}#box3{    background: pink;    width: 140px;    height: 100px;}

ログイン後にコピー

レンダリング:

Picture p4

分析: 1 の場合 (ここでの数字は、対応する div を表し、上下同様）例えば、float 2 よりも前にあるので、ブロック要素であるかどうかに関係なく 2 と同じレベルに属します。また、ブロック要素ではないので、その位置の優先順位はです。 2 よりも低いです。 2 の float: left なので、左端にフロートされ、1 はその右に絞られます。 3の場合、2はfloatなので消滅したものとみなされますが、3はブロック要素なので排他行を占有するので上記の効果が得られます。

詳細3

テキストは常に絞り出されます。 1 と 2 を float に設定し、3 をコメントにして、p タグを追加します。状況を確認してください:

<div id="bigBox">    <div id="box1">1</div>    <div id="box2">2</div>    <!-- <div id="box3">3</div> -->    <p>HelloWorld! HelloWorld! HelloWorld! HelloWorld! HelloWorld! HelloWorld! HelloWorld! HelloWorld! HelloWorld! HelloWorld! 10个HelloWorld！</p></div>

ログイン後にコピー

写真 p5

実際には、P 要素と 1 と 2 の浮動要素が並んでいるわけではありません。詳細 1 と 2 では、p 要素が配置されていることがわかります。は上から 1 の位置にある必要がありますが、テキストは常に押し出されるため、2 の左側に押し込まれます。このとき、テキストの折り返し効果が得られます。実際の状況を確認するには、P 要素に背景色を追加します。

p {    background-color: red;}

ログイン後にコピー

図 p6

2. 固定サイズのない親要素は、浮動子要素に適応できません (すべての子要素は浮動しています)

同様に、親要素がドキュメントフローに属している場合、子要素がフローティングに設定されている場合も、親要素はそれをラップしません。親要素内に要素がない場合、子要素は子要素が空である場合と同じように動作します。

まず、フローティング要素のないドキュメントフローの状況を見てみましょう:

コード:

body {    margin: 0 300px;}#bigBox {    border: 2px solid Gray;/*    width: 500px;    height: 400px;*//*测试内容：这里要设置去掉宽高*/    margin: 100px auto;}#box1{    background: yellow;    width: 100px;    height: 100px;}#box2{    background: SkyBlue;    width: 120px;    height: 100px;}#box3{    background: pink;    width: 140px;    height: 100px;}

ログイン後にコピー

<body><div id="bigBox">    <div id="box1">1</div>    <div id="box2">2</div>    <div id="box3">3</div></div></body>

ログイン後にコピー

レンダリング:

Picture p7

ここに div (id=bi) gBox、親1、2、3 の要素には幅と高さが設定されていないため、子要素の幅と高さが自動的にサポートされます。1、2、3 はすべてブロック要素であるため、排他的な行を占有します。幅は本体の幅に自動的に適応するため、レンダリングに示されているように、これはフローティングなしの場合です。

2 をフロートに設定して効果を確認してみましょう:

#box2{    background: SkyBlue;    width: 120px;    height: 100px;    float: left; /*测试内容*/}

ログイン後にコピー

レンダリング:

Picture p8

親要素はまだ適応できますが、2 は消滅したものとみなされます。

すべての子要素をフロートに設定して、効果を確認してみましょう:

body {    margin: 0 300px;}#bigBox {    border: 2px solid Gray;/*    width: 500px;    height: 400px;*/    margin: 100px auto;}#box1{    background: yellow;    width: 100px;    height: 100px;    float: left; /*测试内容*/}#box2{    background: SkyBlue;    width: 120px;    height: 100px;    float: left; /*测试内容*/}#box3{    background: pink;    width: 140px;    height: 100px;    float:left; /*测试内容*/}

ログイン後にコピー

图p9

我们把1,2,3去掉，查看没有子元素的父元素的效果图，然后对比一下：

<body><div id="bigBox">  <!--   <div id="box1">1</div>    <div id="box2">2</div>    <div id="box3">3</div> --></div></body></html>

ログイン後にコピー

图p10

结果和p9是一样的，也就是p9中父元素把1,2,3视为消失了。

二. 清除浮动

1. 清除浮动方法（非父元素受影响）

方法一：设置clear属性，这个属性设置在受影响的元素（非父级）上

clear属性值有left，right，both，一般情况下对使用both清除浮动，我们来看一下：

#box1{    background: yellow;    width: 100px;    height: 100px;}#box2{    background: SkyBlue;    width: 120px;    height: 100px;    float: left; /*测试内容*/}#box3{    background: pink;    width: 140px;    height: 100px;    clear:both; /*测试内容*/}

ログイン後にコピー

图p11

请对比p2，可以这样形象理解，把原来2的消失变成了可见，然后就排在它的后面。

方法二：额外添加一个空元素，并设置clear属性

<div id="bigBox">    <div id="box1">1</div>    <div id="box2">2</div>    <div id="clear"></div> <!-- 测试内容 -->    <div id="box3">3</div></div>

ログイン後にコピー

#clear {    clear: both;}

ログイン後にコピー

同样可以达到预期效果：

图p12

2. 清除浮动方法（父元素受影响）

图p7中我们看到父元素把子元素1,2,3视为消失，所以无法自适应子元素的宽度，为了消除子元素浮动对父元素的影响，这里有三个方法可以解决问题，我们来测试分析一下。

先把父元素受影响的代码和效果图贴出来：

        css Test<body><div id="bigBox">    <div id="box1">1</div>    <div id="box2">2</div>    <div id="box3">3</div></div></body>

ログイン後にコピー

图p13

方法一：在父元素里面添加一个空的子元素，放在最后面，并设置clear属性

<div id="bigBox">    <div id="box1">1</div>    <div id="box2">2</div>    <div id="box3">3</div>    <!-- 这是一个清除浮动的空标签 -->    <div id="clear"></div></div>

ログイン後にコピー

效果图：

图p14

分析：原理很简单，空div设置了clear属性，所以它不受前面1,2,3的影响，所以它就会排在1,2,3的后面，造成了空div与顶部之间有了一定的距离，这个距离就拉大了父元素的尺寸，所以从表现上看，就像是清除了浮动，达到我们想要的效果。

此方法的弊端就是添加了额外的无意义的标签。

方法二：在父元素上设置overflow:hidden;

#bigBox {    border: 2px solid Gray;/*    width: 500px;    height: 400px;*/    margin: 100px auto;    overflow:hidden; /*测试内容*/}

ログイン後にコピー

效果图：

图p15

深入理解overflow属性

overflow的属性值有：visible（默认值），hidden，scroll，auto，inherit

常用的是hidden属性，除了visible之外，不算inherit（继承）在内的其他三个属性值，如果设置了，那么该元素就会与浮动元素在同一个层面。我们可以看到文章开头的图p2中，2浮动在3的上面，因为它们不在同一个层面，如果对3设置overflow：hidden；（三个属性都可），那么他们就属于同一个层面，此时3虽然受浮动的影响，但是由于同一个层面的关系，所以它排在了2的后面，我们来测试一下。

#box1{    background: yellow;    width: 100px;    height: 100px;}#box2{    background: SkyBlue;    width: 120px;    height: 100px;    float: left; /*测试内容*/}#box3{    background: pink;    width: 140px;    height: 100px;    overflow: hidden;/*测试内容*/}

ログイン後にコピー

效果图：

图p16

我们比较图p2和p16，就可以看出overflow的这一特性。

回到我们讨论的父元素上面，父元素设置overflow属性，所以它就与所有浮动的子元素在同一层面上，所以就支撑了起来。不过它的弊端就是overflow的三个属性会对子元素超出父元素的部分不显示出来，可能造成信息缺失。

特别注意

在ie6及以下版本中（怪异模式），overflow的设置还是不起作用，这里就要用到ie特有的一个属性zoom来解决，只要设置zoom：1，即原来的大小即可，代码如下：

#bigBox {    border: 2px solid Gray;/*    width: 500px;    height: 400px;*/    margin: 100px auto;    overflow: hidden;    zoom:1;/*添加这个属性，可兼容ie6*/}

ログイン後にコピー

方法三：使用自定义伪类，设置清除属性

这是最实用和推荐的方法，一般把这个伪类的名称设置为 -XXX-clearFix，比如新浪微博就是用 -weibo-clearFix，在使用的过程中，我们习惯性的使用伪对象after的方法，在clearFix后面添加一些清除浮动的属性。

.-test-clearFix:after {    clear: both;    display: block;    visibility: hidden; /*设置不可见*/    height: 0;    line-height: 0;    content: ""; /*after伪对象必须的属性，可以设置内容为空*/}.-test-clearFix {}

ログイン後にコピー

在父级div里面添加这个类即可：

<div id="bigBox" class="-test-clearFix">    <div id="box1">1</div>    <div id="box2">2</div>    <div id="box3">3</div></div>

ログイン後にコピー

效果图：

图p17

三. 相对定位和绝对定位

1. 相对定位

特点一

相对自身偏移。

相对定位比较好理解，它相对于自身进行了定位，所设置的偏移属性的参照物为本身原来的位置。

特点二

元素原来的位置不脱离文档流，占据了位置。

对于特点一、二，我们来测试一下：

#bigBox {    border: 2px solid Gray;    width: 500px;    height: 400px;    margin: 100px auto; }#box1{    background: yellow;    width: 100px;    height: 100px;    float: left;}#box2{    background: SkyBlue;    width: 120px;    height: 100px;    float: left;    position: relative;/*测试内容*/    top: -140px;}#box3{    background: pink;    width: 140px;    height: 100px;    float: left;}

ログイン後にコピー

图p18

2占据了原来的位置，所以3不会靠左移动。

2.绝对定位：absolute

特点一

脱离文档流

绝对定位和float属性有相似之处，设置了这个属性的元素会脱离文档流，脱离文档流后的表现和float一样，但是它无法清除浮动也不占据位置。

#bigBox {    border: 2px solid Gray;/*    width: 500px;    height: 400px;*/    margin: 100px auto;    position: relative; /*测试内容*/}#box1{    background: yellow;    width: 100px;    height: 100px;    position: absolute;/*测试内容*/}#box2{    background: SkyBlue;    width: 120px;    height: 100px;    position: absolute; /*测试内容*/}#box3{    background: pink;    width: 140px;    height: 100px;    position: absolute; /*测试内容*/}

ログイン後にコピー

效果图：

图p19

图中可以看出1,2,3进行了绝对定位，并且重叠在了一起。其重叠特性为下面的特点二。

特点二

排再文档流后面的绝对定位元素显示的优先级高于前面的绝对定位元素。

为了区分，我们来给出一定的位移，观察前后优先级：

#bigBox {    border: 2px solid Gray;/*    width: 500px;    height: 400px;*/    margin: 100px auto;    position: relative; /*测试内容*/}#box1{    background: yellow;    width: 100px;    height: 100px;    position: absolute;/*测试内容*/}#box2{    background: SkyBlue;    width: 120px;    height: 100px;    position: absolute; /*测试内容*/    left: 50px;    top:40px;}#box3{    background: pink;    width: 140px;    height: 100px;    position: absolute; /*测试内容*/    left: 80px;    top: 20px;}

ログイン後にコピー

图p20

图中可以看出优先级 3>2>1