ekran: satır içi ve ekran: blok

Aşağıdaki CSS arasındaki temel fark nedir:

display:inline

ve bu:

display:block

Bunları ayrı ayrı bir eleman üzerinde kullanarak aynı sonucu alıyorum.

display: block , öğenin paragraflar ve başlıklar her zaman olduğu gibi bir blok olarak görüntülendiği anlamına gelir. Bir bloğun üstünde ve altında bir miktar boşluk vardır ve başka türlü sipariş edilmediği sürece (örneğin başka bir öğeye bir kayan nokta bildirimi ekleyerek) dışında, yanında hiçbir HTML öğesini tolere etmez.

display: inline , elemanın aynı satırdaki mevcut bloğun içinde satır içi olarak görüntülendiği anlamına gelir. Öğe, yalnızca iki blok arasında olduğunda, mümkün olan en küçük genişliğe sahip olan bir 'anonim blok' oluşturur.

Görüntüleme seçenekleri hakkında daha fazla bilgi edinin: http://www.quirksmode.org/css/display.html

Blok

Öncesinde ve sonrasında yeni bir satırla mevcut tüm genişliği kaplar (display: block;)

Çizgide

Yalnızca ihtiyaç duyduğu kadar genişlik kaplar ve yeni satırları zorlamaz (display: inline;)

display: block - elemandan önce ve sonra bir satır sonu

display: inline - elemandan önce veya sonra satır sonu yok

İşte bir karşılaştırma tablosu:

Sen görebilirsiniz örnekleri burada.

display: block;Bir oluşturur blok düzeyi ise, eleman display: inline;bir oluşturur içi seviyesi elemanı. Css kutu modeline aşina değilseniz, farkı açıklamak biraz zordur, ancak blok seviyeli öğelerin bir belgenin akışını böldüğünü, ancak satır içi öğelerin yapmadığını söylemek yeterlidir .

Blok seviyesi elemanlarının bazı örnekler şunlardır: div, h1, p, ve hrHTML etiketleri.

Satır içi düzey elemanlarının bazı örnekler şunlardır: a, span, strong, em, b, ve iHTML etiketleri.

Şahsen, satır içi öğeleri tipografik öğeler olarak düşünmeyi seviyorum . Bu tamamen veya teknik olarak doğru değildir, ancak çoğunlukla satır içi öğeler metin gibi davranır.

Sen konuyla ilgili makaleyi sonuna kadar bir daha okuyabilir burada . Bu konudaki diğer birkaç kişinin alıntı yaptığını görmek, okumaya değer olabilir.

Ekran: blok tüm satırı alır, yani satır sonu olmadan

Ekran: satır içi yalnızca ihtiyaç duyduğu alanı kaplar.

 #block
  {
   display : block;
   background-color:red;
   border:1px solid;
  }

 #inline
 {
  display : inline;
  background-color:red;
  border:1px solid;
 }

Bu keman örneğinde http://jsfiddle.net/RJXZM/1/ örneğine başvurabilirsiniz .

blok öğeleri üstlerini dolduracak şekilde genişler.

satır içi öğeler, çocuklarını tutacak kadar büyük olacak şekilde daralır.

Ekran bloğu

ekranın tüm satırını (% 100) alır, her zaman ekran boyutunun% 100'üdür

görüntüleme bloğu örneği

ekran: satır içi blok gerektiği kadar genişliği kaplar, ekran boyutunun% 1 ila% 100'ü olabilir

satır içi blok örneği göster

bu yüzden div ve span var

Div varsayılan stili, görüntüleme bloğudur: ekranın tüm genişliğini kaplar

span varsayılan stili display: inline block: span yeni bir satırda başlamaz ve yalnızca gerektiği kadar genişlik kaplar

Öğeye bir arka plan rengi ekleyin ve diğer posterler tarafından açıklandığı gibi satır içi ve blok arasındaki farkı güzelce göreceksiniz.

Ekran: blok 'p' etiketleri ile aynı şekilde davranır ve tüm satırı kaplar ve yüzene kadar yanında hiçbir öğe olamaz. Ekran: satır içi Yalnızca gerektiği kadar alan kullanır ve diğer öğelerin kendisiyle hizalanmasına izin verir.

Form durumunda bu özellikleri kullanın ve daha iyi anlayacaksınız.

bir blok veya satır içi blok bir genişliğe (örneğin, genişlik: 400px) sahip olabilirken, satır içi eleman genişlikten etkilenmez. satır içi öğe bir sonraki metin satırına yayılabilir (örneğin http://codepen.io/huijing/pen/PNMxXL bunu görmek için tarayıcı pencerenizi yeniden boyutlandırır), blok öğesi ise bunu yapamaz.

 .inline {
      background: lemonchiffon;
      div {
        display: inline;
        border: 1px dashed darkgreen;
      }

Blok Elemanları : div, p gibi elemanlar, başlıklar blok seviyesindedir. Yeni satırdan başlarlar ve ana öğenin tam genişliğini kaplarlar. Satır İçi Öğeler : b, i, span, img gibi öğeler satır içi düzeydedir. Asla yeni satırdan başlamazlar ve içerik genişliğini işgal etmezler.

Varsayılan olarak, satır içi öğeler belge akışında yeni bir satırın başlamasını zorlamaz. Öte yandan, blok öğeleri genellikle bir satır sonu oluşmasına neden olur, bu bağlantıya başvurabilirsiniz.