Ryan Doherty tarafından Şubat 2009'da yazılan "Cross-Browser Inline-Block" makalesinin çevirisini size sunmama izin verin. Makale, özellik ayarı ile liste öğelerinin düzenini açıklar görüntüle anlam satır içi blok... Bunun yanı sıra sonuca ulaşma sürecinde ortaya çıkan zorluklar ve "tedavi" yöntemleri hakkında bir makale.
Satır içi blok, mülkün cazip değeri görüntülebu çok şey vaat ediyor ve çok az tatmin ediyor. Çoğu zaman bunun gibi PSD dosyaları alırım:
Ve ağladı.
Tipik olarak, bu görüntüleme yöntemi sorunlu değildir. Sabit genişlik, sabit yükseklik, float: sol ve bitirdiniz. Bir şey için değilse, ama! Tasarım, her miktarda içerikle doğru şekilde görüntülenmelidir. Bizim durumumuzda, bloklardan birinde biraz daha fazla veri varsa, tüm ızgarayı "kıracaktır".
İlk eleman bir sonrakinden daha yüksek olduğu için, beşinci bizim istediğimiz gibi onun altında değil, sağ kenar boyunca "etrafını sarıyor". Genel olarak, tablonun esnekliğine ihtiyacımız var, ancak doğru, anlamsal düzende.
Mülk için liste öğelerinin bulunduğu basit bir örnekle başlayalım. görüntüle ayarlanır satır içi blok:
-
Bu harika
...
- üst öğenin taban çizgisiyle hizalanır
- ... Bu sadece doğrudan adresindeki bir metin düğümü
- ek
-
Bu harika
- değeri kullanılıyormuş gibi görüntülenecek satır içi blok... Nasıl? Kullanacağız hasLayout , IE'nin birçok manipülasyonu mümkün kılan sihirli özelliği. Bir öğe için açıkça belirtemezsiniz hasLayout: true veya bunu benzer basit bir şekilde yapın, ancak mekanizmayı belirleyerek başlatabilirsiniz. yakınlaştırma: 1.
- , IE 7'ye bunları aynı şekilde göstermeyi öğreteceğiz satır içi blok:
- istenilen yükseklikte. İçerik belirtilen değeri aşarsa, yalnızca kabını uzatır. Diğer tüm tarayıcılar görmezden gelir _yükseklik.
-
Bu harika
- Madde 1
- Öğe 2
- Öğe 3
- liste öğesi için varsayılan bir değere sahiptir (liste öğesi). Değer genellikle öğeleri iade etmek için kullanılır
- varsayılan davranışlarına.
ekran: satır içi blok;
Öğe, blok düzeyinde bir "kutu" oluşturur, ancak tüm blok, bir satır içi (satır içi) öğe gibi davranır. Yani, web sayfasının diğer unsurları tarafından "etrafı sarılmıştır".
Tablo düzeyi
Öğelerin HTML tabloları gibi davranmasına izin veren birçok görüntü değeri vardır. Aşağıdaki tablo, "tablo düzeyi" değerlerini ve bunların kısa açıklamasını göstermektedir.
masa Karşılık gelir HTML öğesi. Blok düzeyinde bir "kutu" tanımlar.
tablo-başlık-grubu Karşılık gelir HTML öğesi. tablo satırı Karşılık gelir HTML öğesi. masa hücresi Karşılık gelir HTML öğesi. tablo-sıra-grubu Karşılık gelir tablo altbilgi grubu Karşılık gelir tablo-sütun-grubu Karşılık gelir HTML öğesi. tablo-sütun Karşılık gelir HTML öğesi. tablo başlığı Karşılık gelir HTML öğesi. satır içi tablo Bu, bir HTML öğesiyle doğrudan eşleşmeyen tek değerdir. Öğe, bir HTML tablo öğesi gibi davranacak, ancak blok düzeyinde bir öğe değil, satır içi bir kutu gibi davranacaktır. Masa düzenleri nadiren kullanılsa da, bazı durumlarda çok faydalı olabilirler. Örneğin, tabloyu yalnızca geniş ekranlarda görüntülemek istiyorsanız ve yalnızca daha küçük ekranlar için desteğini koruyun. Bu, medya sorguları ve display özelliğinin bir kombinasyonu ile elde edilebilir.
Daha modern anlamlar
İçeriğin bir web sayfasında görüntülenme biçimi, HTML'nin ortaya çıkmasından bu yana oldukça değişti. Web tasarımcıları bir tür yaratıcı düzen oluşturmak istediklerinde, kullanılan ilk yöntem HTML tablolarını (tablo düzenleri) yerleştirmekti.
CSS daha popüler hale geldikçe, mizanpaj tasarımcıları, istenen efekti elde etmek için içeriği farklı kayan div'lere yerleştirerek kayan mizanpajlara geçti. Bu teknik hala çok yaygındır, ancak flexbox'ın (CSS'deki esnek "kutunun" düzeni) ortaya çıkmasından sonra, bu durum gittikçe daha az sürecektir. Esnek kutu düzeni tüm tarayıcılar tarafından tam olarak desteklendiğinde, esnek düzenler baskın düzen yöntemi haline gelecektir. Bununla birlikte, tüm tarayıcılar flexbox özelliğini desteklemez ve bu, gelişimini büyük ölçüde yavaşlatır.
Flexbox modeli çok güçlü ve çok şey yapabildiği için nasıl çalıştığını ve nasıl kullanılacağını tam olarak anlamak biraz çaba gerektiriyor. Bu modelin derinlemesine incelenmesi için ayrı büyük makalelere ihtiyaç vardır, ancak bugün sadece temelleri dikkate alacağız.
Display: flex; bir öğe için, esnek bir kap haline gelir ve çocukları, bu kabın esnek öğeleri haline gelir. Esnek özellikler, bu öğenin torunları için geçerli değildir. Hem esnek kaplar hem de esnek öğelerin kendi esnek özellikleri vardır.
Öğe bir kutu gibi davranır ve içeriği ızgara modeline göre görüntüler. Izgara modeli bize bir ızgara sistemi oluşturmanın bir yolunu verir ve ızgara öğelerinin konumlandırmasını HTML'yi dahil etmeden yalnızca CSS ile kontrol etmemize olanak tanır. Ortam sorguları ile birlikte kullanıldığında, CSS ızgarası, duyarlı mizanpajların tasarlanması ve oluşturulması söz konusu olduğunda güçlü bir araç haline gelir.
CSS ızgarasının herhangi bir tarayıcıda resmi olarak uygulanmadığını lütfen unutmayın. Bunu desteklemek için tarayıcıların satıcı öneklerini sağlaması ve bayrakları ayarlaması gerekir.
Deneysel değerler (üretim kodunda kullanılmamalıdır)
ekran: alıştırma;
Teorik olarak, bir elemanın display özelliğini alıştırma olarak ayarlarsanız, başka bir bloğun içinde bir blok olarak görünür. Bu özelliğin kullanım örneği, sonraki içerikle aynı satırda görsel olarak konumlandırılan üstbilgiler oluşturmak için özel bir yönteme sahip olmaktır.
Bu amaçla float da kullanabilirsiniz, ancak burada değerin otomatik olarak dizeye uydurulduğu ve taban çizgisine hizalandığı varsayılır.
Lütfen bu değerin yalnızca Internet Explorer 11 ve Opera Mini'de desteklendiğini unutmayın.
Öğe, satır içi gibi davranır ve içeriğini öğenin biçimlendirme modeline göre oluşturur HTML. Kısacası, ek açıklamaların metnin taban çizgisinin yakınında görüntülenmesine izin verir (genellikle telaffuza yardımcı olmak için). Bu teknik Çince ve Japonca'da oldukça yaygındır.
ekran: içerikler;
Bu değerin özü, onu bir öğe üzerinde kullandığınızda, DOM'dan kaybolması, ancak tüm soyundan gelenlerin kalması ve alanlarını kaplamasıdır. Bu özellik şu anda yalnızca Firefox\u003e 59, Chrome\u003e 65, Safari 11.1'de desteklenmektedir.
Kısa özet
Bugün incelenen görüntüleme özelliği için değerlerin listesi gerçekten etkileyici. Sonuçta, teknolojinin gelişmesi, hem yeni tekniklerin hem de web tasarımındaki çeşitli sorunları çözmek için yeni yaklaşımların ortaya çıkmasına yol açmaktadır. Öte yandan, pek çok teknik ahlaki açıdan geçerliliğini yitiriyor ve eski ihtişamını kaybediyor. Bu makalenin, zamana ayak uydurmanıza yardımcı olacağını ve yerleşim sorunlarını daha etkili bir şekilde çözmenize yardımcı olacağını umuyoruz.
İlgili Makaleler
En son makaleler-
23.02.2021Ekstra MTS numaralarıyla ne yapmalı? -
23.02.2021MTS ofisinde veya satış departmanında
Editörün Seçimi-
14.02.2021Sürücüleri yüklemek ve güncellemek için yazılım
Kendi zamanınızdan tasarruf etmek istiyorsanız, bir sürücü kurucusu şarttır. "Sürücü" terimi, ...
-
14.02.2021MHotspot - en son Rusça sürümünde güvenli bir Wi-Fi erişim noktası mhotspot programı oluşturmak için ücretsiz bir program
Son zamanlarda, tek bir işlevi yerine getiren, ancak bunu verimli bir şekilde yapan kompakt uygulamalar giderek daha fazla popülerlik kazanıyor ...
-
14.02.2021Soru: uygulamalar nasıl açılır steam Yeni bir uygulamaya ihtiyacınız var
Windows 10'un piyasaya sürülmesinden bu yana, birçok kullanıcı sorunla karşılaştı - Mağaza yüklenmeyecek. Hala başlatamadıysanız veya açamadıysanız ...
-
14.02.2021Hata kodu: Videodaki Vkontakte'de 3
Bazen, donanımla alakalı Code 3 mavi ekran hataları, bellek (RAM) bozulmasından kaynaklanabilir. Eğer sen...
-
14.02.2021Ftp dosya aktarım hizmetini kullanma
İnternet üzerindeki FTP hizmeti, doğrudan dosya alışverişi için tasarlanmıştır; istemci-sunucu teknolojik temeli üzerine kurulmuştur. Etkileşim oluşur ...
-
Sonuç, Firefox 3, Safari 3 ve Opera'da doğru görünüyor:
Dikey hizalamada bir sorun var gibi görünüyor. Gerçeği söylemek gerekirse, hata yok, bu sadece tarayıcının doğru davranışı, ancak istediğimiz sonuç hiç de değil.
Ve burada olan, her bir öğenin temelini
... Temel nedir diye mi soruyorsunuz? Yüz kez duymaktansa bir kez görmek daha iyidir:
Yukarıdaki resimdeki taban çizgisi, sembollerin tabanından geçen bir çizgi ile gösterilir. Özellik için varsayılan değer dikey hizala -de Çizgide ve satır içi blok öğeler temel... Bu, öğelerin taban çizgisinin ebeveynin taban çizgisi ile hizalandığı anlamına gelir. Aşağıdaki şekil, bu hizalamanın bir örneğini göstermektedir:
Gördüğünüz gibi, yukarıdaki resimdeki blokların her bir taban çizgisi, bir eleman olmayan "Bu temeldir" metninin taban çizgisine hizalanmıştır.
oraya, öğenin temel konumunun bir göstergesi olarak yerleştirilir
.
Başlangıçta istenen hizalama seçeneğini elde etmek oldukça basittir, dikey hizala değer belirt üst ve sonuç olarak harika bir tablo elde edin:
Yalnızca Firefox 2, IE 6 ve 7'de çalışmaz:
Firefox 2 ile başlayalım.
Firefox 2 değeri desteklemiyor satır içi blok, ancak Mozilla'ya özgü anlamı mükemmel bir şekilde anlıyor -moz-satır içi-yığın mülk için görüntüle... Eyleme benzer sonuçlar üretir satır içi blok... Daha önce eklediğimizde ekran: satır içi blokdaha sonra Firefox 2, anlamadığı için yukarıdakileri görmezden gelir ve -moz-satır içi-yığın... Diğer tarayıcılar kullanır satır içi blokonlar için anlaşılmaz olanı görmezden gelmek -moz-satır içi-yığın.
Ne yazık ki, bu küçük bir hataya neden olur:
Açıkçası, buna neyin sebep olduğunu bilmiyorum. Neyse ki, öğenin tüm içeriğini sararak oldukça basit bir şekilde ele alınır. Şimdi IE 7'ye geçelim. İkisini de desteklemiyor satır içi blok, ancak öğelerin Teknik olarak elemanlar hasLayoutayarlanır doğru kendilerini ve çocuklarını göstermekten sorumludur. Bunu şununla birleştir: min-yükseklik ve genişlikve çok yakın bir sonuç alacaksınız ekran bloğu... Görüntülendiğinde ortaya çıkan tüm sorunları ortadan kaldıran sihirli bir pudra gibidir. Ne zaman ekleyeceğiz yakınlaştırma: 1 ve * ekran: satır içi (yıldız işareti IE 6 ve IE 7 için bir hack'tir) elementler için
Neredeyse hazır. Yalnızca IE 6 kalır: IE 6 desteklemiyor min-yükseklik, ancak bunun yerine yanlış mülk erişimini kullanabiliriz yükseklik... Şunun için yükle: _yükseklik (öndeki alt çizgiye dikkat edin) içindeki değeri 250 piksel ve tüm unsurları al Son CSS ve HTML şuna benzer:
Merhaba blog sitesinin sevgili okuyucuları. Bugün, Ekran adlı stil biçimlendirme dilinin oldukça önemli bir kuralı hakkında konuşacağız. Muhtemelen CSS kodunuzda en sık kullanılan değerlerle zaten tanışmışsınızdır: görüntüleme bloğu, yok veya satır içi... Bu yazımızda tüm bunları daha detaylı ve örneklerle ele almaya çalışacağız. Aslında, Html kodunun belirli öğeleri için görüntüleme yöntemlerini ayarlamanıza ve gerekirse değiştirmenize olanak tanır. Bununla, blok öğeleri satır içi veya hatta bir liste haline getirilebilir ve display: none kullanarak, bir web sayfasında dinamikler uygulayabilirsiniz, örneğin, oluşturma komut dosyası olmadan açılır menüler saf CSS'de. Html dili ile ilgili kurstan öğrendiğimiz gibi, web sayfalarında etiketler kullanılarak öğeler oluşturulur ve bunlar da kullandığınız tarayıcının Html ayrıştırıcısı tarafından işlenir ve bunları bilgisayar ekranınızda görüntüler. Bu öğelerin nasıl görüneceği (Html \u200b\u200betiketlerine göre) modern CSS'de tanımlanmıştır. Herhangi bir etiket için herhangi bir özel stil ayarlamamış olsanız bile, bunlar için varsayılan olarak kabul edilen kurallar dikkate alınarak tarayıcı tarafından görüntülenmeye devam edeceklerdir. Bunlara nereye bakabilirsin Tüm Html etiketleri için varsayılan CSS stilleri? Eh, bu sayfada her şey aynı. İçindekiler tablosunun sonuna giderseniz, orada ihtiyacımız olan bilgilerin verileceği bir "" bağlantısı göreceksiniz. Bütün bunlar ne için? Belirli Html etiketlerini açıklarken defalarca bu etiketin hangi türe ait olduğuna dikkatinizi çektim - küçük harf veya blok... Buna bağlı olarak, bu elemanların belirli bir davranışa sahip olduğunu varsaydık - ya genişlikte (blok) kendileri için mevcut olan tüm alanı kaplayacaklar ya da olmayacaklar (küçük harf). Ancak bu bölümün nereden geldiğini ve belirli bir etiketin hangi türe ait olduğunu nereden bulabileceğinizi hiç açıklamadım. Böylece, tam olarak "HTML 4 için varsayılan stil sayfası" adı altında bahsettiğimiz CSS spesifikasyonu sayfasında öğrenebilirsiniz ve tüm bu karışıklıktan özel bir Görüntüleme kuralı sorumludur. Örneğin, en başta bloğa ait olan tüm öğeler orada listelenmiştir ve bu, kuralın kendileri için geçerli olmasından kaynaklanmaktadır. ekran bloğu: Burada aynı etiketleri, kapsayıcıları ve diğer blok öğelerini görebilirsiniz. W3C doğrulayıcısında CSS özelliklerinin ve bunlara izin verilen değerlerin listesine bakarsak, görüntüleme için aşağıdakileri göreceğiz: Aksi belirtilmedikçe, varsayılan değer "display: inline" olacaktır (çünkü bu "İlk değer" sütununda belirtilen değerdir) ve satır içi elemanların oluşumuna karşılık gelir. Bu nedenle, "HTML 4 için varsayılan stil sayfası" spesifikasyon sayfasında, küçük harf olarak görüntülenmesi gereken etiketler (örneğin, aralık) hiç tanımlanmaz veya bunlar için Görüntü değeri belirtilmez, çünkü varsayılan olarak yine de küçük harf. Görüntüleme kuralı, belirli bir öğenin nasıl oluşturulması ve tarayıcıda görüntülenmesi gerektiğinden sorumludur. Tarayıcıya etiketin ne olduğunu ve nasıl görüntüleneceğini söyler. Bir satır öğesi (ekran: satır içi) veya bir blok (blok) olarak göstermek, bir tablo (tablo) olarak veya bir tablonun parçası olarak (satır içi tablo | tablo-satır grubu | tablo-başlığı-) göstermek mümkündür grup | tablo-altbilgi-grubu | tablo-satırı | tablo-sütun-grubu | tablo-sütun | tablo-hücre | tablo-başlığı). Bu kural çok önemlidir. Ancak etiketler için varsayılan olarak ayarlanan şey hiç de sabit bir değer değildir. İsterseniz veya ihtiyacınız olursa, her zaman bir blok öğesi (tarayıcının kullandığı ekran: varsayılan olarak blok) satır içi ve buna göre tersi yapabilirsiniz. Biri varsayılan olarak satır içi (açıklık) ve diğer ikisi bloklu (H3 ve P) olmak üzere üç etiket içeren basit bir örneğe bakalım. Netlik sağlamak için, şu unsurlar için ayrılan alanı doldurdum: P - başka bir varsayılan blok Sonuç olarak, tarayıcı tüm öğeleri tam olarak varsayılan Görüntüleme kuralı değerlerine göre görüntüler: Gördüğünüz gibi, ilk H3 bloğu (varsayılan değer bloğuyla birlikte), kendisi için mevcut olan tüm yatay boyutu (ve üçüncü P elemanını) alırken, satır içi Span (varsayılan değer ekran: satır içi) tam olarak kapalı içerik yayınlamak için gerektiği kadar genişlikte alan. Peki, şimdi hadi başlangıçta H3 blok etiketinden küçük harf yapacağız buna satır içi ekran ekleyerek (daha fazla netlik için ilk iki öğedeki metni küçülttüm): P başka bir varsayılan blok etiketidir Gördüğünüz gibi, tarayıcı görüntülemeyi hesaba kattı: satır içi ve şimdi H3 başlık öğesi (başlangıçta blok) artık mevcut tüm alanı kaplamıyor, bunun sonucunda bir sonraki satır içi Span etiketi ona bastırılıyor. Ancak öncekine yakın basmadı, ancak bir boşlukla ayrıldı. H3 başlığı bir blok olduğunda, bu boşluk dikkate alınmadı, ancak küçük harfli bir etikete yeniden doğduktan sonra, koddaki her şey, hiper metin biçimlendirme dilinin tüm kurallarına göre tek bir alana dönüştürüldü. verilen bağlantıda hakkında bilgi edinin. Benzer şekilde şunları yapabilirsiniz: satır içi etiket aralığından bloğa display: block: ekleyerek: P, başka bir varsayılan Html blok öğesidir Ve sonuç olarak, görsel yardımlarımız neler olduğunu gösterecek: Span, bu etiketin içerdiği içerik miktarına bakılmaksızın, genişlikte kullanabileceği tüm alanı kaplamaya başladı. Şimdi, liste öğeleri olarak bir dizi blok etiketi yapmak için Ekran'ı kullanmayı deneyelim. Kural, bununla başa çıkmamıza yardımcı olacaktır. görüntüleme: liste öğesi... Başlangıçta birkaç paragraf ve bir başlık alalım: İlk paragraf (P etiketi)
İkinci paragraf
Üçüncü Bu şuna benzer bir şeye benzeyecek: Şimdi, tüm CSS paragraf blok etiketlerine display: list-item kuralını eklersek, tarayıcı tüm bu öğeler için işaretçi için varsayılan olarak kullanılan aynı işaretlerin görüneceği özel bir alan oluşturacaktır: İlk paragraf (P etiketi) İkinci paragraf Üçüncü Ancak bu formda herhangi bir değişiklik fark etmeyeceksiniz. İşaret alanı, blok etiket alanının önüne eklenir ve onu görmek için, bu bloğu içinde yaşadığı konteynerin kenarının soluna bir şekilde taşımanız gerekir. Bu, aynı şekilde, yani gerekli paragraflar için margin-left: 20px yazarak (veya örneğin, paragrafları ekleyerek) yapılabilir ve sonra aşağıdaki resmi elde ederiz: Görünüşe göre, Görüntüleme kuralı yardımıyla, bu aynı etiketleri değiştirmeden, istediğiniz zaman Html kodunda bulunan öğeleri başkalarıyla değiştirebilirsiniz (yalnızca web sayfasında görüntülenme biçimini değiştirerek). Gerçek şu ki, kodda çok sayıda etiket olabilir ve hepsini manuel olarak değiştirmek zor olacaktır, ancak Ekran yardımı ile harici bir basamaklı stil sayfası dosyası aracılığıyla birkaç tıklamayla yapılabilir. uygun. Sana iyi şanslar! Yakında blog sitesi sayfalarında görüşmek üzere İlgini çekebilir display, şablon kontrolü için en önemli CSS stil özelliğidir. Her öğenin, öğenin hangi tür olduğuna bağlı olarak varsayılan bir görüntüleme değeri vardır. Çoğu öğe için, varsayılan görüntüleme değerleri genellikle blok veya satır içi olacaktır. Orijinalde, bir blok elemanına genellikle blok seviyesinde bir eleman denir; bir satır içi elemanın alternatif bir adı yoktur. div, standart bir blok öğesidir. Blok öğeleri yeni bir satırda başlar ve içerikleri mümkün olduğunca sola ve sağa uzatılır. Diğer yaygın blok öğeleri, p ve formun yanı sıra üstbilgi, altbilgi, bölüm ve diğerleri gibi daha yeni HTML5 blok öğeleridir. span, standart bir satır içi öğedir. Satır içi bir öğe, bir paragraf içindeki metni kaydırabilir böyle yapısını bozmadan. En yaygın satır içi öğe, onu bağlantılar için kullandığınız için a'dır. Başka bir yaygın görüntü değeri yok. Komut dosyası gibi bazı özel öğeler bu varsayılanı kullanır. Öğeleri silmek ve yeniden oluşturmak yerine gizlemek ve göstermek için JavaScript ile yaygın olarak kullanılır. Görünürlükten farklıdır. Display özelliğinin none olarak ayarlanması, sayfayı öğe yokmuş gibi işler. görünürlük: gizli; basitçe öğeyi gizler, ancak öğe, sanki tamamen görünürmüş gibi alanı kaplamaya devam eder. Liste öğesi ve tablo gibi görüntüleme için daha birçok egzotik stil değeri vardır. İşte tam bir liste. Satır içi blok ve esnekliği daha sonra tartışacağız. Dediğim gibi, her öğenin varsayılan bir görüntü türü vardır. Ancak, bunu her zaman geçersiz kılabilirsiniz! Div'i satır içi yapmak mantıklı olmasa da, bunu öğelerin görünümünü özel anlamlarla özelleştirmek için kullanabilirsiniz. Tipik bir örnek, yatay bir menü için li öğelerini sıralayabilme yeteneğidir. Son güncelleme: 04/27/2016 Bir elemanın konumunu değiştirmenize izin veren float özelliğinin yanı sıra, CSS'de bir başka önemli özellik daha vardır - display. Bir öğenin bloğunu kontrol etmenize ve ayrıca komşu öğelere göre konumunu etkilemenize izin verir. Bu özellik aşağıdaki değerleri alabilir: satır içi: öğe, metin satırındaki sözcükler gibi satır içi olur blok: öğe bir paragraf gibi blok haline gelir satır içi blok: öğe bir metin satırı olarak konumlandırılır liste öğesi: öğe, genellikle bir nokta veya sıra şeklinde bir madde işaretinin eklenmesiyle bir liste öğesi olarak konumlandırılır alıştırma: elemanın blok tipi, çevreleyen elemanlara bağlıdır flex: elemanların esnek konumlandırılmasına izin verir tablo, satır içi tablo: bir tablodaki öğeleri düzenlemenizi sağlar yok: öğe görünmez ve html biçimlendirmesinden kaldırılır Yani blok değeri, bir blok elemanı tanımlamanıza izin verir. Böyle bir öğe, varsayılan olarak blok olan ve bir web sayfası oluşturulurken yeni bir satıra görsel olarak kaydırılan p paragraf öğesi veya div öğesi gibi bir satır sonu ile komşularından görsel olarak ayrılır. Ancak, div öğesinden farklı olarak span öğesi bloklu değildir. Bu nedenle, blok değeri uygulandığında ona ne gibi değişiklikler olacağını görelim:
Burada tanımlanan iki yayılma öğesi vardır, ancak bunlardan biri, display stiline sahip olduğu için bloktur: blok; ... Bu nedenle, bu yayılma öğesi yeni bir satıra sarılır. Blok öğelerinden farklı olarak, satır içi öğeler, görüntüleme özellikleri satır içi olduğu için satırla hizalanır. Yayılma öğesi öğesi varsayılan olarak display: inline stiline sahiptir, bu nedenle paragraflar veya div'ler gibi etrafına sarılmak yerine satırla hizalı olur. Ve şimdi ters işlemi yapalım - blok div öğesini satır içi yapın:
Satır içi değeri uygularken tarayıcının genişlik, yükseklik, kenar boşluğu gibi bazı özellikleri göz ardı ettiğini unutmayın. Diğer bir değer olan satır içi blok, blok ve satır içi özelliklerin bir karışımına sahip bir öğeyi temsil eder. Bitişik dış elemanlarla ilgili olarak, böyle bir eleman küçük harf olarak kabul edilir. Yani, komşu elemanlardan satır besleme ile ayrılmaz. Bununla birlikte, iç içe geçmiş öğelerle ilişkili olarak, blok düzeyi olarak kabul edilir. Ve genişlik, yükseklik, kenar boşluğu özellikleri böyle bir elemana uygulanır.
Sütunun kuyruğunda yaklaşık yarım mil gittikten sonra durdu Kuyrukta yarım mil seyahat etmiş sütunlar, o durdu İlk yayılma öğesi satır içi ve satır içi bir değere sahiptir, bu nedenle onun için genişlik ve yükseklik özelliklerini kullanmanın bir anlamı yoktur. Ancak ikinci yayılma öğesi, satır içi blok değerine sahiptir, bu nedenle ona hem genişlik hem de yükseklik uygulanır ve gerekirse dolguyu da ayarlayabilirsiniz. Alıştırma değeri, komşu öğelere bağlı olan bir öğeyi tanımlar. Ve burada üç olası seçenek vardır: Eleman blok elemanlarla çevrilidir, sonra aslında ekrana sahiptir: blok stili, yani bloğun kendisi olur Öğe, satır içi öğelerle çevrilidir, sonra aslında ekrana sahiptir: satır içi stil, yani satır içi hale gelir Diğer tüm durumlarda, eleman blok olarak kabul edilir Tablo değeri, esasen öğeyi bir tabloya dönüştürür. Bir liste örneğine bakalım:
Burada liste bir tabloya dönüşür ve listenin her bir öğesi ayrı bir hücre olur. Bunu yapmak için, liste öğesi display: table-cell stiline sahiptir. Aslında bu liste yerine standart bir tablo kullanabiliriz. Hiçbiri değeri, web sayfasında görünmeyen bir öğeyi gizlemenize izin verir:
İlk paragraf İkinci paragraf Üçüncü paragraf Görüntü özelliği, web tasarımcılarının bir düzen oluşturmak için kullandıkları en önemli CSS özelliklerinden biridir. Bu özellik için en popüler değerler blok, satır içi ve yok değeridir. Tablo ve satır içi blok değerleri de oldukça yaygındır. Ancak bu değerlerin yanı sıra, kullanılabilecek ve kullanılması gereken ve bilmediğiniz birçok değer var. Bu nedenle, bu gönderi, CSS stillerindeki display özelliğinin farklı değerlerini keşfetmeye adanmıştır. Display özelliği hakkında konuşmadan önce, kutu ağacından bahsetmeliyiz. CSS, öğeler ve metin düğümlerinden oluşan bir ağaç olarak düzenlenmiş orijinal belgeyi alır ve bir tuval üzerinde görüntüler (monitör ekranı gibi). Bunun için bir ara yapı yaratır, blok ağaç, bitmiş (işlenmiş) belgenin biçimlendirme yapısıdır. Blok ağacındaki her blok, tuval üzerinde uzayda ve / veya zamanda karşılık gelen bir öğeye karşılık gelir. Bir blok ağacı oluşturmak için CSS, kaynak ağacındaki her öğeye her CSS özelliği için hesaplanan bir değer atamak üzere öncelikle basamaklama ve kalıtım kullanır. Daha sonra, CSS, her bir öğe için, o öğenin display özelliği tarafından belirtildiği gibi sıfır veya daha fazla kutu oluşturur. Başka bir deyişle, display özelliği, içindeki her bloğun görüntü tipini belirler. blok ağaç. Tüm öğelerin varsayılan bir görüntüleme değeri vardır, ancak görüntüleme değerini açıkça başka bir şeye ayarlayarak bunu geçersiz kılabilirsiniz. XML'deki varsayılan (ve ayrıca SVG öğeleri için) satır içidir. HTML'de, varsayılan görüntüleme özelliği değerleri, HTML özelliklerinde açıklanan davranıştan veya tarayıcı / kullanıcı varsayılan stil sayfasından alınır. Öğe, blok düzeyinde bir "kutu" oluşturur. Bu seviyedeki tüm elemanlar yeni bir satırda (dikey olarak) başlar ve aksi belirtilmedikçe, konteynerlerinin genişliğine kadar uzanır. Herhangi bir kenar boşluğu belirtilmemişse, öğeler birbirine bitişiktir. Normal belge akışından bir öğeyi ve alt öğelerini kaldırır. Belge, öğe hiç var olmamış ve kapladığı alan ayrılmamış gibi görüntülenir. Ekran okuyucular da böyle bir öğenin içeriğini görmezden gelir. ekran: satır içi; Öğe, bir veya daha fazla satır içi blok oluşturur (bir satırda, bir satırda bloklar). Satır içi düzey öğeler, etiketlerinin tanımladığı kadar satır alanı kaplar. Blok düzeyindeki öğelerin tamamlayıcısı olarak düşünülebilir. ekran: liste öğesi; Liste öğesi olarak görüntülenen bir öğe, blok düzeyinde bir öğe gibi davranır, ancak ek olarak işaretçi için bir kutu oluşturur. Yalnızca öğeler 
Blok ve satır içi görüntüleme - satır içi blok nasıl yapılır
H3 varsayılan olarak bloklu olarak işlenecek
Aralık, satır içi bir etiketin tipik bir örneğidir
H3
Aralık
H3
Aralık
Liste öğesi görüntüle - blok etiketlerine dayalı listeler oluşturun
H3
H3
adresine giderek daha fazla video izleyebilirsiniz
");">
CSS'de kaydırın ve temizleyin - blok düzeni araçları 
Konum (mutlak, göreceli ve sabit) - HTML öğelerini CSS'de konumlandırma yolları (sol, sağ, üst ve alt kurallar) 
Fare imlecini değiştirmek için Z-endeksi ve CSS İmleç kuralı ile konumlandırma 
Yükseklik, genişlik ve taşma - bir blok düzeninde içerik alanını tanımlamak için CSS kuralları 
HTML'de metin dekorasyonu için CSS özellikleri metin süsleme, dikey hizalama, metin hizalama, metin girintisiblok
Çizgide
yok
diğer ekran değerleri
ilave
satır içi blok
çalıştırmak
Tablo görünümü
Bir öğeyi gizlemek
Temel CSS görüntüleme özelliği değerleri
Hamachi programını kullanmayı öğrenmek
VKSaver programı hakkında genel bilgiler
PC için Ücretsiz Karıştırma Konsolu Simülatörleri: En İyi DJ Araçlarını İndirme
Hafıza kartı veri kurtarma yazılımı
RunDLL hatası nasıl giderilir