HTML CSS detailsタグについて

前提・実現したいこと

detailsタグについて教えてください
該当のソースコードでいくつかわからない点があります
<-- 1 -->の箇所の指定です

detailsタグの中身を<summary>の横に置こうとしました

質問1.親であるdetailsのheight:10%に対し、なぜmargin-top:-15%;でぴったり合うのか？-10%でないのか？

質問2.親であるdetailsのwidth:30%に対し、70%を設定するにはwidth:300%;の部分は23%で70%になるのではないでしょうか？

質問3.親であるdetailsのheight:10%に対し、90%を設定するにはheight:1000%;の部分は30%ではないのか？

質問4.スマホとPCでは同じ画面にならないのはなぜか？margin-topも大幅にズレる。この理由

以上回答お願いいたします

該当のソースコード

<style>
body,html{
width:100%;
height:100%;
}
</style>

<details style="width:30%;height:10%">
<summary style="width:100%;height:100%;background-color:red">テキスト</summary>
<-- 1 --><div style="margin-top:-15%;margin-left:100%;width:300%;height:1000%;background:yellow">
こんにちは
</div>
</details>

行動規範の内容に同意します

回答2件

質問1.親であるdetailsのheight:10%に対し、なぜmargin-top:-15%;でぴったり合うのか？-10%でないのか？

親detailsが10%のため、divのmarginはそのさらに15%となります。
（つまり最親に対しては0.6666...%となる）
また、marginは%を使用した場合、基本的に親の横幅に対しての比率となります。
よって、今回の結果となります。
（よって、上記の比率も厳密には違う）

質問2.親であるdetailsのwidth:30%に対し、70%を設定するにはwidth:300%;の部分は23%で70%になるのではないでしょうか？

なりません。
detailsの大きさの70%を指定したいならば、そのまま70%を指定しましょう。
なぜなら、単位%は、直親に対しての比率だからです。

質問3.親であるdetailsのheight:10%に対し、90%を設定するにはheight:1000%;の部分は30%ではないのか？

違います。
30%だと、detailsの10%に対して、さらに30%だと、最親に対しての比率は、
3%になってしまいます。
ただ、1000%だと、最親に対しては、100%になってしまうかと。

質問4.スマホとPCでは同じ画面にならないのはなぜか？margin-topも大幅にズレる。この理由

ブラウザによって、実装の仕様が違うからです。

質問者さんが勘違いされているのは、
CSSにおいての単位%に関してです。
%は、最親ではなく、大きさが指定された直親に対しての比率になります。
画面に対しての比率で算出したい場合は、
ビューポート単位を使用するのが最も適切です。
（vw、vh、vmax、vmin）