CSSで配置を設定する方法-CSSチュートリアル-php.cn

CSSで配置を設定する方法

醉折花枝作酒筹

リリース： 2023-01-05 16:10:10

オリジナル

7443 人が閲覧しました

設定方法: 1.「margin:0px auto」ステートメントを使用して水平方向の配置を設定します; 2.position 属性と top、bottom、left、および right 属性を使用して左または右の配置を設定します。 3. 「float: right|left」ステートメントを使用して、左揃えまたは右揃えを設定します。

CSSで配置を設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

1. margin 属性を使用して要素を水平方向に整列させます

左右のマージンを「自動」に設定することで要素を整列させることができます。ただし、それを表明することが前提です。 DOCTYPE、それ以外の場合は、IE8 では無効です。これにより、要素を中央に配置できます。例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>document</title> 
<style>
div{
    margin: 0px auto;
    width: 70%;
    height: 300px;
    background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

ログイン後にコピー

CSSで配置を設定する方法

ヒント: 幅が 100% の場合、配置は効果がありません。

2. 左揃えと右揃えには、position 属性を使用します

互換性の観点からは、この方法を使用することが間違いなく最良の方法ですが、position 属性を使用する場合は、必ず設定してください! DOCTYPE ステートメント, IE8 以前のバージョンでは問題が発生します。コンテナ要素 (この例では

) が指定された幅に設定され、!DOCTYPE 宣言が省略された場合、IE8 以前では右側に 17 ピクセルのマージンが追加されます。例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>document</title> 
<style>
body{
    margin: 0;
    padding: 0;
}
.container{
    position: relative;
    width: 100%;
}
.right{
    position: absolute;
    right: 0px;
    width: 300px;
    height: 50px;
    background-color: red;
}
</style>
</head>
<body>
<div class="container">
    <div class="right"></div>
</div>
</body>
</html>

ログイン後にコピー

3. 左揃えと右揃えには float 属性を使用します

IE8 以前のバージョンでは、float 属性を使用するときに問題が発生します。 !DOCTYPE宣言を省略した場合、IE8以前では右に17pxのマージンが追加されます。これはスクロールバー用に予約されているスペースのようです。 float 属性を使用する場合は、常に !DOCTYPE 宣言を設定します。例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>document</title> 
<style>
body{
    margin: 0;
    padding: 0;
}

.right{
    float: right;
    width: 300px;
    height: 50px;
    background-color: red;
}
</style>
</head>
<body>
<div class="container">
    <div class="right"></div>
</div>
</body>
</html>

ログイン後にコピー

CSSで配置を設定する方法