<CSS>margin と top がゼロに設定されているのに、gap_html/css_WEB-ITnose があるのはなぜですか?-htmlチュートリアル-php.cn

margin と top がゼロに設定されているのに、gap_html/css_WEB-ITnose があるのはなぜですか?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

リリース： 2016-06-21 09:12:30

オリジナル

1584 人が閲覧しました

サブナビゲーションタイトルの上の部分です

<div id="head">        <ul class="ul1">            <li class="li1"><a>标题</a></li>            <li class="li1"><a>标题</a>                <div class="sonc" id="content">                    <p class="sonh">标题</p>                    <ul>                        <li class="son">标题</li>                        <li class="son">标题</li>                        <li class="son">标题</li>                        <li class="son">标题</li>                        <li class="son">标题</li>                        <li class="son">标题</li>                    </ul>                    <p class="sonh">标题</p>                    <ul>                        <li class="son">标题</li>                        <li class="son">标题</li>                        <li class="son">标题</li>                    </ul>                </div>            </li>            <li class="li1"><a>标题</a></li>        </ul>    </div>

ログイン後にコピー

<style>        #head{            width: 100%;            height: 80px;            background-color: rgba(193, 193, 193, 0.7);        }        ul{            list-style: none;        }        .li1{            position: relative;            float: left;            font-size: 40px;            font-weight: bold;            margin: 20px 30px 0 10px;        }        .hover1{            color: #ffffff;            border-bottom: 5px solid black;        }        .son{            font-size: 15px;            padding: 2px;            float: left;            color: black;            margin-right: 4px;            margin-top: 4px;            background-color: grey;        }        .son:hover{            background-color: #51dadd;        }        .li1 a{            text-decoration: none;        }        .sonh{            font-size: 15px;            display: inline-block;            position: relative;        }        .sonc{            border: 1px solid #a3a3a3;            height: 160px;            width: 140px;            display: none;            position: absolute;        }    </style>

ログイン後にコピー

ディスカッションへの返信(解決策)

*{margin:0;padding:0;}

ログイン後にコピー

*{margin:0;padding:0;}

ログイン後にコピー

役に立たない、ボックスモデルはすでに0です

xhtml1.0、 html4.01 には、あなたが言及した問題はありません

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

ログイン後にコピー

この問題が発生するのは html5 の doctype だけです

<!DOCTYPE html>

ログイン後にコピー

赤い部分を削除してください
.sonh{
font-size: 15px;
location:相対;
}
または、li の下の a タグに font-size:40px を与えます。.li1 に直接与えないでください

理由としては、主に行の高さに対するフォントの影響です
私の理解は.li1 の fz が 40px であること、.sonc .li1 の fz を継承して、
したがって、親要素と比較すると、.sonh のインライン要素とみなすことができ、その行の高さは当然 .sonc の影響を受けます。 .sonh の display:inline-block を削除すると、
ブロック要素として機能し、fz をカスタマイズすると行の高さが自分で決まります。

以前は、HTML5 で行われた変更にはあまり注目していませんでした

position:relative;

position:relative; が設定されていない状態を基準とした要素の変位を指します。

黄色のブロックが配置されていない場合、原点を基準とした左上隅の座標は (0,30) です (位置を削除することもできます: 表示する 2 つのカラーブロックの相対位置)

したがって、黄色の位置を設定した後の実際の座標は (270, 30);

Position:relative;
Position:relative が設定されていない場合、要素は相対移動であることを意味します。配置されていない場合、原点を基準とした左上隅の座標は (0,30) です (2 つのカラーブロックの位置を削除して確認してください
したがって、黄色の位置を設定した後、実際の座標は (270, 30);

黄色のブロックの参照が (0, 30) であるのはなぜですか

ページ要素がposition:relative; で設定される前に、その要素が占めるページ領域が位置の後に存在します。

2 つのカラーブロックのposition:relative を削除して、position:relative が設定されていない前に、その位置が占めるページ領域を確認します。
2 つのカラーブロックの位置を変更できます。つまり、黄色のブロックは左上隅に配置され、t オフセットは ( 0, -30) に設定されなければなりません。ボックス内の要素をボックスの開始点に対してオフセットできるようにする属性はありますか?

Position:absolute;ああ
私は愚かで、absolute はすぐに使用でき、グローバルに配置されるものだと常に思っていました。 relative は、反転された非静的親要素に基づいています。マスター・シーはそれを理解しました

Position:absolute;ああ

私は愚かで、Absolute はすぐに使えるグローバルポジショニングだといつも思っていました。 relative は、反転された非静的親要素に基づいています。神様ありがとう、分かりました