CSSスタイルの優先順位
高----------------->低
CSSのコンテンツ属性
また、通常、コンテンツ属性：擬似要素セレクタは、生成されたコンテンツを挿入するため、と組み合わせて使用した後：前と
| プロパティ | 意味 |
|---|---|
| ：前 | フロントを挿入 |
| ：後 | 後に挿入されます |
例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Framaeset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<title>Web技术社区</title>
<style>
h1:before{
content: "Hello";
}
h2:after{
content: url("https://www.w3school.com.cn/i/html5_new_note.png");
}
</style>
</head>
<body>
<h1>World</h1>
<h2>HTML</h2>
</body>
</html>
結果
overflowプロパティを使用します
| 値 | 意味 |
|---|---|
| 目に見えます | デフォルト値 |
| オート | コンテンツがトリミングされている場合は、自動的にスクロールバーを追加 |
| 隠されました | それは自動的に過剰量カットオフとなり、クリップされたコンテンツは表示されません |
| スクロール | スクロールバーを表示するように設定されています |
<p class="abc" style="width:200px;height:50px ;overflow:visible">
较高级复杂的劳动，<br>是这样一种劳动力的表现，这种劳动力比较普通。。。。。。
</p>
<br>
<hr>
<p class="abc" style="width:200px;height:50px ;overflow:auto">
较高级复杂的劳动，<br>是这样一种劳动力的表现，这种劳动力比较普通。。。。。。
</p>
<br>
<hr>
<p class="abc" style="width:200px;height:50px ;overflow:hidden">
较高级复杂的劳动，<br>是这样一种劳动力的表现，这种劳动力比较普通。。。。。。
</p>
<br>
<hr>
<p class="abc" style="width:200px;height:50px ;overflow:scroll">
较高级复杂的劳动，<br>是这样一种劳动力的表现，这种劳动力比较普通。。。。。。
</p>
<hr>
結果：
表示プロパティ
どのように表示素子には、一連の表示に使用されています
- この値は、典型的には、予め作製された、動的な表示のために用いられる非表示要素に何をしないために使用されます
- この値は、ブロックのブロックレベルの要素として示され、改行は、その幅と高さを,,する前と後の要素は右下に設けられ、内側と外側の余白を残してもよいです
- この値は、集合高くすることができないインラインインライン要素、前と後の要素ない改行が表示され、内側と外側の余白幅
- インラインブロック列の値は、ブロック値の値の両方を有するブロック要素内であると考えられる特性を維持しながら、幅と高さ属性は、プロパティを設定することができるラインフィード値インラインありません
- 継承は、表示設定の親要素を継承します
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Framaeset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<title>Web技术社区</title>
<style>
span.inline_box{
border: solid 1px #1fa8b4;
display: inline-block;
width: 100px;
text-align: center;
}
.inline{
display: inline;
}
</style>
</head>
<body>
<p style="display: none" id="demo">大家好。。。。。</p>
<button onclick="document.getElementById('demo').style.display=''">显示</button>
<button onclick="document.getElementById('demo').style.display='none'">隐藏</button>
<p><span style="display: block">hello</span> word</p>
<div class="inline">hello </div>
<div class="inline">world</div>
<br>
<span class="inline_box"> HTML</span>
<span class="inline_box"> CSS</span>
<span class="inline_box"> JQuery</span>
</body>
</html>
結果：
