什么是盒子模型？
Jun 28, 2017 am 09:16 AM什么是盒子模型？
网页中的任何一个标签都相当于是一个盒子模型，而所有的盒子模型都存在五个必要的属性：width,height,padding,border,margin.
那么在一个网页中如何计算一个盒子模型实际所占的宽度呢？？？？
例如：<style>div {width:300px;padding:20px;border:1px}</style>
<body><div></div></body>
对于上面div所占宽度应该是：width+2*padding+2border=300+2*20+2*1=342px;
padding:内边距：内容和边框之间的距离。
padding的四个属性：padding-top,padding-bottom,padding-left,padding-right.
width:宽.
height:高.
border:边框.
常见的边框写法：border:1px solid #ccc;分别表示边框的宽度，线型，颜色。
常见线型有：solid(实线)，dashed(虚线),dotted(点线)。
边框的三个基本属性:border-width(边框的宽度),border-style(边框的线型),border-color(边框的颜色);
maigin:外边距.
margin的四个基本属性：margin-top,margin-bottom,margin-left,margin-right.
在使用margin时需要注意的点:
1.塌陷:margin塌陷存在于块级元素之间。如果元素变成了行内元素或者行内块元素，则不会塌陷。如果元素脱离了标准文档流也不会塌陷。
2.通过margin让盒子居中：margin:0 auto;
使用margin:0 auto 让盒子居中需注意：盒子必须要有明确的width。盒子必须处于标准文档流中。margin:0 auto是让盒子居中，而不是让盒子里面的内容居中。
让盒子里面的文字居中可以使用：text-align:center;(向左向右：text-align:left/right;)
Tips:如果想要移动子元素的位置，非必要情况下推荐使用父元素的padding，而不是子元素的margin，如果必须使用margin，父元素就必须要有border
使用准则：在使用CSS的时候，尽可能的简写。
padding:10px 20px; 表示上下的padding为10px，左右的padding为20px。
padding:10px 20px 30px; 表示上的padding为10，下的padding为30px，左右的padding为20px.
padding：10px 20px 30px 40px;分别表示上，右，下，左的padding。
Atas ialah kandungan terperinci 什么是盒子模型？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Artikel Panas
Alat panas Tag
Artikel Panas
Tag artikel panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Model MoE sumber terbuka paling berkuasa di dunia ada di sini, dengan keupayaan bahasa Cina setanding dengan GPT-4, dan harganya hanya hampir satu peratus daripada GPT-4-Turbo
May 07, 2024 pm 04:13 PM
Model MoE sumber terbuka paling berkuasa di dunia ada di sini, dengan keupayaan bahasa Cina setanding dengan GPT-4, dan harganya hanya hampir satu peratus daripada GPT-4-Turbo
KAN, yang menggantikan MLP, telah diperluaskan kepada konvolusi oleh projek sumber terbuka
Jun 01, 2024 pm 10:03 PM
KAN, yang menggantikan MLP, telah diperluaskan kepada konvolusi oleh projek sumber terbuka
Apakah maksud pemegang tempat dalam vue
May 07, 2024 am 09:57 AM
Apakah maksud pemegang tempat dalam vue
Robot Tesla bekerja di kilang, Musk: Tahap kebebasan tangan akan mencapai 22 tahun ini!
May 06, 2024 pm 04:13 PM
Robot Tesla bekerja di kilang, Musk: Tahap kebebasan tangan akan mencapai 22 tahun ini!
Yolov10: Penjelasan terperinci, penggunaan dan aplikasi semuanya di satu tempat!
Jun 07, 2024 pm 12:05 PM
Yolov10: Penjelasan terperinci, penggunaan dan aplikasi semuanya di satu tempat!
Tiada data OpenAI diperlukan, sertai senarai model kod besar! UIUC mengeluarkan StarCoder-15B-Instruct
Jun 13, 2024 pm 01:59 PM
Tiada data OpenAI diperlukan, sertai senarai model kod besar! UIUC mengeluarkan StarCoder-15B-Instruct
Universiti Tsinghua mengambil alih dan YOLOv10 keluar: prestasi telah bertambah baik dan ia berada dalam senarai panas GitHub
Jun 06, 2024 pm 12:20 PM
Universiti Tsinghua mengambil alih dan YOLOv10 keluar: prestasi telah bertambah baik dan ia berada dalam senarai panas GitHub
Melebihi DPO secara menyeluruh: Pasukan Chen Danqi mencadangkan pengoptimuman pilihan mudah SimPO, dan turut memperhalusi model sumber terbuka 8B terkuat
Jun 01, 2024 pm 04:41 PM
Melebihi DPO secara menyeluruh: Pasukan Chen Danqi mencadangkan pengoptimuman pilihan mudah SimPO, dan turut memperhalusi model sumber terbuka 8B terkuat
