1000 * 0.75 = 750 pikseldir. Kullanıcı tarayıcı penceresini yeniden boyutlandırırsa, gövde öğesinin genişliği ve buna bağlı olarak iç içe div bloğunun genişliği de değişir.

Yükseklik özelliği için yüzde değerleri, genişlik özelliğine benzer şekilde çalışır, yalnızca şimdi yükseklik, kap öğesinin yüksekliğinden hesaplanır.

Örneğin:

Aynı zamanda, elemanın gerçek boyutları, genişlik ve yükseklik özelliklerinde ayarlananlardan farklı olabilir. Örneğin:

Ekran görüntüsünde görebileceğiniz gibi, gerçekte, width özelliğinin değeri - 200px - yalnızca öğenin iç içeriğinin genişliğini belirler ve öğenin kendisinin bloğunun altında, genişliği olan alan tahsis edilir. iç içeriğin genişliğine (width özelliği) + padding (padding özelliği) + border genişliğine ( border-width özelliği) + kenar boşluklarına (margin özelliği) eşittir. Yani, öğenin genişliği 230 piksel olacak ve öğe bloğunun genişliği, kenar boşlukları dikkate alındığında 250 piksel olacaktır.

Elemanların boyutları belirlenirken bu tür hesaplamalar dikkate alınmalıdır.

Kullanarak ek setözellikleri, minimum ve maksimum boyutları ayarlayabilirsiniz:

min-width : minimum genişlik

maksimum genişlik : maksimum genişlik

min-height : minimum yükseklik

maksimum yükseklik : maksimum yükseklik

minimum genişlik: 200 piksel genişlik: %50; maksimum genişlik: 300 piksel

Bu durumda elemanın genişliği, kap elemanının genişliğinin %50'sine eşittir, ancak 200 pikselden az ve 300 pikselden fazla olamaz.

Blok genişliğini yeniden tanımlama

Box-sizing özelliği, ayarlanan öğelerin boyutlarını geçersiz kılmanıza olanak tanır. Aşağıdaki değerlerden birini alabilir:

içerik kutusu : Tarayıcının, öğelerin gerçek genişliğini ve yüksekliğini belirlemek için genişlik ve yükseklik özelliklerinin değerlerine kenarlık genişliği ve dolgu eklediği özelliğin varsayılan değeri

padding-box: web tarayıcısına öğenin genişliğinin ve yüksekliğinin değerinin bir parçası olarak dolgu içermesi gerektiğini söyler. Örneğin, aşağıdaki stilimiz olduğunu varsayalım:

Genişlik: 200 piksel yükseklik: 100 piksel; kenar boşluğu: 10 piksel dolgu: 10 piksel kenarlık: 5 piksel katı #ccc; arka plan rengi: #eee; kutu boyutlandırma: dolgu kutusu;

Burada bloğun iç içeriğinin gerçek genişliği 200 piksel (genişlik) - 10 piksel (sol dolgu) - 10 piksel (sağ dolgu) = 180 piksel olacaktır.

Şunu belirtmekte fayda var ki, çoğu modern tarayıcılar bu özelliği desteklemeyin.

border-box: web tarayıcısına öğenin genişliğinin ve yüksekliğinin değerinin bir parçası olarak dolgu ve kenarlıklar içermesi gerektiğini söyler. Örneğin, aşağıdaki stilimiz olduğunu varsayalım:

Genişlik: 200 piksel yükseklik: 100 piksel; kenar boşluğu: 10 piksel dolgu: 10 piksel kenarlık: 5 piksel katı #ccc; arka plan rengi: #eee; kutu boyutlandırma: kenarlık kutusu;

Burada bloğun iç içeriğinin gerçek genişliği 200px (genişlik) - 10px (sol dolgu) - 10px (sağ dolgu) - 5px (sınır-sol-genişlik) - 5px (sağ kenarlık genişliği) = 170 piksel.

Örneğin, yalnızca box-sizing özelliğinin değerinde farklılık gösteren iki kutu tanımlayalım:

İlk durumda, bloğun boyutu belirlenirken, bordür kalınlığına genişlik ve yükseklik özellikleri eklenecek, ayrıca padding ve padding, böylece ilk blok büyük olacaktır.

Tanım

Blok veya değiştirilebilir öğelerin yüksekliğini ayarlar (örneğin, etiket ). Yükseklik, elemanın etrafındaki sınırların kalınlığını, dolgu ve kenar boşluklarını içermez.

Bloğun içeriği belirtilen yüksekliği aşarsa, elemanın yüksekliği değişmeden kalır ve içerik onun üzerinde görüntülenir. Bu özellik, HTML kodunda öğeler sıralı olduğunda öğe içeriğinin çakışmasına neden olabilir. Bunun olmasını önlemek için öğenin stiline overflow : auto ekleyin.

Sözdizimi

yükseklik: değer | faiz | oto | miras

değerler

Değerler, CSS'de kabul edilen piksel (px), inç (inç), nokta (pt) vb. gibi herhangi bir uzunluk birimidir. Yüzde gösterimi kullanılırken, bir öğenin yüksekliği, ana öğenin yüksekliğine bağlı olarak hesaplanır. . Üst öğe açıkça belirtilmemişse, tarayıcı penceresi üst öğe olarak işlev görür. öğenin içeriğine göre yüksekliği otomatik olarak ayarlar

HTML5 CSS2.1 IE Cr Op Sa Fx

Sonuç bu örnekŞek. bir.

Pirinç. 1. Yükseklik özelliğinin uygulanması

Nesne Modeli

document.getElementById("elementID ").style.height

tarayıcılar

Tarayıcı Internet Explorer 6, yüksekliği yanlış bir şekilde minimum yükseklik olarak tanımlar.

İlginç modda, 8.0 sürümüne kadar olan Internet Explorer, bir öğeye dolgu, kenar boşlukları ve kenarlıklar eklemeden bir öğenin yüksekliğini yanlış hesaplar.

Internet Explorer 7.0 sürümüne kadar devralma değerini desteklemez.

Varsayılan olarak, blok öğeleri otomatik genişliği kullanır. Bu, elemanın yatay olarak tam olarak olduğu kadar gerileceği anlamına gelir. boş alan. Blok öğelerinin yüksekliği varsayılan olarak otomatik olarak ayarlanır, yani. tarayıcı, tüm içeriğin görüntülenmesi için içerik alanını dikey yönde uzatır. Bir öğenin içerik alanı için özel boyutlar ayarlamak için genişlik ve yükseklik özelliklerini kullanabilirsiniz.

CSS genişlik özelliği, bir öğenin içerik alanının genişliğini ayarlamanıza ve height özelliği, içerik alanının yüksekliğini ayarlamanıza olanak tanır:

Genişlik ve yükseklik özelliklerinin yalnızca içerik alanının boyutunu tanımladığını, bir blok öğesinin toplam genişliğini hesaplamak için içerik alanının genişliğini, sol ve sağ dolguyu ve sol ve sağ kenarlığın genişliğini eklediğinizi unutmayın. . Aynısı, elemanın toplam yüksekliği için de geçerlidir, yalnızca tüm değerler dikey olarak hesaplanır:

Bu paragraf için yalnızca genişlik ve yüksekliği ayarlayın.

Bu paragraf, genişlik ve yüksekliğe ek olarak bir girinti, bir kenarlık ve bir girinti içerir.

Denemek "

Örnek, ikinci öğenin birinciden daha fazla yer kapladığını açıkça göstermektedir. Formülümüze göre hesap yaparsak, ilk paragrafın boyutları 150x100 piksel, ikinci paragrafın boyutları ise:

Toplam yükseklik:	5 piksel	+	10 piksel	+	100 piksel	+	10 piksel	+	5 piksel	= 130 piksel
	üst çerçeve		üst girinti		yükseklik		daha düşük girinti		daha düşük çerçeve

yani 180x130 piksel.

eleman taşması

Öğenin genişliğini ve yüksekliğini tanımladıktan sonra, önemli bir noktaya dikkat etmelisiniz - öğenin içinde bulunan içerik belirtilen blok boyutunu aşabilir. Bu durumda, içeriğin bir kısmı öğenin sınırlarının ötesine geçecek, bu hoş olmayan anı önlemek için kullanabilirsiniz. CSS özelliği taşma. taşma özelliği tarayıcıya bloğun içeriği boyutunu aşarsa ne yapacağını söyler. Bu özellik dört değerden birini alabilir:

• görünür, tarayıcı tarafından kullanılan varsayılan değerdir. Bu değeri belirtmek, taşma özelliğini ayarlamamakla aynı etkiye sahip olacaktır.
• kaydırma - Bir öğeye dikey ve yatay kaydırma çubukları ekler.
• auto - Gerekirse kaydırma çubukları ekler.
• gizli - blok öğesinin sınırlarını aşan içeriğin bir kısmını gizler.

Bu yazıda, CSS'de bir bloğun yüksekliğini genişliğinin yüzdesi olarak nasıl ayarlayabileceğinize bakacağız. Farklı boyutlardaki görüntülerden bir Bootstrap carousel (kaydırıcı) oluşturma örneğini kullanarak bu teknolojinin uygulamasını ele alacağız.

Genişliğinin belirli bir yüzdesine sahip yükseklikte bir blok oluşturma

1. 2 bloktan bir HTML yapısı oluşturun:
   İlk blok 2 sınıfa sahiptir. Öğeye duyarlı sınıfı kullanarak bloğu göreceli konumlandırmaya ayarlayalım. Bu, 2. blok için yapılmalıdır (ki mutlak konumlandırma) ona göre yer alır. Ek olarak, bu sınıf aynı zamanda sözde elemanın başına:before karşılık gelen elemanların içeriğinden önce (öğe duyarlı) eklemek için kullanılır. Bu eleman, padding-top CSS özelliğini kullanarak istenen blok yüksekliğini genişliğine göre ayarlayacaktır. Kandırmak Bu method padding özelliği değere ayarlanmışsa piksel cinsinden değil, yüzde olarak, tarayıcı tarafından genişliğine göre hesaplanacaktır.. Böylece gerekli yükseklikte bir blok elde edebilirsiniz. Sonraki adım, blok 2'ye mutlak bir konum vermek ve onu ilk bloğa hizalamaktır.
2. Aşağıdaki CSS kodunu sayfaya ekleyin: .item-responsive (pozisyon: göreceli; /* göreceli konumlandırma */ ) .item-responsive:before ( display: block; /* öğeyi bir blok olarak göster */ content: "" ; /* içerik sözde öğesi */ genişlik: %100; /* öğe genişliği */ ) .item-16by9 ( üst dolgu: %56.25; /* (9:16)*100% */ ) .item duyarlı >.content ( konum: mutlak; /* öğenin mutlak konumu */ /* öğenin konumu */ üst: 0; sol: 0; sağ: 0; alt: 0; ) /* İsteğe bağlı olarak ( bu sınıflar) */ .item -4by3 ( üst dolgu: %75; /* (3:4)*%100 */ ) .item-2by1 ( üst dolgu: %50; /* (1:2)* %100 */ ) .item -1by1 ( üst dolgu: %100; /* (1:1)*%100 */ )

Bootstrap atlıkarınca oluştururken yukarıdaki teknolojiyi uygulamak

Bootstrap hakkında bilginiz yoksa ve ne olduğunu öğrenmek istiyorsanız Bootstrap'a Giriş makalesini kullanabilirsiniz.

Bootstrap carousel slaytlarını görüntülemek için yukarıdaki HTML yapısını ve CSS kodunu kullanacağımız bir örneği ele alalım.

Aşağıdaki dosyaları resim olarak kullanacağız:

• carousel_1.jpg (genişlik = 736 piksel, yükseklik = 552 piksel, en boy oranı (yükseklik-genişlik) = 1.33);
• carousel_2.jpg (genişlik = 1155 piksel, yükseklik = 1280 piksel, en boy oranı (yükseklik-genişlik) = 0,9);
• carousel_3.jpg (genişlik = 1846 piksel, yükseklik = 1028 piksel, en boy oranı (yükseklik-genişlik) = 1.8);
• carousel_4.jpg (genişlik = 1140 piksel, yükseklik = 550 piksel, en boy oranı (yükseklik-genişlik) = 2,07);
• carousel_5.jpg (genişlik = 800 piksel, yükseklik = 600 piksel, en boy oranı (yükseklik-genişlik) = 1.33);

Görüntüler arka plan olarak ayarlanacaktır. Bu, Bootstrap 3 atlıkarıncasının farklı en boy oranlarına sahip görüntüleri kullanmasına olanak tanır.

Carousel HTML işaretlemesi:

Dönen CSS kodu:

Öğe duyarlı ( konum: göreceli; /* göreceli konumlama */ ) .item-responsive:before ( görüntüleme: blok; /* öğeyi blok olarak görüntüle */ içerik: ""; /* sözde öğe içeriği */ genişlik: 100 %; /* eleman genişliği */ ) .item-16by9 ( üst dolgu: %56,25; /* (9:16)*%100 */ ) .item-responsive>.content ( konum: mutlak; /* mutlak eleman konum * / /* öğe konumu */ üst: 0; sol: 0; sağ: 0; alt: 0; arka plan boyutu: kapak !important; )

HTML'deki çoğu öğeye genellikle belirli bir yükseklik ve genişlik verilir. Bu parametreleri CSS'de ayarlamak oldukça kolaydır ve sonuç olarak pratiktir. Bunun için zaten bildiğiniz yükseklik ve genişlik özellikleri kullanılır. Ancak, bu derste, sabit olmayan genişlik ve yükseklik veya kauçuktan, yani pencerenin kendisinin genişliğine bağlı olarak konuşacağız. Başlayalım)

Genişlik

Bu özellik belirli bir HTML genişliğiöğe. Değer piksel, yüzde olarak belirtilebilir (diğer değerler daha az kullanılır).

Bloğum (
genişlik: 400 piksel /* genişlik 400 piksel */

}
Veya yüzde olarak:

MyBlockPercent50 (
genişlik: %50 /* genişlik kutunun veya pencere genişliğinin %50'si (sabit genişlikli bir kutunun içinde değilse) */
renk: #f1f1f1; /* açık gri blok */
}
Buna göre, her zaman ebeveynin yarısı genişliğinde olacak bir blok elde ederiz.

Şimdi en ilginç hakkında. genişlik, maksimum veya minimum genişliği belirten parametrelere sahiptir. Bunlar sırasıyla minimum genişlik ve maksimum genişlik özellikleridir. Ayrıca onlar için piksel, yüzde ve diğer değerler olarak değerler belirleyebilirsiniz. Bu özellikler, kauçuk ve uyarlanabilir tasarımlar oluşturmanın temelidir ().

Örnek uyarlanabilir tasarım . Bakın, tarayıcı penceresini yeniden boyutlandırın:

Tabii ki, kendimden atlıyorum. Ancak neye ve neden ihtiyacınız olduğunu anlamalısınız. Evet ve hoş bir sonuca dokunun)

Zaten anladığınız gibi, bu özelliklerin yardımıyla, içeriği bozmadan sayfadaki öğeleri daha esnek bir şekilde işleyebilirsiniz. Nasıl çalışır? Kodu ele alalım.

Engellemek (
maksimum genişlik: 800 piksel
arka plan rengi: #f1f1f1; /* açık gri blok */
dolgu: 20 piksel
}
Bu özelliklere sahip bir blok 200 piksellik bir ebeveyn genişliğine sahip bir blok karşılık gelen değeri alacaktır, ancak eğer ebeveyn blok daha büyükse, örneğin 1000 piksel, o zaman zaten maksimum genişliğini, yani 800 pikseli alacaktır. Yani, ana bloğun genişliği 801 piksel veya daha fazla olana kadar artacaktır. Ayrıca, blok bloğu her zaman izin verilen maksimum 800 piksel genişliğe sahip olacaktır.

yükseklik

Bu özellik, elemanın yüksekliğinden sorumludur. Değer olarak, CSS'ye uygun olanların hepsi kullanılır. Çoğu zaman aynı yüzdeler ve pikseller.

bilgi(
yükseklik: 200 piksel; /* blok yüksekliği 200 piksel olacak */
dolgu: 10 piksel /* bloğun içindeki dolguyu tekrarlayın =) */
}
Mantıklı olan yükseklik için sırasıyla minimum-yükseklik ve maksimum-yükseklik özelliklerine sahip eleman için minimum ve maksimum yükseklik değerlerini belirtebilirsiniz.

bilgi(
maksimum yükseklik: 360 piksel /* maksimum blok yüksekliği */
minimum yükseklik: 120 piksel; /* minimum blok yüksekliği */
}
Gördüğünüz gibi, özellikler çiftler halinde kullanılabilir ve sıklıkla kullanılmalıdır.
Veya değerleri birleştirin:

İçerik(
yükseklik: %100; /* yükseklik her zaman %100 olacak */
genişlik: 760 piksel /* ancak genişlik 760 pikselde sabitlenmiştir */
}
Herhangi bir sorunuz varsa, yorumlara yazın!

İlginiz için teşekkür ederiz! Düzende iyi şanslar!)