otomatik genişlik ve yüzde 100 genişlik arasındaki fark

Daha önce benim varsayımım width: auto, genişliğin içeriğin genişliğine ayarlanmasıydı. Şimdi ebeveynin tüm genişliğini kapladığını görüyorum.

Biri bunlar arasındaki farkları açıklayabilir mi?

Otomatik genişlik

Div veya p gibi bir blok seviyesi öğesinin başlangıç ​​genişliği otomatiktir. Bu, içerdiği blok içindeki tüm mevcut yatay alanı kaplayacak şekilde genişlemesini sağlar. Herhangi bir yatay dolgusu veya kenarlığı varsa, bunların genişlikleri öğenin toplam genişliğine eklenmez.

Genişlik% 100

Öte yandan, genişlik:% 100 belirtirseniz, öğenin toplam genişliği, içerdiği bloğun% 100'ü artı herhangi bir yatay kenar boşluğu, dolgu ve kenarlık olacaktır (eğer kutu boyutlandırma: border-box kullanmadıysanız, bu durumda Toplam genişliğin hesaplanma şeklini değiştirmek için yalnızca% 100'e kenar boşlukları eklenir). İstediğin şey bu olabilir, ama büyük olasılıkla değil.

Farkı görselleştirmek için bu resme bakın:

Kaynak

• width: auto; kenar boşluklarından, dolgudan veya kenarlıklardan ek alan eklendiğinde, bir öğeyi üst kapsayıcısıyla aynı genişlikte tutmaya çalışacaktır.

• width: 100%;öğeyi üst kapsayıcı kadar geniş yapacak. Üst öğeye bakılmaksızın öğenin boyutuna fazladan boşluk eklenecektir. Bu genellikle sorunlara neden olur.

Kenar boşlukları ve sınırla ilgili. Kullanırsanız width: auto, sonra kenarlık eklerseniz, div'iniz kapsayıcısından daha büyük olmayacaktır. Öte yandan, width: 100%ve biraz kenarlık kullanırsanız , öğenin genişliği% 100 + kenarlık veya kenar boşluğu olacaktır. Daha fazla bilgi için bkz bu .

Genişlik değeri otomatik olduğu sürece, öğe, konteynerinden daha geniş olmadan yatay kenar boşluğuna, dolgusuna ve kenarlığa sahip olabilir (tabii ki margin-left + border-left-width + padding-left + padding-right toplamı hariç) + border-right-width + margin-right, kapsayıcıdan daha büyüktür). İçerik kutusunun genişliği, kenar boşluğu, dolgu ve kenarlık kapsayıcının genişliğinden çıkarıldığında geriye kalan her şey olacaktır.

Öte yandan, genişlik:% 100 belirtirseniz, öğenin toplam genişliği, içerdiği bloğun% 100'ü artı herhangi bir yatay kenar boşluğu, dolgu ve kenarlık olacaktır (eğer kutu boyutlandırma: border-box kullanmadıysanız, bu durumda Toplam genişliğin hesaplanma şeklini değiştirmek için yalnızca% 100'e kenar boşlukları eklenir). İstediğin şey bu olabilir, ama büyük olasılıkla değil.

Kaynak:

http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

Genişlik% 100:% 100 içerik yapacaktır. Bu genişliğe margin, border, padding eklenecek ve bunlardan herhangi biri eklenirse eleman taşacaktır.

Otomatik genişlik: Öğeyi kenar boşluğu, kenarlık ve dolgu dahil olmak üzere kullanılabilir alana sığdırır. kenar boşluğu + dolgu + kenarlık ayarlandıktan sonra kalan boşluk genişlik / yükseklik kullanılabilir olacaktır.

Genişlik% 100 + kutu boyutlandırma: kenarlık kutusu: Ayrıca, kenarlık, dolgu (kenar boşluğu, kabın dışına taşmasına neden olur) dahil olmak üzere öğeyi kullanılabilir alana sığdırır.

Div veya p gibi bir blok seviyesi öğesinin başlangıç ​​genişliği otomatiktir.

Açıkça belirtilen genişlikleri geri almak için width: auto kullanın.

genişlik:% 100 belirtirseniz, öğenin toplam genişliği, içerdiği bloğun% 100'ü artı herhangi bir yatay kenar boşluğu, dolgu ve kenarlık olacaktır.

Bu nedenle, bir dahaki sefere bir blok seviyesi öğesinin genişliğini tüm mevcut genişliği kaplaması için% 100'e ayarladığınızda bulduğunuzda, gerçekten istediğiniz şeyin onu otomatik olarak ayarlamak olup olmadığını düşünün.

Genişliği kullanma: otomatik; + ekran: satır içi blok; css'de harika bir etki veriyor.

width : auto;
display: inline-block;

Dediğimizde

width:auto;

genişlik, ana öğenin toplam genişliğini asla aşmayacaktır. Maksimum genişlik, ebeveyn genişliğidir. Border, padding ve margin eklesek bile, border, padding ve margin için yer açmak için elementin içeriği küçülecektir. Border + padding + margin için gerekli alan, ana öğenin toplam genişliğinden büyükse, içeriğin genişliği sıfır olur.

Dediğimizde

width:100%;

öğenin içeriğinin genişliği, ana öğenin% 100'ü olacak ve bundan sonra kenarlık, dolgu veya kenar boşluğu eklersek, alt öğenin ebeveyn öğenin genişliğini aşmasına neden olacak ve üst öğeden taşmaya başlayacaktır.