masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > 解析width:100%;与width:auto;的区别

解析width:100%;与width:auto;的区别

巴扎黑
Lepaskan： 2017-03-14 11:30:10
asal
2216 orang telah melayarinya

<p>
    <p>1111</p>
</p>
p{
　　width:980px;<br>　　background-color: #ccc;<br>　　height：300px;
}
p{
     width:100%;<br>　　/*width:auto;*/
    padding:10px;<br>　　background-color:#000;<br>
}
Salin selepas log masuk



如果是p的width:100%，则说明p的width会得到980px就已经充满p区域，然后自己又有padding，所以会超出p。

而当width:auto时它是总体宽度（包括width，margin,padding,border）等于父级宽度（width，不包含父级的margin,padding,border），所以如果padding已经左右占去10px的空间，那么width给的值就是960px。

但无论是width:100%还是auto，其计算的参照都是父级内容区width值，而非总宽度值.

Atas ialah kandungan terperinci 解析width:100%;与width:auto;的区别 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber：php.cn
Artikel sebelumnya：对文本超出部分内容隐藏的两种方法 Artikel seterusnya：使用HTML实现多图上传预览功能
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2165
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2313
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1950
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1827
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1879
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan