CSS固有のプロパティについて：CSSリファレンスマニュアルURL
目次
目次
ワイルドカード セレクター [一般的には使用されません。理解のためのみです]
CSS3 ボックス モデル (CSS3 の新しいプロパティ)
1.CSSフォントスタイルのプロパティ
font-size: フォントサイズ
| 相対的な長さの単位 | 説明する |
| えっと | 現在のオブジェクト内のテキストのフォント サイズと同等 |
| ピクセル | ピクセル [最もよく使用され、推奨される] |
| 長さの絶対単位 | 説明する |
| の | インチ |
| cm | センチメートル |
| んん | んん |
| ポイント | 点 |
フォントファミリー: フォントスタイル
p {
font-family: "宋体"；／＊可以写多个字体，用英文逗号隔开，表示找不到１字体去找２字体，等等＊／
font-size: 14px;／＊ctrl＋／是注释快捷键＊／
color: pink;
}
CSS Unicode フォント
CSSでフォント名を設定すると直接中国語を書き込むことができますが、テキストのエンコーディング（GB2312 UTF-8など）が一致しない場合は文字化けエラーが発生しますし、XP系はMicrosoft Yaheiと同様に中国語をサポートしていません。
解決策 1: 代わりに英語を使用します。font-family: "Microsoft Yahei";
解決策 2: Unicode でエンコードされたフォントを CSS で直接使用する
[提案: Unicode フォントには「Song Ti」と「Microsoft Yahei」のみを使用してください]
font-weight: フォントの太さ
HTML の <b> タグと <strong> タグに加えて、CSS を使用してフォントの太字効果を完成させることもできますが、CSS にはセマンティクスがありません。
font-wight 属性はフォントの太さを定義し、属性値には標準、太字、太字、薄字、および 100 ～ 900 の数字が含まれます。
[通常は数字を使用することを好みます。400 番 = 通常、700 番 = 太字]
Strong{
font-weight:normal;/* ラベルの折り返しの太字を太字にしない*/
}
フォントスタイル: フォントスタイル
HTML の <i> タグと <em> タグに加えて、CSS を使用してフォントの傾斜効果を完成させることもできますが、CSS にはセマンティクスがありません。
Normal: テキストのフォント スタイルを通常のフォントとして指定します。
italic: テキストのフォント スタイルをイタリックとして指定します。イタリック化されていない特殊なフォントの場合、イタリック体を使用する場合は oblique が適用されます。
oblique: テキストのフォント スタイルを斜体フォントとして指定します。フォント内の斜体文字を選択する代わりに、テキストを人為的に傾斜させる [一般的には使用されません]
em { font-style:normal; ／＊ラベルで囲まれた斜体を斜めにして、＊／}
フォント: 包括的なスタイル [キー]
h1 {
font: italic ball 14px "microsoft yahei";/*最初の 2 項目は省略可能、最後の 2 項目は保持する必要があり、順序は変更できません*/
}
Chrome でのデバッグ
2.セレクター[キー]
CSS スタイルを特定の HTML 要素に適用するには、まず要素を取得する必要があります。CSS では、このタスクを実行するスタイル ルールの部分はセレクターと呼ばれます。
ラベルセレクター（要素セレクター）
タグ セレクターとは、HTML タグをセレクターとして使用し、タグによって分類して、ページ上の同じ種類のタグのスタイルをすばやく統一することを指します。欠点は、差別化されたスタイルを設計できないことです。
タグ{
属性1:属性値1;
属性2:属性値2;
}
要素{
属性1:属性値1;
属性2:属性値2;
}
クラスセレクター
要素の個別または同一のスタイルを定義する
<head>
<style>
h1 {
color:palevioletred;
}
.yinshi { /* 加 “.”声明类样式 */
color: blue;
}
.shenle {
color: orangered;
}
.xinba {
color: gray;
}
</style>
</head>
<body>
<div class="yinshi">银时</div><!-- 此处引用类样式 -->
<div class="shenle">神乐</div>
<div class="xinba">新八</div> CSS の命名規則
クラスセレクターの命名規則
複数のクラス名セレクター
ラベルに複数のクラス名を追加して、複数の目的で選択できるようにします。
<head>
<style>
.c-blue { /* 加 “.”声明类样式 */
color: blue;
}
.c-orange {
color: orangered;
}
.c-gray {
color: gray;
}
.font20 {
font-size: 20px;
}
</style>
</head>
<body>
<div class="c-blue font20">银时</div><!-- 此处引用类样式 -->
<div class="c-orange">神乐</div>
<div class="c-gray font20">新八</div><!-- 多类名之间用空格隔开 ，此时可以既变颜色又加粗-->
</body>
IDセレクター
メモ化とクラスセレクターの組み合わせ
#black {
color: black;
}
<div id="black">土方十四郎</div>
<!--区别于类选择器的“.”开始，id选择器以“#”开头命名，在下方标签处引用-->クラスセレクターとIDセレクターの違い
クラス セレクターは繰り返し使用でき、複数のタグで参照できます。これは人の名前に相当します。
ID セレクターは一意であり、ID 番号に相当し、一度だけ使用できます。
ワイルドカード セレクター [一般的には使用されません。理解のためのみです]
ワイルドカード セレクターは「*」で表され、すべてのセレクターの中で最も広く適用され、ページ上のすべての要素に一致します。基本的な構文形式は次のとおりです。
* {
属性 1: 属性値 1;
属性 2: 属性値 2;
}
<head>
<style>
* { /*星号代表所有选择器*/
color: #0000FF;
font-size: 20px;
}
</style>
</head>
<body>
<p>银魂</p>
<div>银魂</div>
<strong>银魂</strong>
<i>银魂</i>
<span>银魂</span><!--这是最近正在重刷银魂的博主-->
</body>疑似クラスセレクター
リンクにエフェクトを追加するなど、特定のセレクターにエフェクトを追加する傾向があります。
(1) 疑似クラスセレクタのリンク
順序を変更すると、全ての効果が得られなくなる場合があります。
<head>
<style>
a:link {
/* 未访问的链接 */
color: cornflowerblue;
font-size: 20px;
font-weight: 700;
}
a:visited {
/* 访问过一次的链接 */
color: darkorchid;
font-size: 20px;
font-weight: 700;
}
a:hover {
/* 鼠标移动到连接上时链接的变化 */
color: tomato;
font-size: 20px;
font-weight: 700;
}
a:active {
/* 选定的链接，我们按住鼠标别松开时的状态 */
color: green;
font-size: 20px;
font-weight: 700;
}
</style>
</head>
<body>
<div>
<a href="#">零元购</a>
</div>
</body>以下はリンク擬似クラスセレクターの略称です[最も一般的な書き方]
<head>
<style>
a {
/* a是标签选择器，指所有的链接 */
color: cornflowerblue;
font-size: 20px;
font-weight: 700;
}
a:hover {
/* ：hover是链接伪类选择器 */
color: tomato; /* 鼠标经过，由蓝色变红色 */
}
</style>
</head>
<body>
<div>
<a href="#">零元购</a>
</div>
</body>(2) 構造擬似クラスセレクター
<head>
<style>
li:first-child { /* 第一个孩子 */
color: orangered;
}
li:last-child { /* 最后一个孩子 */
color: green;
}
li:nth-child(3) { /* 第三个孩子，括号写几就是第几个孩子 */
color: mediumpurple;
}
</style>
</head>
<body>
<ul type="square">
<li>长虹剑</li>
<li>冰魄剑</li>
<li>紫云剑</li>
<li>奔雷剑</li>
<li>青光剑</li>
<li>雨花剑</li>
<li>旋风剑</li>
</ul>
</body>その他の用途
li:nth-child(even) {/* 可以选择所有偶数（even）孩子标签 */
color: orange;
}
li:nth-child(odd) {/* 可以选择所有奇数（odd）孩子标签 */
color: skyblue;
}
li:nth-child(n) {
color: aqua;/* 选择全部孩子 ，里边还可以写2n，3n等等*/
}(3) 対象擬似クラスセレクタ
target target 擬似クラスセレクター: このセレクターは、現在アクティブなターゲット要素を選択するために使用できます。
:target {
color: red;
}3. CSS の外観プロパティ
色属性
行の高さ: 行間隔
行間隔 (行の高さとも呼ばれます) を設定するために使用されます。一般に、フォント サイズ、つまり px より 7 または 8 ピクセル大きくなります。
p {
line-height: 40px;
}text-align: 水平方向の配置
中心: 中心
左: 左揃え
右: 右揃え
text-indent: 最初の行のインデント
すべての段落はインデントされます。単位として em を使用することをお勧めします。1em=単語の幅です。
p {
text-indent: 2em;/* 此时2em就是两个字的宽度 */
}文字間隔: 単語の間隔
文字間のスペース、負の数値が許可されます、デフォルトは通常です
div {
letter-spacing: 2px;
}word-spacing: 単語の間隔
中国語には無効です
カラー半透明（CSS3新）
color:rgba(r,g,b,a)、aはアルファ、つまり透明度を指します、値は[0,1]の間です、パラメータは省略できません
div {
color: rgb(0,200,173,0.5);
}/*测试下来rgb和rgba效果一样，不知道是不是兼容度提高了，为了规范依然使用rgba*/テキストシャドウ (CSS3)
text-shadow: 水平位置、垂直位置、ぼかし距離、影の色; [合計 4 つのパラメータ] 最初の 2 つのパラメータは必ず記述する必要があり、最後の 2 つは省略可能です
h1{
text-shadow: 1px 2px 4px rgba(183,23,48,0.5);
/* 参数之间用“空格”隔开，而不是逗号
前两个参数必须有，后两个可以省略 */
}Hbuilder のショートカット
| div*10 は 10 個のラベルを迅速に生成します |
| ul>li は親子クラスのラベルを迅速に生成します |
| div+p は兄弟タグ、同じレベルのタグを迅速に生成します |
| .red+tab キーでクラス名を含む div を素早く生成 |
| #red+tab ID 名を持つ div をすばやく生成します |
| 例：.nav+.header+.main>.left+.right |
4番目に、CSSスタイルシートの導入
内部スタイルシート
内部スタイルは、HTML ドキュメントの先頭からコードを集中的にアンロードし、style タグで定義します。ドキュメント内の任意の場所にスタイル タグを配置することもできます。
HTML5ではtype="text/CSS"は省略できますが、より標準化された書き方になります。
インライン スタイル (インライン スタイル)
インライン スタイル (インライン スタイル、インライン スタイルとも呼ばれます) は、タグの style 属性を通じて要素のスタイルを設定します。スタイルが少ない場合にのみ適しています
<タグ名 スタイル="属性 1: 属性値 1; 属性 2: 属性値 2"> 内容 </タグ名>
外部スタイルシート
外部スタイルは、拡張子 .CSS を持つ 1 つ以上の外部スタイル シート ファイルにすべてのスタイルを配置し、リンク タグを介して HTML ドキュメントに接続します。[リンクは単一のラベルです]
構造とスタイルの分離を完全に実現。
<head>
<link rel="stylesheet" href="style.css"/>
</head>
3つのスタイルの比較
ブロックレベルの要素 (ブロックレベル)
通常、各要素は単独で 1 行全体または複数行を占め、高さ、幅、配置プロパティを設定できます。
共通のブロックレベル要素: <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li> など。
⭐ブロックレベルの要素の特性については、指示できなければなりません
インライン要素 (インラインレベル)
これは独立した領域を占有せず、構造をサポートするために独自のサイズと画像サイズのみに依存します。通常、幅、高さ、配置のプロパティは設定できません。
一般的なインライン要素: <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
⭐線の要素の特徴について、口述できなければなりません
知らせ：
1. テキストのみが段落であるため、 p タグ内にブロックレベルの要素を配置することはできません。同様に、<h1>~<h6><dt> にも他のブロックレベルの要素を配置することはできません。
2. リンク <a> 内にこれ以上リンクを配置することはできません。
インラインブロック要素 (inline-block)
ラベルモード変換表示
5、CSS複合セレクター
交差点セレクター
交差セレクターは 2 つのセレクターで構成され、最初のセレクターはラベル セレクターです。2 番目はクラス セレクターであり、2 つのセレクターの間にスペースを入れることはできません。
交差セレクターは...と...の両方を意味し、比較的まれに使用されます。
例: p.one は、クラス名 one の段落タグを表します。
ユニオンセレクター
一部のセレクターによって定義されたスタイルがまったく同じ、または部分的に同じである場合は、ユニオン セレクターを使用してそれらに同じ CSS スタイルを定義します。
カンマで区切られている限り、すべてのセレクターは次のスタイルを実行します。
<head>
<style>
p,
h1,
.toshi {
color: aliceblue;
}
</style>
</head>
<body>
<p>春江花月夜</p>
<h1>春江潮水</h1>
<div class="toshi">海上明月</div>
</body>子孫セレクター
包含セレクターとも呼ばれ、要素または要素グループの子孫を選択するために使用されます。
書き方は、外側のラベルを前に書き、内側のラベルを後ろにスペースで区切って書きます。
<head>
<style>
.songyang div {
color: darkcyan;
font-size: 16px;
}/*只有.songyang下的div才由效果，外边的div不变*/
</style>
</head>
<body>
<div class="songyang">
<div>坂田</div>
<div>桂</div>
<div>高杉</div>
</div>
<div>近藤</div>
</body>子要素セレクター
選択できるのは、特定の要素の子要素と次のレベルの孫要素のみであり、ひ孫は選択できません。書き方は親ラベル＞子ラベルで、通常はシンボルの左右にスペースを空けます。
<head>
<style>
.nav>li{
color: pink;
} /*不知道为什么单独写这个不成功*/
.nav > li > .two > li{
color: black;
}/*必须加上这个才能区分一二级菜单*/
</style>
</head>
<body>
<ul class="nav">
<li>一级菜单
<ul class="two">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>一级菜单
<ul class="two">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
</body>属性セレクター
<head>
<meta charset="utf-8">
<title></title>
<style>
a[title] {/* 属性选择器用中括号来表示，选出有title的 */
color: #008000;
}
input[type=text]{
color: red;/* 只有type是text的才显示红色 */
}
</style>
</head>
<body>
<a href="#" title="浏览器">Chrome</a>
<a href="#" title="浏览器">edge</a>
<a href="#">firefox</a>
<a href="#">Safari</a>
<a href="#">QQ</a>
<input type="text"value="这是一个文本框">
<input type="submit">
<input type="reset">
</body><head>
<meta charset="utf-8">
<title></title>
<style>
div[class^=font]{ /* class^=font表示以font开始 */
color: deeppink;
}
div[class$=nav]{ /* class$=nav表示以nav结束 */
color: aquamarine;
}
div[class*=TB]{ /* class*=TB表示TB在任意位置都行 */
color: orange;
}
</style>
</head>
<body>
<div class="font12">属性选择器</div>
<div class="font12">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="pdd-nav">属性选择器</div>
<div class="jd-nav">属性选择器</div>
<div class="news-TB-heater">属性选择器</div>
<div class="news-TB-footer">属性选择器</div>
</body>疑似要素セレクター (CSS3)
::first-letter、テキストの最初の行の単語または文字を選択します (中国語、日本語、韓国語など)
::first-line、テキストの最初の行を選択します。固定されていません。ブラウザ ウィンドウのサイズに応じて変わります。
::selection では、青の背景にある白のテキストの色をピンクに変更するなど、選択したテキストのスタイルを変更できます。
<style>
p{
line-height: 35px;
}
::first-letter{
color: aquamarine;/*英文是一个单词，中文是一个字，日文是一个假名*/
}
</style>
</head>
<body>
<p>
なまりの空(そら)【阴霾的天空】
重(おも)く垂(た)れ込(こ)み【垂下凝重的幕帘】
真白(ましろ)に淀(よど)んだ【沉入苍白之中】
太阳(たいよう)が砕(くだ)けて【将太阳斩碎】
耳鸣(みみな)りを尖(とが)らせる【让我大声尖叫】
</p>
</body>
.dome: クラスセレクター
first-child: 疑似クラスセレクター
最初の文字: 疑似要素セレクター
::前 和 ::後
<head>
<style>
div::before{
content: "门前";/* 必须和content一起使用，记得加引号“” */
color: #FF0000;
}
div::after{
content: "游过一群鸭";
color: skyblue;
}
</style>
</head>
<body>
<div>大桥下</div>
</body>6. CSS記述仕様
空白の指定
セレクターと「{」の間にはスペースが必要です。
属性名と次の : の間にスペースは使用できません。また、: と属性値の間にはスペースが必要です。
例：
.nav a { 色: 赤; }
セレクター仕様
ルールに複数のセレクターが含まれる場合、各セレクター宣言は個別の行を占有する必要があります。
例：
p、
h1、
.toshi { 色:アリスブルー; }
属性指定
プロパティ定義は新しい行で開始する必要があります。
例：
div::after{ content: "アヒルの群れの中を泳ぐ"; color: スカイブルー; }
7、CSS背景（背景）
背景画像（イメージ）
同じプロジェクト内のイメージを参照する必要がありますが、同じフォルダー内に存在することはできません。異なるプロジェクト内のイメージを参照すると失敗します。
背景画像のサイズは、background-size でのみ変更できます。
div {
height: 800px;
width: 600px;
background-color: pink;
background-image: url("图片/1.png");
}
/*问题：1、地址路径按理说不用加引号，加了反倒会引起浏览器兼容性问题，但是必须要加引号才能在我的浏览器上显示出来*/
背景のタイリング（繰り返し）
デフォルトはタイリングであり、タイリングをキャンセルするには no-reprat が必要です。
背景位置（位置）
文法：
背景位置：長さ || 長さ
背景位置：位置 || 位置
パラメータ:
length: パーセンテージ、浮動小数点数、およびユニット識別子で構成される長さの値。長さの単位を参照
位置：上、中央、下、左、中央、右
取得したオブジェクトの背景画像の位置を設定するには、最初にbackground-image属性を指定する必要があります。デフォルトは (0% 0%) です。値が 1 つだけ指定された場合は、その値が横軸に適用され、縦軸のデフォルトは 50% になります。値が 2 つある場合は、2 番目の値が縦軸に適用されます。
位置名詞を使用して画像の位置を変更します。デフォルトの位置は左上隅です。
場所名詞に順序はありません。最初に来た人が問題ありません。場所名詞が 1 つだけの場合、もう 1 つはデフォルトで中央に配置されます。
div {
height: 800px;
width: 700px;
background-color: pink;
background-image: url("女儿.png");
background-repeat: no-repeat;
background-position: right top;
}画像の位置を正確な単位で変更する
最初の値は x 座標、2 番目の値は y 座標である必要があります。
div {
height: 800px;
width: 700px;
background-color: pink;
background-image: url("女儿.png");
background-repeat: no-repeat;
background-position: 15px 30px;
}混用
div {
height: 800px;
width: 700px;
background-color: pink;
background-image: url("女儿.png");
background-repeat: no-repeat;
background-position: center 30px;
}背景添付ファイル
デフォルトはスクロールです
文法：
背景添付：スクロール | 修理済み
パラメータ:
スクロール: 背景画像がオブジェクトのコンテンツとともにスクロールされます
固定: 背景画像が固定されています
背景の略語
フォントの略語に似ていますが、順序に必須の基準はありません。一般的な推奨事項は次のとおりです。
背景: 背景色、背景画像アドレス、背景タイリング、北京スクロール、背景位置
background: pink url("女儿.png") no-repeat fixed center 30px;背景透明（CSS3）
文法：
背景：rgba(0，0，0，0.3);
背景の半透明とは、ボックスの背景が半透明で、ボックス内のコンテンツは影響を受けないことを意味します。
rgba を使用して、テキストと境界線の両方に半透明を設定できます。
背景のスケーリング (CSS3)
文法：
背景サイズ：***px | ***% | 含む | カバー
通常、px を使用する場合、ズームを防ぐために 1 つの値のみが変更されます。% を使用すると、画像全体が元の画像のパーセンテージに縮小されることを意味します。
カバー: 画像が常に背景領域を埋めるようにズーム率を自動的に調整します。オーバーフローがある場合は非表示になります。画像は、幅と高さが同時にボックス サイズを満たすように比例的に拡大縮小されます。
contains: ズーム率を自動的に調整しますが、画像が常に背景領域に完全に表示されるようにします。幅と高さがまんじゅう箱と同じサイズであれば、拡大縮小されなくなります。画像の完全性は保証されており、欠落はありませんが、箱の一部が露出しており、背景画像のカバーはありません。
複数の背景 (CSS3)
- 要素には複数の背景画像を設定できます
- 属性の各セットはカンマで区切ります
- 設定した背景画像間に重複関係がある場合は、前の背景画像が後ろの背景画像に重ねて表示されます。
- 背景色が画像を覆うのを防ぐために、通常、背景色は最後のグループで定義されます。
div {
height: 800px;
width: 700px;
background: url("女儿.png") no-repeat 10px 20px/300px,
url(001.jpg) no-repeat right 20px/300px,/*位置/大小*/
url(troye.jpg) no-repeat 10px bottom/300px pink;
}浮き彫りのテキスト
<head>
<style>
body {
background-color: #ccc;
}
div {
color: #CCCCCC;
font: 700 80px "微软雅黑";
}
div:first-child {
/* text-shadow:水平位置 垂直位置 模糊距离 阴影颜色 */
text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
}
div:last-child {
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}
</style>
</head>
<body>
<div >
<div>我是凸起的文字</div>
<div class="second">我是凹下的文字</div>
</div>
</body>ここで問題が発生します: last-child の呼び出しに失敗しました
解決策: :last-child を使用するには、2 つの div が親 div の下にある必要があります。それ以外の場合は、:first-child のみを使用できます。
親クラスの下にある最後の要素は、使用時に選択する必要があります。
また: nth-child(n) は、親クラス タグの下になくても正常に使用できます。
text-decoration: 通常、リンクの装飾効果を変更するために使用されます。
使用上のヒント: 1 行で、行の高さをボックスの高さと同じに設定して、テキストを垂直方向の中央に配置します。
八、CSSの三大特徴
CSS カスケード
いわゆるカスケードとは、複数の CSS スタイルの重ね合わせを指します。
これは、競合を処理するブラウザの機能です。属性が 2 つの同一のセレクターを通じて同じ要素に設定されている場合、この時点で一方の属性が他方の属性をオーバーレイします。これはスタイルの競合です。スタイルが競合する場合は、最後のスタイルが優先されます。
1. スタイルの衝突、近接性の原則に従います。構造に最も近いスタイルが実行されます。
2. スタイルは競合せず、カスケードされません。
CSSの継承
いわゆる継承とは、CSS スタイル シートを作成するときに、子タグが親タグの一部のスタイル (テキストの色やフォント サイズなど) を継承することを意味します。
継承を適切に使用すると、コードが簡素化され、CSS スタイルの複雑さが軽減されます。子要素は、親要素のスタイル (text-、font-、line-、および color 属性で始まるスタイル) を継承できます。
CSSの優先度
CSS スタイルを定義する場合、1 つの要素に複数のルールが適用されることがよくありますが、このとき優先順位が問題になります。
CSS の重みについては、CSS の優先度を測る基準となる一連の計算式で計算され、具体的な仕様は以下のとおりです。
4 つのレベルは左から右にあり、1 つのレベルは 1 つのレベルより大きく、桁間に 10 進法はなく、レベルを超えることはできません。
継承されたスタイルの重みは 0 です。親要素の重みがいくら大きくても、サブクラスに継承されると重みは 0 となり、子要素で定義された要素が継承されたスタイルをオーバーライドします。
9、CSSボックスモデル（強調）
いわゆるボックス モデルは、HTML ページ内の要素を長方形のボックスと見なし、各長方形は要素のコンテンツ、パディング、ボーダー、マージンで構成されます。
すべてのドキュメント要素 (ラベル) は、要素ボックス (要素ボックス) と呼ばれる長方形のボックスを生成します。これは、Web ページ レイアウトの概要内でドキュメント要素が占める位置のサイズを示します。したがって、各ボックスは独自のサイズと動作に加えて、他のボックスのサイズと位置にも影響を与えます。
ボックスの枠線（枠線）
文法：
ボーダー：ボーダー幅 || ボーダースタイル || ボーダの色
境界線プロパティ 1: 境界線のスタイルを設定します (border-style)
境界線スタイルは、ページ内の境界線スタイルを定義するために使用され、通常は次のように使用されます。
none: 境界線なし、すべての境界線の幅を無視します (デフォルト)
実線: 境界線は単一の実線です (最も一般的に使用されます)
破線: 境界線は破線です
点線: 境界線は点線です
double: 境界線は二重実線です (使用頻度は低くなります)
border-style、border-width、border-color、四辺の属性を設定する場合、時計回りに、上、右、下、左の順になります。
div {
border-color: red blue springgreen black;
border-style: dashed double solid dotted;
border-width: 1px 5px 10px 30px;
}一緒に書く場合はスペースで区切ってください。
div:nth-child(4) {
border-top: 3px solid orangered;/*上边框，宽度 样式 颜色*/
border-bottom: blueviolet 3px solid;/*下边框 颜色 宽度 样式*/
/*样式顺序不影响表现*/
}border属性は継承されず、継承できる属性については継承に関する部分を参照してください。
セルスペースとセルパディングの違い:
前者は 2 つのセル間の距離、後者はセル内のテキストと境界線の間の距離です。
cellspacing はテーブルのセル間のギャップを示し、パラメータ値は数値です。
cellpadding は、表内のテキストと表の境界線の間の距離を示します。
両方の属性は <table> タグ内に適用されます
表の細い線の境界線
テーブル {
境界崩壊: 崩壊;
}
border-collapse: 崩壊は、境界線が一緒にマージされることを意味します。
丸い枠線 (CSS3)
文法：
border-radius: 左上隅 右上隅 右下隅 左下隅;
時計回りの順序
<style>
div {
height: 400px;
width: 400px;
border: 1px solid red;
}
div:first-child {
border-radius: 10px;
/* 一个数值表示四个角都是相同的10px */
}
div:nth-child(2) {
border-radius: 50%;
/*取宽度和高度的50%，会变成一个圆形*/
}
div:nth-child(3) {
border-radius: 10px 40px;
/* 取对角线，左上角和右下角是10px，右上角和左下角是40px */
}
div:nth-child(4) {
border-radius: 10px 40px 80px;
/* 左上角10 右上角和左下角40 右下角80 */
}
</style>パディング
padding プロパティは、コンテンツと境界線の間の距離を指す内側のマージンを設定するために使用されます。
パディングに続く値の数が異なり、意味が異なります。パディングの 2 つの値が表す方向は半径から分離する必要があります
| 値の数 | 明示的な意味 (マージンは内側のマージンを指します) |
| 1 つの値 | 左右の余白 |
| 2つの値 | 前者は上下のマージンを表し、後者は左右のマージンを表します。 |
| 3つの値 | 上マージン、左右マージン、下マージン |
| 4つの値 | 上マージン、右マージン、下マージン、左マージン |
マージン
margin プロパティは、外側のマージンを設定するために使用されます。マージンを設定すると、要素間に「空白」が作成され、通常は他のコンテンツを配置するために使用できません。
マージン: 上マージン、右マージン、下マージン、左マージン
値の順序はパディングと同じです。
ボックスを中央に配置するための余白
ボックスを水平方向の中央に配置するには、次の 2 つの条件を満たす必要があります。
1.ブロックレベルの要素である必要があります
2.ボックスは幅(width)を指定する必要があります
次に、左右のマージンを auto に設定して、ブロックレベルの要素を水平方向に中央揃えにします。
header {
width: 900px;
height: 120px;
background-color: black;
margin: 0 auto;/* 上下不管，左右是auto就能居中 */
}実際には、ナビゲーション バーの高さは奇数である必要があります。行の高さが偶数の場合、境界ピクセルがブランキングされる問題が発生します。a:hover を使用すると、行内のブロックの色をすべて変更することはできません。上端と下端に 1 ピクセルの空白領域が生じます
知らせ：
「margin:0 auto;」はインラインブロックでは機能しません。
そもそも「inline-block」は数値で指定できるのに、「margin: 0 auto;」でセンタリングが機能しません。
「text-align: center;」は親要素をセレクターにしない
「text-align: center;」の基本ルールは「セレクターが親要素」です。
中央に配置したい場合は、親要素を作成する必要があります。
インラインブロック要素で margin: 0 auto を使用する場合、中央揃えを実現するには 親要素でもtext-aline: centerを使用する必要があります。
挿入した画像<img>もボックスとみなし、marginやpaddingで位置を変更できますが、背景画像の位置はbackground-positionでしか変更できません。
通常の状況では、背景画像はいくつかの小さなアイコンに適しており、製品表示カテゴリには画像が挿入されます。
要素のデフォルトのマージンをクリアします
* {
パディング: 0; /*パディングをクリア*/
margin: 0; /*クリアマージン*/
}
インライン要素には左右のマージンのみがあり、上下のマージンはありません。インライン要素には上下のマージンを指定しないようにしています。
マージンを折りたたむ
マージンを使用してブロックレベル要素の垂直マージンを定義する場合、マージンをマージすることはできません (マージンの崩壊とも呼ばれます)。
隣接するブロック要素の垂直マージンがマージされます
解決：
マージン値のみを設定します
ネストされた要素の垂直方向のマージンを折りたたむ
解決：
① 親要素に1ピクセルの上枠を定義します（透明枠、透明を使用できます）
②親要素の上部1ピクセルのパディング(padding)を定義
③親要素にオーバーフロー:非表示を追加
コンテンツの幅と高さ
ボックスのサイズを制御するには、width 属性 width と height 属性 height を使用します。
幅と高さの属性値は、親要素に対するさまざまな単位またはパーセンテージの値にすることができますが、最も一般的に使用されるのはピクセル px です。
/*外部和サイズ計算(要素空間サイズ)*/
要素スペースの高さ = 高さ + パディング + ボーダー + マージン
要素スペースの幅 = 幅 + パディング + ボーダー + マージン
/*内箱サイズ計算（要素サイズ）*/
要素コンテンツの高さ = 高さ + パディング + 境界線
要素コンテンツの幅 = 幅 + パディング + ボーダー
知らせ：
1. width 属性 width および height 属性はブロックレベル要素にのみ適用され、インライン要素には無効です (img タグと input タグを除く)。
2. ボックスモデルの全高を計算するときは、上部ボックスと下部ボックスの垂直方向の外側のマージンの組み合わせを考慮する必要があります。
ボックスモデルのレイアウトの安定性
安定性に基づいて使用を優先する
幅 > パディング > マージン
理由：
1. マージンには外側のマージンを結合するという問題があるため、最後の使用は
2. パディングはボックスのサイズに影響を与えるため、加算と減算の計算後に使用する必要があり、面倒です
3. 幅については問題はなく、幅/高さの残存方法がよく使用されます。
CSS3 ボックス モデル (CSS3 の新しいプロパティ)
CSS3では、box-sizingでcontent-box、border-boxを指定してモデル化できるため、ボックスサイズの計算方法は2つの場合に分けられます。
1. content-box : 従来のボックス モデル。ボックスのサイズは、幅 + パディング + ボーダーです。content-box はデフォルト値であり、W3C の標準ボックス モードを維持します。
2. border-box : CSS3 は新しいボックス モデルを追加します。ボックスのサイズはwidthです。つまり、パディングとボーダーは幅に含まれ、ボックスは拡張されません。
テン、フローティング（浮く）
通常の流れ
簡単に理解すると、従来の div ボックス、インライン要素、ブロックレベル要素、およびインライン ブロック要素は通常のフローであり、標準フローとも呼ばれます。
浮く
要素のフローティングとは、フローティング プロパティが設定された要素が標準のフロー制御から切り離されること、つまりフローティング アップされることを意味します。
文法
セレクター { float: 属性値; }
| 属性値 | 説明 |
| 左 | 要素は左にフロートします |
| 右 | 要素が右に浮く |
| なし | 要素はフロート状態ではありません (デフォルト) |
フローティング要素は、最初に最も近い親要素の配置 (左右に応じて左上隅または右上隅の配置) を見つけますが、パディングや境界線を超えることはなく、内部配置の近くにのみ配置されます。
フローティング特性（重くて難点）
1. ラベル外（標準流量外）に浮遊しているため、場所をとらず、標準流量に影響を与えます。フロートは左右にのみ浮きます
2. フローティングボックスは元の位置を保持しなくなりました
3. 複数のボックスがフローティングに設定されている場合、それらは属性値に従って行に表示され、上に揃えられます。
注: フローティング要素は互いに接続されています (隙間はありません)。親の幅がこれらのフローティング ボックスを収容できない場合、余分なボックスは新しい行に配置されます。
4. フローティング要素はインラインブロック要素の特性を持ちます。
- ブロックレベルのボックスに幅が設定されていない場合、デフォルトの幅は親と同じですが、フロートを追加した後、そのサイズはコンテンツに従って決定されます。
- フローティングボックスの中央には隙間がなく、互いに密着しています。
- インライン要素も同様
フローティングは、多くの場合、親の標準フローと一緒に使用されます。つまり、標準フローの親ボックスはフローティング子ボックスです。
要素はフローティングであり、理論的には残りの兄弟要素もフローティングである必要があります。
フローティングボックスはフローティング ボックスの後ろの標準フロー
にのみ影響し、フローティングボックスの前の標準フローには影響しません。
クリアフロート
フローティングの本質を明確にする: 子要素のフローティングにより親要素の内部の高さが0になる問題を解決します。【本来サブボックスはファーザーを立てることができますが、フローティングは浮いていることと同じなので立てかけることができません。ファーザーが高さを設定しないと高さが0になります】
フロートをクリアした後、親はフロートされた子ボックスに基づいて高さを自動的に検出します。
float 構文をクリアする
セレクター {クリア: 属性値;}
| 属性値 | 説明 |
| 左 | 左のフロート効果をクリアします |
| 右 | 右側のフローティング効果を解除 |
| 両方 | 同時にクリアする |
私たちの実際の作業では、ほぼ、clear:both のみを使用します。
余分なラベル付け
エクストラ タグ方式は隔壁方式とも呼ばれ、W3C によって推奨されている手法です。
追加タグ メソッドは、<div style="clear:both"></div> などの空のタグをフローティング要素の末尾に追加します。
注: この新しい空のタグはブロック レベルの要素である必要があります。
その他の方法
1. 親にオーバーフロー属性を追加します。
オーバーフロー プロパティを親に追加し、そのプロパティ値を hidden、auto、またはscrollに設定します。
2. after 疑似要素を親に追加します
:after メソッドは、追加タグ メソッドのアップグレード バージョンです。親要素にも追加します
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7 专有 */
*zoom: 1;
}3. 親に二重の疑似要素を追加します
親要素にも追加します
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}