CSS ekran özelliğini anlama

Sep 14, 2025

Nasıl Yapılır

Gece yarısı ve bu bir div Sitenizde hala çocuğun oyuncak göğsüne benziyor. Tüm unsurlar, jumbled bir karışıklıktır ve her oynadığınızda Css 'S Görüntüle mülk, kendilerini tamamen farklı bir saçmalıkta yeniden düzenlerler.

Benim gibiyseniz, muhtemelen bunu nefesiniz altında mırıldanarak ve klavyenizle sürekli olarak daha agresif hale gelerek bunu çözeceksiniz. Ve bu strateji daha önce benim için çalışmış olmasına rağmen, yakın zamanda anlamak için daha iyi bir yol bulmak için yola çıktım. Görüntüle Emlak.

Temellerini ortaya çıkarıyor Görüntüle aslında düşündüğümden çok daha basit. Aslında, aynı prensipleri bir bavul ambalaj olarak kullanırlar. Ben kapsayacağım Ekran bloğu , satır içi blok ve Çizgide . Daha önce düzenli olarak bir bavul düzenlediyseniz, paralel göreceksiniz. Eğer tüm kıyafetlerinizi bir HaphAzard tarzında koç olan bir tür kişi iseniz - iyi, sadece sizin için yapabileceğim çok şey var.

Bavulumuz üç tür kıyafet içerecektir:

Şarmanlar, yakalı bir gömlek gibi
Yuvarlanabilecek tişörtler
Boşluklara doldurulabilecek çorap veya iç çamaşırı

Referans için, bavulu HTML'de modellersek, şöyle görünür:

 & lt; div class = 'bavul' & gt;
    & lt; div sınıf = 'hassas' & gt; / div & gt;
    & lt; div class = 'tshirt' & gt; / div & gt;
    & lt; div class = 'tshirt' & gt; / div & gt;
    & lt; div class = 'tshirt' & gt; / div & gt;
    & lt; div class = 'tshirt' & gt; / div & gt;
    & lt; div sınıf = 'çorap' & gt; / div & gt;
    & lt; div class = 'tshirt' & gt; / div & gt;
    & lt; div class = 'tshirt' & gt; / div & gt;
    & lt; div class = 'tshirt' & gt; / div & gt;
    & lt; div class = 'tshirt' & gt; / div & gt;
& lt; / div & gt;

Üstte hassas maddeler

The collared shirt sits on a pile of the clothes beneath it. It is the only item that occupies its own layer — Yakalı gömlek, altındaki kıyafetlerin yığını üzerinde oturur. Kendi katmanını kaplayan tek maddedir.

Ekran bloğu Çoğu HTML öğesi için varsayılandır. Bu, elemanın konteynerindeki tüm yatay boşluğu işgal ettiği anlamına gelir. div . Diğer kardeş elemanlarının yanındaysa, yeni bir satıra başlar ve hattındaki diğer elemanlara izin vermez. Bavulunuzun üstüne koyduğunuz hassas maddelere benzer. Bunlar, yakalı gömlekler gibi hassas veya akıllı makalelerdir. Onların kırılmasını istemiyorsun, bu yüzden diğer giysi parçalarına karşı itmediklerinden emin oluyorsun.

Bu, en zor bölümlerinden birini getiriyor Ekran bloğu . Şaraplanmış gömleğin bavulun tüm genişliğini nasıl işgal etmediğine dikkat edin. Bu, diğer eşyaların seviyesine kadar atlayacağı anlamına gelmez. Diyelim ki bu gömleğin bavulun genişliğinin yüzde 60'ını; Diğer unsurları hala üst düzeyde birleştirmeden engeller.

Bu yüzden resimde turuncu bir sınır var. Bir Ekran bloğu Tüm yatay boşluğu işgal etmezse eleman otomatik olarak bir marjı ekler.

Düzgünce paketlenmiş t-shirtler

Here we can see the top and bottom rows of T-shirts, with four shirts in each — Burada T-Shirt'in üst ve alt sıralarını, her birinde dört gömlekle görebiliriz.

Bavulunuzun çoğu muhtemelen seyahatiniz için kıyafetinizin geri kalanıyla doludur. Sadelik uğruna bunu sadece tişörtlere düşüreceğiz. Katlama veya haddeleme daha verimli olup olmadığına dair internette büyük bir tartışma var. Ben katlanır bir insanım.

Her neyse, çoğu öğeye uyacak şekilde, tişörtlerinizi yan yana sıralayın. Bu tam olarak ne Ekran: satır içi blok içindir. Bu elemanlar aynı çizgide yanı sıra yanında yan yana oturabilir. Ekran: satır içi elementler.

Aksine Ekran: satır içi Elements, satır içi blok eleman, içeriğine uymuyorsa bir sonraki satıra geçecektir. div diğerinin yanında satır içi blok elementler. Bir sonraki satıra bir t-shirt dökülmesi için, yarıya indirmeniz ve yeni bir satır başlatmak için kalan yarıyı kullanmanız gerekir. Satır içi blok Bir çizgiye uymuyorlarsa, elemanların yarıya bölünmesine izin verilmez.

Boşlukları dolduran çoraplar

The socks are inline elements, which means they will fill the gaps around the T-shirts — Çoraplar satır içi öğelerdir, bu da tişörtlerin etrafındaki boşlukları dolduracakları anlamına gelir.

Orijinal HTML'yi tekrar kontrol edin ve bir çorap olduğunu unutmayın. & lt; div & gt; sekiz tişört arasında. Ancak sağdaki bavulun yatay görünümüne bir göz atın. Bir çorap varsa & lt; div & gt; , Orta sırayı nasıl bitirir ve alt sıraya nasıl başlar? Bu amacı Ekran: satır içi K!

Bir Çizgide eleman, genişliğini aşıyorsa, eleman bir sonraki satıra sızacaktır. div (bu şekilde farklıdır satır içi blok veya blok ). Çoraplarımızdan beri div Boşluklara çarpılan çoraplarla doludur, orta satırın sağ tarafındaki boşluğu doldurmayı kolayca başlatabilir ve alt sıraya başlamak için dökülür.

Bunun gerçekleşmesi için yarım yarıya kesilmesi gerekmez. Bu yüzden olabilirler Çizgide , t-shirtler sadece olabilirken satır içi blok . Eğer orta satırdaki tişörtler sadece genişliğin yüzde 60'ını aldı, çoraplar & lt; div & gt; sıranın geri kalanındaki tüm alanı doldurmak için yukarı hareket eder.

İyi yolculuklar

Bu bizim çanta için son CSS:

 .delicate {
    Ekran bloğu;
    Genişlik:% 60;
}

.tshirt {
    Ekran: satır içi blok;
    Genişlik:% 20;
}

.çorap{
    Ekran: satır içi;
}

İşte ekranın farklı kullanımlarını göstermek için birkaç alternatif senaryo. Üzerindeki enkazlar Ekran: satır içi blok , tişörtlerin yanında sağa sığacaklardı. T-shirtlerin bazıları üst çizgiye kadar hareket eder ve diğerleri buna göre ayarlanır. Kolsuz gömleğin sol ve sağında rahat bir tampon olmazdı.

Her tişörtü vardı Ekran bloğu , birbirlerinin üstüne, bir satır başına bir tane büyük tişört yığını olacaktır. Çoraplar vardı Ekran: satır içi blok , hepsi iki satır arasında akmak yerine alt sıraya otururlardı. Bazı tişörtler, dördüncü bir satır oluşturarak başka bir satıra itilecektir. Orta tişörtlerin sağında bir boşluk olacaktı.

Burada belirttiğim yöntemle, mevcut alanın en iyi şekilde kullanılmasını sağlayan düzgünce paketlenmiş bir bavulla sonuçlanırız.

Bu makale başlangıçta ortaya çıktı net dergisi Sayı 289; buradan satın al K!

İlgili Makaleler:

HTML ve CSS'yi öğrenmek için en iyi kaynaklardan 5
Postcss-FlexBox ile karmaşık düzenler oluşturun
28 SPS ÖZEL ÖRNEKLERİ

CSS ekran özelliğini anlama

Üstte hassas maddeler

Düzgünce paketlenmiş t-shirtler

Boşlukları dolduran çoraplar

İyi yolculuklar

Nasıl Yapılır - En Popüler Makaleler

Maya'da retikolojiyi hızlandırma

bir manga klasik yeniden yaratıldı

Birlik varlık ithalat boru hattını anlamak

Kafanızı bu beş faktörle tepki verir

Etkileşimli 3D tipografi etkilerini

Bir Chatbot Arayüzü Nasıl Yapılır

Sitenize görsel ipuçları ekleyin

Damat dayanılmaz bir kürklü yaratık

Kategoriler