盒子模型核心知识讲解,深入理解原理

认识盒模型

所有HTML标签都可以看成矩形盒子,由widht,height,padding,border构成,称为盒模型
60fd6c0d0001085b19201080.jpg
60fd6c3b000118b719201080.jpg
60fd6c620001367e19201080.jpg

widht,height属性

6108b19e0001d4a219201080.jpg
6108b1190001406119201080.jpg

padding 属性

6108b3800001f3f619201080.jpg
6108b36e0001a10219201080.jpg
6108b3ff00014e4919201080.jpg
6108b4820001a65619201080.jpg
6108b448000146bb19201080.jpg

margin 属性

6108b70e0001806719201080.jpg
6108b4820001a65619201080.jpg
6108b7080001ef9e19201080.jpg
6108b8870001da8f19201080.jpg
6108b8870001da8f19201080.jpg

box-sizing属性

  • 盒子添加了box-sizing:border-box;之后,盒子的width,heiht数字就表示盒子实际占有的宽高(不含margin)了,即padding,border变为“内缩”的,不再”外扩“
  • box-sizing属性大量应用于移动网页制作中, 因为它结合百分比布局,弹性布局等非常好用,在pc页面开发中使用较少

display属性

行内元素和块级元素

display属性是否能并排显示是否能设置宽高当不设置width属性时举例
块级元素width自动撑满div,section,header...
行内元素width自动收缩sapn,a,em,b....

行内块

img和表单元素是特殊的行内块,他们即能够设置宽度高度,也能够设置并排显示

行内元素和块级元素相互转换

  • 使用display:block;即可将元素转为块级元素
  • 使用display:inline;即可将元素转为行内元素,将元素转为行内元素的应用不多见
  • 使用display:inline-block;即可将元素转为行内块

元素的隐藏

  • 使用display:none;可以将元素隐藏,元素将彻底放弃位置,如同没有写它的标签一样
  • 使用visibility:hidden;也可以隐藏元素,但是元素不放弃自己的位置

发表评论