CSS 配置原理の詳しい説明_html/css_WEB-ITnose

これで、絶対位置を指定したウィンドウができました。position:absolute;、CSS スタイルを left: 0;right: 0; に設定すると、ウィンドウの幅を 100% (100%) にすることができます。

この時点では、ウィンドウの上部はゼロ、またはデフォルトではウィンドウの下部:0; に従うとも言えます。前のウィンドウ。

前のウィンドウがブラウザの境界線である場合、現在のウィンドウは前のウィンドウの境界線、つまりブラウザの境界線に近くなります。 上記の概要を要約すると、ウィンドウを絶対的に配置し、ウィンドウの左右を 0 に設定すると、現在のウィンドウの幅は前のウィンドウ (ブラウザー) に対して 100% になります。

.box{    display: block;    position: absolute;    left: 0;    right: 0;} //browser => width:100%;  // box => width:100%;

ボックス ウィンドウは左側です

上記のウィンドウの配置を例として、親ウィンドウのクラスを class = "box" として定義し、親ウィンドウ内に子ウィンドウを追加し、そのクラスを class = "content" として定義します。 , そして、親ウィンドウを左に設定します left:0;

.content{        display: block;        width: 100px;        height: 100px;        background-color: rgb(54, 171, 23); }

現時点では、デフォルトです。サブウィンドウが自動的に左側に表示されます。親ウィンドウが絶対的に左側に配置されることを排除するものではなく、その結果、子ウィンドウも親ウィンドウとともに左側に配置されます。 サブウィンドウが前のウィンドウの位置に合わせてサブウィンドウの表示位置を変更したくない場合は、サブウィンドウに絶対位置を指定します。position:absolute;前のウィンドウ？分析は次のとおりです:

.content{        display: block;　　　　 position:absolute;        width: 100px;        height: 100px;        background-color: rgb(54, 171, 23); }

The child window is on the left

ということで、ブラウザ上で見たところ、子ウィンドウが左側に設定されている場合、親ウィンドウが左側に配置されていても、幅がゼロの場合でも、子ウィンドウは表示できます。

すごいです

子ウィンドウが右側にあります

子ウィンドウを右側に設定すると、親ウィンドウの元の位置は左側のままで、子ウィンドウの幅はゼロになります。は効果がありません。子ウィンドウはどこに行きますか?

うわー

推測: 子ウィンドウは親ウィンドウの右端にありますか?これを証明するのは非常に簡単です。親ウィンドウに width: 100% を追加するか、親ウィンドウを継承するために子ウィンドウに width:継承を追加するか、コンテンツの位置をposition:relativeに変更するだけです。ウィンドウの幅は 100% である必要があります。このとき、右端にコンテンツウィンドウが表示されていることがわかります。

要約すると:

親ウィンドウの幅がゼロの場合

親ウィンドウ (.box) を左側に、子ウィンドウ (コンテンツ ウィンドウ) を左側に配置すると、子ウィンドウを表示することができます。

親ウィンドウ（.box）を右に配置すると、効果を完全に表示できません。

現在のウィンドウの幅が 0 ではない場合

サブウィンドウを右に配置すると、サブウィンドウの効果 (すべてではありません) が表示され、左に配置すると、サブウィンドウのすべての効果が表示されます。

幅「ゼロ」と「ゼロではない」

つまり、親ウィンドウは左側に配置され、幅はゼロ、子ウィンドウは左側に表示され、右側で非表示になります。親ウィンドウは左側に配置され、その幅はゼロではありません。子ウィンドウは左側に表示され、右側にも表示されます。

詳細は下記をご覧ください！

実際、本当に解決する必要があるのは、上記の証明ではなく、子ウィンドウ (コンテンツ) が親ウィンドウ (ボックス) に合わせて変化するかどうか、またはコンテンツ ウィンドウがボックスの親ウィンドウに合わせて変化するかどうか (つまり、つまり、上のウィンドウで）ウィンドウが変わります）？ボックスウィンドウとボックス親ウィンドウの幅は両方とも継承されるため、ボックス親ウィンドウに応じてコンテンツウィンドウも変更されると誤解してしまいます。次に、ボックス ウィンドウの幅を 300px に変更します。今回は、ボックス ウィンドウの幅がボックス ウィンドウの親ウィンドウの幅を継承しないことがわかりました。コンテンツ ウィンドウはボックス ウィンドウの右端にあります。

そうですか

上記の例でも、ボックスの親ウィンドウの幅がコンテンツの子ウィンドウの幅より小さい場合は、ボックスの親ウィンドウの幅を width:50px に設定し、コンテンツの子ウィンドウの幅を twidth に設定します。 100px; またはボックスの親ウィンドウを左に配置すると、コンテンツのサブウィンドウを左に配置すると、コンテンツのサブウィンドウのフルサイズが表示されますが、ボックスは機能しません。

コンテンツ ウィンドウを右側に配置すると、完全なコンテンツ ウィンドウのサイズではなく、ボックス ウィンドウのサイズが表示されます。

概要: a: 親ウィンドウの幅が子ウィンドウの幅より小さい (子ウィンドウの幅が親ウィンドウの幅より大きい) 左側の子ウィンドウは完全なサイズを表示できます。子ウィンドウのサイズ(幅)、右側の子ウィンドウには親ウィンドウのサイズ(幅)が表示されます。

逆に、b：親ウィンドウの幅が子ウィンドウの幅よりも大きく（子ウィンドウの幅が親ウィンドウの幅よりも小さい）、子ウィンドウはフルサイズで表示できます親ウィンドウが左側または右側に配置されている場合の親ウィンドウの(幅)。

a と b を分析します

a が true の場合、親ウィンドウの位置を右に 20 ピクセル移動し、子ウィンドウを左側に配置し、子ウィンドウの幅を表示します。 //content_long_a

a が true の場合、親ウィンドウの位置を 20 ピクセル右に移動し、子ウィンドウは右に配置され、表示されるのは親ウィンドウの幅に親ウィンドウの移動量を加えたものになります。親ウィンドウの 20 ピクセル右。 値 // 表示領域 = box_long_a

如果b成立的话，我把父窗口定位的位置向右移动20像素，那么子窗口定位居左/居右，都显示的是父窗口的宽度width。 //可见区域content_long_b

如果a成立的话var box_long_a, content_long_a;var box_left = document.querySelector('.box');var content_left = box_left.querySelector('.content');box_long_a = box_left.style.left + box_left.style.width;content_long_a = box.style.width;如果b成立的话var  content_long_b;var box_left = document.querySelector('.box');var content_left = box_left.querySelector('.content');content_long_b = box_left.style.width;

 

box窗口居右

如果是box窗口居右的情况下，box窗口的宽度还是为零。

.box{    display: block;    position: absolute;    height: 100px;    right: 0;    vertical-align: middle;    background-color: rgba(154, 171, 123,1);}

子窗口还是绝对定位(父窗口的宽度小于子窗口的宽度的情况下。)如果我给子窗口设置居左，看到的效果是显示完整的子窗口的大小(宽度)。

不过这个子窗口的定位是根据父窗口的宽度为零的位置开始的路径。也就是说，子窗口的左边left的值相对于父窗口的left的来定位的，

并非是子窗口的左边left的值相对于父窗口的right来定位的。

　box{right:len;} <==> content{left:len2;}  // len2 = len;

如果我给子窗口设置居右，看到的效果是显示完整的子窗口的大小(宽度)。
这里子窗口的right是根据父窗口的right的值来定位，所以，子窗口从右向左移动多少像素、位移。

子窗口还是绝对定位(父窗口的宽度大于子窗口的宽度的情况下。)
此刻我们不管我们怎么定位子窗口的位置，都能看到子窗口的效果。