[css] display, position

9679 ワード
CSS テキストリンク

<div>


block level、block単位で1行を占める

<span>


inline level、1行で並べ替えることができます

場所はディスプレイで変更できます


inline-block


1行に複数入れてブロックなのでボックスのみ変更

display:inline


コンテンツがspanのように表示されない場合
インラインは内容そのものしか飾らないからです.コンテンツサイズで拡大

display:block


インクライン貨物
inline-blockは長方体で、1行に複数並べ替えることができる特殊なボックスです.
積み木はテーブルで、一列に1つ作ります

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<article class="container">
  <div></div>
  <div class="box">I'm Box</div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  
</article>
</body>
</html>
div, span{
  width:50px;
  height:50px;
  margin-bottom:20px;
  background: pink;
}

.container{
  background:yellow;
  left:20px;
  top:20px;
  /* position:static; 으로 기본값 지정되어 있어서 변화 없음 */
  position:relative;  /* relative: 원래 아이템이 있어야하는 자리에서 상대적으로 옮겨간다! */
}

.box{
  background:aqua;
  left:20px;
  top:20px;
// position: relative;
// position: absolute;  /* 내 아이템이 가장 가까이 담겨있는 상자 안에서(.container) 위치변경이 일어남*/
// position: fixed; /* 상자에서 완전히 벗어나 페이지 안에서 옮겨간다 */
position: sticky;  /* 원래 있어야하는 자리에 그대로 있으면서 스크롤링해도 변화없이 그자리에 고정*/
}
unity 3 d UGUIG Buttonイベントの傍受
Buttonボタンの押下と持ち上げクリックイベント