あの頃、素晴らしい聖杯、二枚の翼、そしてマイナスのマージン_html/css_WEB-ITnose

[目次]

はい、タイトルは「あの頃一緒に片付けた山車」をモデルにしています。

素晴らしい聖杯と二重飛行翼

私と同じように、フロントエンドを学んでいるときに聖杯レイアウトと二重飛行翼レイアウトについて聞いたことがある人は多いと思います。名前に関しては、聖杯に似ているというか、鳥に似ているというだけです。いくつかの違いがありますが、主な考え方は基本的に同じです。

これら 2 つのレイアウトで実装されるスタイルは次の形式です。

つまり、聖杯または空飛ぶ小さな部分のように見える中央部分です。 Bird、左右の幅がわかっていて、中央が適応的に埋められます。通常、このようにコードを書けば、当然ながらレイアウトの実装は簡単です。

<div class="head">head</div>    <div class="content">        <div class="left">left</div>        <div class="main">main</div>        <div class="right">right</div>    </div> <div class="foot">foot</div>

ただし、DOM のロード順序に従って、コンテンツ部分は左、メイン、右の順にロードされます。これは潔癖症の人にとっては耐えられないかもしれませんし、理不尽にさえ感じるかもしれません。

通常、最初にメイン部分をロードし、次に左右の 2 つの比較的重要でないもののロードを開始します。したがって、HTML コードは次のように記述する必要があります:

<div class="head">head</div>    <div class="content">        <div class="main">main</div>        <div class="left">left</div>        <div class="right">right</div>    </div><div class="foot">foot</div>

一方、私たちはセマンティック HTML を推奨しています。これは、HTML を記述するときに CSS の干渉を受けないようにする必要があるため、このようにします上記のレイアウトを実現するためにも必要なはずです。

このように書く場合、CSS スタイルはどのように記述すればよいでしょうか?

まず、最初にヘッド コンテンツとフット コンテンツを構築することを考えます。コンテンツについては、フロートをクリアして高さをサポートする必要があります。コードは次のとおりです:

* {    margin: 0;    padding: 0;}.cleanfix {    clear: both;}.cleanfix:after {    content: '.';    clear: both;    display: block;    visibility: hidden;    height: 0;    zoom: 1;}.head, .foot {    width: 100%;    height: 80px;}.head {    background-color: #4eb5f7;}.foot {    background-color: #999999;}.left, .right, .main {    float: left;}.left {    width: 40px;    height: 60px;    background-color: #B9E078;}.right {    width: 60px;    height: 80px;    background-color: #FF9900;}.main {    background-color: crimson;}

この場合、次のレイアウトを実現できます:

私たちが望んでいるのは、メイン レイアウトがアダプティブであることです。この場合、main 100% の幅を与えます:

.main {  100%;}

この場合、レイアウトは次のようになります:

次に、左を実行します。現時点では、素晴らしい ネガティブ マージン を使用できるようになりました。

main、left、right はすべてフローティングストリーム内にあるとみなすことができ、順序も main left right になります。現在、main が 100% を占めているため、左右が main と同じ線上に浮くことができません。このとき、負のマージンを使用して左前に移動できます (つまり、margin-left が正の場合)。左側のボックスはマージンで、マイナスの場合は前に移動します）。次のスタントを追加します

.left {    margin-left: 100%;}

それで、どれくらい動きますか?左端に移動するには、上記と同様に左移動の最大値である-100%に移動します。このようにして、次のレイアウトが得られます。

左が左端に移動したことがわかります。では、右も左を真似て一緒に移動できますか?どれくらい移動しますか？ right は右の幅、つまり 60px を前方に移動するだけです

.right {    margin-left: -60px;}

次の結果が得られます

想像どおり、右も上に移動します。そして行きたいところへ走りました。

しかし、よく見てみると、上の結果にはまだ問題があることがわかります。赤い真ん中のメインはどこに行ったのでしょうか?

開発者ツールを開いて要素を調べると、左右が要素上に重なって見えることがわかります。

では、どうやって本体を中に入れるのでしょうか？ これは、Holy Horse レイアウトと Double Flying Wing レイアウトの基本的な違いです

Holy Grail レイアウト

Holy Grail レイアウトのアイデアは、パディングを追加することです3つの要素で囲まれたコンテンツに、padding-leftとpadding-rightの値を左右の幅として、相対位置を使用して両側に移動します。

まず、コンテンツにパディングを与えます

.content {    padding: 0 60px 0 40px;}

次に、相対位置を使用して左右に移動します

.left {    position: relative;    left: -40px;}.right {    position: relative;    right: -60px;}

これは完璧な解決策です。 :

最終的な CSS スタイルはすべて次のようになります:

* {    margin: 0;    padding: 0;}.cleanfix {    clear: both;}.cleanfix:after {    content: '.';    clear: both;    display: block;    visibility: hidden;    height: 0;    zoom: 1;}.head, .foot {    width: 100%;    height: 80px;}.head {    background-color: #4eb5f7;}.foot {    background-color: #999999;}.left, .right, .main {    float: left;}.left {    width: 40px;    height: 60px;    background-color: #B9E078;    margin-left: -100%;}.right {    width: 60px;    height: 80px;    background-color: #FF9900;    margin-left: -60px;}.main {    background-color: crimson;    width: 100%;}.content {    padding: 0 60px 0 40px;}.left {    position: relative;    left: -40px;}.right {    position: relative;    right: -60px;}

HTML は次のようになります:

<div class="head">head</div>    <div class="content cleanfix">        <div class="main">main</div>        <div class="left">left</div>        <div class="right">right</div>    </div><div class="foot">foot</div>

Double Flying Wing Layout

上記の状況に引き続き、Holy Horse レイアウトは次のように行われます。

Holy Horse レイアウトのアイデアは、3 つの要素でラップされたコンテンツにパディングを追加することです。 letpadding-left とpadding-right の値は左右の幅であり、相対位置を使用してそれらを両側に移動します。

ダブルウィングレイアウトでは、メイン内に別の div を追加し、この div に対して margin-left と margin-right を実行します。つまり、

<div class="head">head</div>    <div class="content cleanfix">        <div class="main">            <div class="wrap">main</div>        </div>        <div class="left">left</div>        <div class="right">right</div>    </div><div class="foot">foot</div>

Wrap です。 CSS 部分 処理:

.wrap {    background-color: darkmagenta;    margin-left: 40px;    margin-right: 60px;}

最終的に CSS コードは次のようになります:

* {    margin: 0;    padding: 0;}.cleanfix {    clear: both;}.cleanfix:after {    content: '.';    clear: both;    display: block;    visibility: hidden;    height: 0;    zoom: 1;}.head, .foot {    width: 100%;    height: 80px;}.head {    background-color: #4eb5f7;}.foot {    background-color: #999999;}.left, .right, .main {    float: left;}.left {    width: 40px;    height: 60px;    background-color: #B9E078;    margin-left: -100%;}.right {    width: 60px;    height: 80px;    background-color: #FF9900;    margin-left: -60px;}.main {    background-color: crimson;    width: 100%;}.wrap {    background-color: darkmagenta;    margin-left: 40px;    margin-right: 60px;}

概要

要約すると、Holy Horse のレイアウト翼のプロセスは大まかに次のとおりです

• ヘッドコンテンツフットを構築し、コンテンツ内の 3 つの要素すべてをフローティングのままにし、フットに影響を与えないようにフローティングをクリアします

• メインが 1 行になるように、メインの幅を 100% にします

• 给 left -100% 的margin-left 让他移动到最左边，给 right 和他宽度一样的负 margin 让他移动到最右边

• 针对移动后 main 的两边会被 left 和 right 重合覆盖掉做出不同的改变，这儿也就是两个布局的本质区别

  • 圣杯布局会给 content 内边距，左右分别为 left 和 right的宽度，然后再利用相对定位移动 left 和 right

  • 双飞翼布局会在 main 里面再加一层 wrap ，然后把内容都写在 wrap 里面，正对 wrap 设置他的 margin, 左右外边距和 left 与 right 一样

奇妙的负边距

相信在上面的圣马布局与双飞翼布局中已经见识到了负边距的奇妙之处了，这就是他的第一奇妙之处

浮动元素 VS 负边距

整个浮动可以看是有一个浮动流的存在，利用负边距可以让他在这个流中移动，并且会叠加到相应元素的上面

普通文档流 VS 负边距

普通元素的位置是相对于文档流而发生变化的。负边距也会使元素在文档流中发生位移。不同于相对定位的是，这些元素移动之后不会占据原来的空间。他往前移动之后，文档流也会跟着移动

元素宽度 VS 负边距

负边距可以增加元素的宽度，对于没有 width 的元素，负边距可以加宽他们。

这样就能够很好的利用负边距实现 一寸照片排列 的那种难题了。对于这种问题，比较麻烦的办法是浮动之后 margin-right, 然后对每一行的最后一个元素设置 margin-right: 0。这样就存在一个如何给最后一个元素设定这个margin-right的问题了。

利用负边距，我们可以加大子元素的margin, 然后浮动里面所有的元素，等他们都浮动起来的时候利用 overflow: hidden消除最右边的边距。

绝对定位 VS 负边距

绝对定位就是相对于 父亲系 元素的最近的一个定位元素的边界来决定的，这个边界也就是margin。

如果是负边距的话就能机智的实现元素垂直水平居中了

.con {    width: 100px;    height: 100px;    position: absolute;    top: 50%;    left: 50%    margin-left: -50px;    margin-top: -50px;}