ディスプレイや位置だけでなく、ラベルの残りの部分を使用します

今日は、二つの主要な学習のラベル表示や位置:CSSレイアウトは、多くの場合、これら2つの要素を使用しますので、その中国名が表示され、この2つの要素の位置は、研究の前で非常に重要です。

マージン、パディング、ボーダー、行の高さ、オーバーフロー、Zインデックス:いくつかの残りのタグの例があります。

表示:

にはいくつかの共通の属性、インライン、ブロック、インラインブロック表示について学びます。

インライン:要素プロパティインライン要素が行の他のインライン要素とすることができると、彼らは自分の行ない、パディング内のすべての要素を使用することができ、高さと幅を変更することはできません、インライン要素となり、唯一の使用は、ここで、余白に左及び右。

ブロック:ブロック要素を使用することができる、彼らは、ラインを所有することができ、それは幅と高さを設定されていない場合は、自動的に親要素の幅を埋めることができ、幅と高さを変更することができ、パディングとマージンの任意の属性要素で使用することができます。

インラインブロックは:、機能ブロックとインラインのいくつかを組み合わせて、両方のインライン要素は、行の行では、ブロックは、幅と高さを変更することができるだけでなく、要素のパディングとマージンのすべてのプロパティを使用することがあったができます。 

要約:インライン表示ライン、ブロック行ディスプレイ内のブロック、インラインブロックに表示されるブロック要素。

ポジション:

位置 - 絶対、位置resative、位置固定:そのプロパティのいくつかの最も一般的な位置について学びます。

位置絶対:絶対位置決め要素を生成し、親以外の静的要素に位置決め要素に対して、任意の要素は、左右上下のいずれかの特性を調整するために使用することができます。

位置resative:他の通常の場所に対して位置決めするための相対的な位置決め要素を生成し、そして、彼は負のピクセルの動きがあります。次のように、例

位置固定は:上部、底部、左、右、要素の属性要素によって予め決定することができるブラウザウィンドウに対して位置決め固定された位置決め要素を生成します。

詳しく書くこの単語は、ブロック要素とインライン要素がある影響を受けません。

CSS

  } 
    .div_1 { 
        位置相対20ピクセル ; 
    } 
    .div_2 { 
        位置相対-20px ;

HTML

  <DIV CLASS = "div_1"> 2033333333333 </ div> 
  <divのクラス= "div_2">卧室555555555555 </ div>

プロジェクトをビルドするために、残りのコードでは、その効果を達成することができます。

マージン:

それを理解するために私自身の言語で、公用語を理解するには余りにも困難であり、言葉は、マージンを設定することが意図されることがあり、そして4つの属性がありますマージンは、以下のとおりです。

マージントップ:余白に

マージン右:右マージン

マージン下:下マージン

余白左:左マージン

それはブラウザ画素できマージン、CM、百分率、親要素を継承を計算することができ、この要素は、行とブロック要素の要素によって影響されません。

パディング:

これは、余白内に設定され、それは4つの属性を有し、それは負の値を許可しないパディング、パディングの距離を調整するために、次の4つの属性を持っており、彼はブロック要素と内側の行要素の使用をサポートしていません。

パディングトップ:パディング

パディング右:右内の余白

パディング下:下マージン

パディング左:左マージン

行の高さ:

使用される場合、メインライン(行高さ)との間の距離を設定し、それがインスタンス上に直接ある、行の高い割合です。

CSS

  .small { 
            行の高さ90% 
        } 
        .big { 
            行の高さ900パーセント
         }

HTML

< P-は> 
            それは段落の高い標準ラインを持つことです。
            ほとんどのブラウザのデフォルトの行の高さは約110%〜120%です。
           
    </ P > 
    < P クラス=「スモール」> 
            これは、高い水準のラインと段落です。
            ほとんどのブラウザのデフォルトの行の高さは約110%〜120%です。
           
    </ P > 
    < P クラス=「ビッグ」> 
            これは、高い水準のラインと段落です。
            ほとんどのブラウザのデフォルトの行の高さは約110%〜120%です。
            
    </ P >

 

レンダリング

 

 可能性のある効果は、理解の多くの下で、それほど直感的ではありません。

屋台:

幅、色、破線と実線、などのCSSスタイル、それはパディング、属性要素は、所定の左上を持っているようマージン、右、ボタンの境界エッジを設定され、その差は、それが色を持っていることである、とエッジこの要素がブロックに属する元素である実際の状況と同様に、ケースの大きさの幅は、ブロックは、実質的にDIV要素を使用することができます。

boder主な属性:boder幅(幅)、boderカラー(色)、boderスタイル(様式)

オーバーフロー:

规定内容溢出元素框时发生的事情,以及其它的属性,下面例:

visible:内容不会被修剪,会呈现在元素框之外。

hidden:内容会被修剪,并且其余内容是不可见的。

scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

inherit:规定应该从父元素继承 overflow 属性的值。

z-index:

属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面,简单的就是在图片上效果特别明显图片可以在字的后面。元素:

auto:堆叠顺序与父元素相等。

number:设置元素的堆叠顺序。

inherit:规定应该从父元素继承z-index的属性值。

代码:

css

 

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

 

html

<h1>This is a heading</h1>
<img src="/i/eg_smile.gif" />
<p>sssds登记数据库数据后即可</p>

总结:我是觉得前段的知识有很多,需要记得属性也有很多,所以对于我这样的小白来说也希望自己写的东西对于刚刚接触前端的知识的小白也有一定的帮助。

 

おすすめ

転載: www.cnblogs.com/qijiang123/p/11413842.html