個人メモ1:displayとvisibilityの使い方
1182 ワード
CSSの属性displayとvisibilityを混同する人もいますが、違いは大きく見えます.
Visibilityプロパティは、ロケーションの要素が表示されるかどうかを制御します.値には、visible(表示)、hidden(非表示)、inherit(継承)、デフォルト値はinheritが含まれます.visibilityプロパティとdisplayプロパティの違いは、要素が非表示になった場合、visibilityプロパティで定義された要素が任意に既存の表示空間を保持することです.
たとえば、次のコードがあります.
ケース1を非表示にし、ケース2がケース1の位置を占めている場合は、次のコードを使用してケース1をフォーマットできます.
ケース2を非表示にし、その場所を空白にする場合は、次のコードを使用してケース1をフォーマットできます.
Visibilityプロパティは、ロケーションの要素が表示されるかどうかを制御します.値には、visible(表示)、hidden(非表示)、inherit(継承)、デフォルト値はinheritが含まれます.visibilityプロパティとdisplayプロパティの違いは、要素が非表示になった場合、visibilityプロパティで定義された要素が任意に既存の表示空間を保持することです.
たとえば、次のコードがあります.
<html>
<head>
<title>display visibility</title>
<style type="text/css">
#dis{
boder:2px solid red;
width:100px;
margin:10px;
}
#vis{
border:2px solid red;
margin:10px;
width:100px;
}
</style>
</head>
<body>
<div id="dis"> 1</div>
<div id="vis"> 2</div>
</body>
</html>ケース1を非表示にし、ケース2がケース1の位置を占めている場合は、次のコードを使用してケース1をフォーマットできます.
#dis{
border:2px solid red;
width:100px;
margin:10px;
display:none;
}ケース2を非表示にし、その場所を空白にする場合は、次のコードを使用してケース1をフォーマットできます.
#dis{
border:2px solid red;
width:100px;
margin:10px;
visibility:hidden;
}