ディスプレイ
説明
- CSSのプロパティまたは非表示で指定されたページに表示要素を設定するには
表示プロパティ
-
また、指定表示する要素と非表示を設定することができます
- プロパティ値なし - 隠されたターゲット要素を表していません
-
属性値はNoneではない - の要素がに表示されて非表示にすることができます
-
そのようなものとして
- 表示ブロック
- 表示：インライン
- 表示：インラインブロック
-
- プロパティは、要素の占有面積を指定してもされる効果を非表示に設定されているときに隠れて
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style>
div {
width: 200px;
height: 200px;
}
/*
display属性 - 也可以设置指定元素的显示和隐藏
* 属性值为 none - 表示隐藏目标元素
* 属性值不为 none - 可以将隐藏的元素在显示出来
比如：* display: block
display: inline
display: inline-block
* 该属性设置隐藏效果时，会连指定元素的所占区域一同隐藏
*/
#d1 {
background-color: red;
}
#d2 {
background-color: green;
/* 隐藏指定元素 */
display: none;
/* 将隐藏的元素显示出来 */
display: block;
}
#d3 {
background-color: blue;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
visibilityプロパティ
-
なお、表示または非表示にするセットを表し
- 隠されたプロパティ値 - 非表示の特定の要素を示し、
- 可視属性値 - 指定された表示素子であります
- プロパティは効果を非表示に設定されている場合に隠されて、いなくても指定された要素は、エリアを占領しました
<head>
<meta charset="UTF-8">
<title>visibility属性</title>
<style>
/*
visibility属性 - 表示设置显示或隐藏
* hidden属性值 - 表示隐藏指定元素
* visible属性值 - 表示显示指定元素
* 该属性设置隐藏效果时，不会连指定元素的所占区域一同隐藏
*/
div {
width: 200px;
height: 200px;
}
#d1 {
background-color: red;
}
#d2 {
background-color: green;
/* 隐藏指定元素 */
visibility: hidden;
/* 将隐藏的元素显示出来 */
visibility: visible;
}
#d3 {
background-color: blue;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
オーバーフロー
説明
- エリアは、その親要素を越えて指定された要素のコンテンツ（テキスト、画像などを...）を表し
overflowプロパティ
- 前記コンテンツオーバーフローの解像度
- visibleプロパティの値 - 彼らはオーバーフローのコンテンツ（デフォルト）を隠していないと述べました
- 隠されたプロパティ値 - オーバーフロー隠された内容を示します
- スクロールプロパティ値は - 隠された部分のスクロールバーを追加する必要性を示し、
- autoプロパティの値が - 自動的に調整するブラウザに引き渡さ示し
<head>
<meta charset="UTF-8">
<title>内容溢出</title>
<style>
/*
overflow属性 - 表示解决内容溢出
* visible属性值 - 表示不隐藏溢出内容（默认值）
* hidden属性值 - 表示隐藏溢出的内容
* scroll属性值 - 表示为需要隐藏的部分添加滚动条
* auto属性值 - 表示交由浏览器自动调节
*/
p {
width: 200px;
height: 150px;
background-color: yellowgreen;
/* 解决内容溢出 */
overflow: hidden;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus animi, corporis dolor enim facilis hic ipsam iste laborum, modi molestiae nisi officiis ratione recusandae rem repudiandae sint, sunt tenetur vel?</p>
</body>
テキスト-overflowプロパティ
-
テキストオーバーフローの内容を表します
- 省略記号プロパティ値 - 番組コンテンツ表示オーバーフロー省略記号（...）メソッド
- このプロパティは、空白overflowプロパティとプロパティと一緒に使用する必要があります
<head>
<meta charset="UTF-8">
<title>text-overflow属性</title>
<style>
/*
text-overflow属性 - 表示设置文本的内容溢出
* ellipsis属性值 - 表示将溢出的内容以省略号（...）方式显示
* 该属性必须配合 overflow属性 和 white-space属性 一起使用
*/
p {
width: 200px;
height: 100px;
background-color: #00c3f5;
/* 设置文本在一行显示 */
white-space: nowrap;
/* 解决文本溢出 */
text-overflow: ellipsis;
/* 解决元素内容溢出 */
overflow: hidden;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</body>