CSS3 kutu boyutlandırma: kenar boşluğu kutusu; Neden olmasın?

Neden yok box-sizing: margin-box;? Genellikle box-sizing: border-box;stil sayfalarımıza koyduğumuzda gerçekten eskisini kastediyoruz.

Misal:

Diyelim ki 2 sütunlu bir sayfa düzenim var. Her iki sütunun genişliği% 50'dir, ancak çirkin görünürler çünkü oluk yoktur (ortadaki boşluk); CSS aşağıdadır:

.col2 {
    width: 50%;
    float: left;
}

Bir oluk uygulamak için 2 sütunun ilkinde doğru bir kenar boşluğu belirleyebileceğimizi düşünebilirsiniz; böyle bir şey:

.col2:first-child {
    margin-right: 24px;
}

Ancak bu, ikinci sütunun yeni bir satıra sarılmasını sağlar, çünkü aşağıdakiler doğrudur:

50% + 50% + 24px > 100%

box-sizing: margin-box;öğenin hesaplanan genişliğine kenar boşluğu ekleyerek bu sorunu çözer. Daha yararlı olmasaydı bunu çok yararlı bulurdum box-sizing: border-box;.

width: calc(50% - 24px);Soğanlarınız için kullanamaz mısınız? Ardından kenar boşluklarınızı ayarlayın.

Bence bir box-sizing: margin-box. Css kutusu modeli, çerçevelerin kenar boşluklarının konumlarını tam olarak gösterir.

Küçük sorunlar var - örneğin, kenar boşluğu kutuları üst üste gelebilir - ancak çözülmesi zor değildir.

Sanırım durum, tablo hücrelerindeki mutlak konumlandırılmış div'larla , overflow-x& overflow-ykombinasyonları ile görebildiğimiz gibi aynıdır, min | max-width | height ile kutu boyutlandırması kombinasyonu vb.

Tarayıcı geliştiricilerinin geliştirmediği özellikler, gerçekten basit özellikler var.

IMHO, box-sizing: margin-boxçok kullanışlı bir özellikti. Başka bir kullanışlı özellik, box-sizing: padding-boxen azından standartta mevcuttu, ancak büyük tarayıcıların hiçbirinde uygulanmadı. En yeni kromda bile değil!

Not: @Oriol'un yorumu: Firefox, kutu boyutlandırma: dolgu kutusu uyguladı. Ama diğerleri yapmadı ve şartnameden çıkarıldı. Firefox 50. sürümde kaldıracaktır. Sad.

Üstteki adam, dolgu ve sınır da dahil olmak üzere toplam genişliğe marj eklemeyi soruyor. Mesele şu ki, kenar boşluğu kutunun dışına uygulanır ve dolgu ve kenarlık kullanılmaz border-box.

Bu border-marginfikri başarmaya çalıştım . Bulduğum şey, eğer kenar boşluğu kullanırken .lastson öğeye bir sınıf ekleyebilmenizdir (kenar boşluğu ile sıfır boşluğu uygulayın veya kullanın :last-child/:last-of-type). Veya her yerde eşit kenar boşlukları ekleyin (yukarıdaki dolgu sürümüne benzer).

Buradaki örneklere bakın: http://codepen.io/mofeenster/pen/Anidc

border-boxelemanın genişliğini + dolgusunu + kenarlığını toplam genişlik olarak hesaplar. Yani div% 50 genişliğinde 2 s'niz varsa , bitişik olacaktır. 8pxOnlara dolgu eklerseniz , oluk olacaktır 16px. Bunu, aynı zamanda dolguya sahip bir sarma elemanı ile birleştirin, 8pxeşit olukları olan güzel bir ızgaraya sahip olacaksınız.

Bu örneğe buradan bakın: http://codepen.io/mofeenster/pen/vGgje

İkincisi benim en sevdiğim yöntem.

Eminim tüm bunlar açıktır, ama yine de yazacağım çünkü ... egzersize ihtiyacım var. Aşağıdaki sonuç kadar etkili olmaz box-sizing: margin-box;:

.col2 {
    width: 45%;
    height: 90%;
    margin: 5% 2.5%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}

http://jsfiddle.net/Fg3hg/

box-sizingdolgu ve kenarlığın elemanın toplam boyutuna göre hangi noktadan değerlendirildiğini kontrol etmek için kullanılır. Bu nedenle, genişliğe pxsahip kenar boşlukları dahil etmek için koşer olmasa da %(genellikle her zaman olduğu gibi), göreli yüzde miktarının ne olması gerektiğini hesaplamak daha kolaydır, çünkü tanımlanmış genişliğe dolgu ve kenarlık eklemeniz gerekmez.

Bunun nedeni, kutu boyutlandırma özelliğinin, verilen boyuta özgü değerleri (dolgu, kenarlıklar) hesapladıktan sonra bir öğenin boyutunu ifade etmesidir. "box-sizeing: border-box" bir elemanın yüksekliğini / genişliğini ayarlar ve kenarlığın yanı sıra dolgu malzemesini de dikkate alır. Bir öğenin kenar boşluğunun kapsamı, öğenin kendisinden daha büyüktür, yani sayfanın ve çevresindeki öğelerin akışını değiştirir, dolayısıyla öğenin kardeş öğelerine göre üst öğeye uyma şeklini doğrudan değiştirir. Sonuçta bir "kenar boşluğu kutusu" öznitelik değeri büyük sorunlara neden olur ve esasen elemanların yüksekliğini / genişliğini doğrudan ayarlamakla aynıdır.

On Codrops taşma zorla marjlar ve satır en etkisiyle konusunda iyi makalelerin bir çift vardır. Tüm tarayıcılar için normalleştirici css ayar yazı tipi boyutunu% 100 olarak ayarlayan rem veya em birimini kullanmanızı önerir, ardından genişlikleri ve kenar boşluklarını ayarladığınızda, yorumlarda yalnızca bir not yazarak satır genişliği üzerindeki etkiyi takip etmek kolaydır. toplam genişlik. 16 pikseli 1 em'e dönüştürmek, hedeflenen toplam görüntüleme alanlarını hesaplamanın yoludur.

En azından geliştirme aşaması için böyle çalışarak ve daha sonra 'duyarlı' şablonlar istiyorsanız, kenar boşlukları dahil genişlikleri% 'e dönüştürebilirsiniz.

Olukları işlemek için önerdikleri diğer ve genellikle daha basit bir yol, sözde content: '';bulduğum sütunlarınızın her birinde pseudo ve on'u kullanmaktır . Bitiş gibi tanımlanmış son sütun olan bir div sınıfı ayarlarsanız, söz konusu sınıfı sonradan sözde olmaması veya daha geniş bir sınıf olması için hedefleyebilirsiniz; düzeninize en uygun olanı.

Bu sözde öğe yöntemini kullanmanın ek avantajı, aynı zamanda okuyucular monitöründeki düz görüntüye daha fazla 3d efekti ve daha fazla derinlik verebilen gölgeler için bir hedef vermesidir. Şu anda düğmelerde kullanılan efektleri ölçeklendirerek, degradeleri ve z-dizinini 'ayarlayarak' bu etkiyi deniyorum.

Normal akıştaki blok düzeyinde, değiştirilmemiş elemanların boyutları tatmin etmelidir

kenar boşluğu-sol + kenarlık-sol genişlik + dolgu-sol + genişlik + dolgu-sağ + kenarlık-sağ genişlik + kenar boşluğu-sağ = kapsayıcı genişliği

Aşırı kısıtlandığında, tarayıcıların sol veya sağ kenar boşluğunu ayarlaması gerekir. Bu, kenar boşluğu kutusunun genişliği içeren bloğun genişliğine eşit olması gerektiği anlamına gelir (yani% 100).

Sizin durumunuz için, saydam kenarlıklar box-sizing: border-boxkenar boşluklarına çok benzer .

Belki de RGBA kullanarak kenarlığı% 0 opaklığa ayarlayın ve kenarlığı kenar boşluğu olarak kullanın.

Gövde içeriğinde kutu boyutlandırmayı kullanırken ilginç bir durum var

içerik yok kenarlık kutusu sol-sağ kenar boşluğunda değer vermez Bu iki kutu yeniden sayım algoritmasının% yeniden sayımı

  .body{
    box-sizing: border-box;
    margin:0 3%;
  }

57 öncesi Firefox sürümleri de kutu boyutlandırma için dolgu kutusu değerini destekledi, ancak bu değer tarayıcının teknik özelliklerinden ve sonraki sürümlerinden kaldırıldı.

Yani marj kutusu planlanmamış bile ...