--css遠位（下部）

CSSプロパティの関連

幅と高さ

幅プロパティは、要素を設けてもよい幅度。

高さ属性要素は次のように設定することができ、高い程度。

==ラベル幅を設定するブロックレベル、インラインタグの幅は、内容によって決定される==

フォントプロパティ

テキストのフォント

フォントファミリは、システムを保存するために「フォールバック」など、いくつかのフォントの名前を取ることができます。お使いのブラウザが最初のフォントをサポートしていない場合、それは次のものをしようとします。ブラウザは、それが認識する最初の値を使用しています。

body {
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}

フォントサイズ

p {
  font-size: 14px;
}

継承するように設定した場合、親要素のフォントサイズの値を継承表します。

単語量（厚さ）

フォント重量はワード量（厚さ）のフォントを設定するために使用されています。

値	説明
ノーマル	デフォルト値は、標準厚さ
大胆な	太字
大胆な	より厚いです
ライター	より細かいです
100〜900	特定の厚さを設定し、400は正常に相当し、太字及び700と等価です
受け継ぎます	親要素のフォントの太さの値を継承

テキストの色

色属性は、テキストの色を設定するために使用されます。

色は、ほとんどの場合、CSSで指定されています。

進値-など：＃1 FF0000
RGB値 - 例えば：RGB（255,0,0）
色の名称 - など：赤

そこRGBA（255,0,0,0.3）、アルファの第4の値は、指定された色の透明度/不透明度は、それは0.0〜1.0の範囲です。

テキストの配置

テキスト整列 属性は、テキスト要素の水平方向の配置を指定します。

値	説明
左	デフォルト値は左揃えです
右	右揃え
センター	揃え
正当化	両端揃え

テキストの装飾

テキストの装飾の 属性は、テキストに特殊効果を追加するために使用します。

値	説明
無し	デフォルト。テキスト定義された基準。
アンダーライン	次の行のテキストが定義されています。
上線	テキスト行の定義。
ラインスルー	テキストを通る線を定義します。
受け継ぎます	テキストの装飾のプロパティは、親要素の値を継承しています。

一般的に、デフォルトのスクライブからラベルを削除するために使用：

a {
  text-decoration: none;
}

最初の行のインデント

テキストインデント：32PX;

段落インデント32個の画素の最初の行：

p {
  text-indent: 32px;

テキストの間の距離

テキストのピッチは8つのピクセルに調整されます。

p {
letter-spacing: 8px;
}

背景のプロパティ

背景色

#d1{
    background: pink;
     }

背景画像

#d1{
    background-image: url(tutu.jpeg);;
   }

背景リピート

リピート（デフォルト）：タイル張りの背景画像がページ全体を埋め
リピートX：タイル状背景画像を水平方向のみに
繰り返し-Y：タイル状背景画像を垂直方向にのみ
何のリピート：いいえ背景画像タイリング

background-repeat: repeat; 
background-repeat: repeat-x; #水平铺
background-repeat: repeat-y; #垂直铺 background-repeat: no-repeat;

背景位置

背景位置

background-position: right top;  #显示图片的左上角

background-position: 200px 200px; #显示图片的这个位置

フレーム

ボーダーのプロパティ

ボーダー幅
ボーダースタイル
ボーダの色

 #d2{
    width: 200px;
    height: 200px; background: blue; border-width:5px; border-color: yellow; border-style:solid; }

表語文字

#d2{
border: 10px solid yellow;
}

境界線のスタイル

値	説明
無し	枠なし。
点在	ドットは、境界線を破線。
破線	長方形点線の境界線。
固体	ソリッドボーダー。

統一されたセットに加えて、境界線は外にも、特定のスタイルの境界線ごとに個別に設定することができます

ボーダー半径

この効果は、属性を用いて達成することができる境界線を丸めました。境界半径が長くなるように又は高半円形を得られるように設定します。

#d2{
    border-radius:100px 100px
   }

表示プロパティ

ディスプレイを制御するためのHTML要素。

値	意味
表示：「なし」	HTML文書の要素が存在しますが、ブラウザに表示されません。
表示ブロック"	タグラベル転送ブロック・レベルの専門家
表示：「インライン」	タグラベル転送ブロック・レベルの専門家
表示：「インラインブロック」	要素がブロックレベルの専門家及びタグラベルの特性を有すると同時に。

表示：「なし」と可視性：隠された違い：

可視性：隠されたは：だけでなく、元の空間で、要素を非表示にします。

表示：なし：あなたは要素を非表示にすることができ、そして隠された要素は任意のスペースを取りません。

CSSボックスモデル

マージン：タグおよび制御するためのタグの間の距離、マージン最も基本的な目的は、視野角の目的から離間空間を囲むスペーシング要素を制御することです。
パディング：コンテンツおよび制御するためのフレームとの間の距離。
ボーダー（国境）：内側と外側の余白コンテンツの境界線の周り。
内容（コンテンツ）：ボックスの内容、テキストや画像を表示します。

マージンマージン

  margin-top: 30px;
  margin-right: 15px;
  margin-bottom: 20px; margin-left: 25px;

ショート（マージントップ、時計回りの回転から開始）

margin: 5px 10px 15px 20px; magin:0 auto; #居中

充填内部パディング

#d3{
    padding-top: 30px;
    padding-right: 200px; padding-bottom: 300px; padding-left: 50px; }

短縮形：

#d3 {
  padding: 30px 200px 300px 50px; }

[注]：

補足パディングは、一般的に簡単な方法を使用しました。

、四辺のため、
左のための次の、第二 - - 2個、最初のための1つの提供の権利を、
3つの左のための第一、第二のために、提供された場合 - 第三のために、右。
4つのパラメータ値を提供することになります - 右 - 下 - 四辺に作用する左ため。

フロート（浮き）

左：左浮動

右：右浮動

なし：デフォルト値は、フロートしません

#d3{
    float: right;
    }

制限浮動（クリア）

明確な属性は反対側フローティング要素を防止する要素を指定します。

値	説明
左	左側にフロートさせません。
右	右側には、フローティング要素が許可されていません。
両方	左右はフロートすることはできません。
無し	デフォルト値。浮動要素を許可すると、両側に表示されます。
受け継ぎます	クリア規定は親要素からプロパティ値を継承する必要があります。

[注]：

唯一の明確な性質、自分の他の要素に影響を与えることなく、仕事、。

クリアフロート

クリアフロートは親タグの崩壊を引き起こします

三つの主要な方法があります。

固定の高さ
クリア擬似要素法
オーバーフロー：隠されました

明確な擬似要素法（複数を使用）。

#d3:after {
  content: "";
  display: block; clear: both; }

オーバーフローoverflowプロパティ

値	説明
目に見えます	デフォルト値。コンテンツはボックスの外側の要素があるだろう、剪定されることはありません。
隠されました	コンテンツは削除されます、そして残りのコンテンツは表示されません。
スクロール	コンテンツは削除されますが、ブラウザは、コンテンツの残りの部分を表示するには、スクロールバーが表示されます。
オート	コンテンツが剪定された場合、ブラウザは、コンテンツの残りの部分を表示するには、スクロールバーが表示されます。
受け継ぎます	提供は親要素からoverflowプロパティの値を継承する必要があります。

max-width最大宽度与min-width最小宽度

我们设置两个盒子一个“divcss5-min-width”设置对象里img图片最小宽度为200px，而实际图片只有165px，所以图片被拉伸到200px；

一个“divcss5-max-width”设置对象里img图片最大宽度为200px限制，而实际对象里图片宽度是375px，这个时候我们设置了此图片最大宽度为200px,所以图片被CSS max-height缩小到200px

定位

static

static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

relative（相对定位）

相对于自己原来的位置，进行移动，即使设定了元素的相对定位以及偏移量，元素还站着原来的位置

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #d4{ width: 200px; height: 150px; background: blue; } .d1{ width: 100px; height: 80px; position: relative; left:30px ; top:50px; background: red; } </style> </head> <body> <div id="d4"> <div class="d1"></div> <div class="c2"></div> </div> </body> </html>

absolute（绝对定位）

相对于父类元素的位置，进行移动。

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #d4{ width: 200px; height: 150px; background: blue; } .d1{ width: 100px; height: 80px; position: absolute; left:30px ; background: red; } </style> </head> <body> <div id="d4"> <div class="d1"></div> <div class="c2"></div> </div> </body> </html>

fixed（固定位置）

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #d4{ width: 200px; height: 150px; background: blue; } .d1{ width: 100px; height: 80px; position: fixed; right:30px ; top:50px; background: red; } </style> </head> <body> <div id="d4"> <div class="d1"></div> <div class="c2"></div> </div> </body> </html>

z-index

设置对象的层叠顺序。

z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
从父现象：父亲怂了，儿子再牛逼也没用

#d2 {
  z-index: 999;
}

opacity

用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> *{ width: 0; height: 0; } div{ width: 200px; height: 200px; background: deeppink; opacity: 0.8; } </style> <body> <div> <p style="color: blue"> 你要仔细看我的变化哦 </p> </div> </body> </html

background-color: rgba(255,20,147,0.5);和background: deeppink;的区别

background-color: rgba(255,20,147,0.5);透明度变得时候字体的透明度不会变，但是background的话文字透明度会随着背景透明度的变化而变化