css盒模型

今日学习了盒模型概念
深入理解了 CSS 盒模型的构成，它由内容区（content）、内边距（padding）、边框（border）和外边距（margin）组成。内容区用于显示元素的实际内容，内边距是内容区与边框之间的距离，边框围绕着内容区和内边距，外边距则是元素与其他元素之间的距离。
2. 盒模型尺寸计算
学会了如何计算元素的实际尺寸。元素的宽度（width）和高度（height）默认只包含内容区的大小，实际宽度等于内容区宽度加上左右内边距和左右边框的宽度，实际高度同理。通过设置 box - sizing 属性为 border - box，可以让宽度和高度包含内容区、内边距和边框的大小，方便进行布局设计。
3. 内边距和外边距的应用
了解了内边距和外边距在页面布局中的重要作用。合理设置内边距可以调整元素内部内容的位置，增强可读性和美观性；外边距则可以控制元素之间的间距，使页面布局更加清晰。例如，为按钮元素设置适当的内边距可以使其看起来更加饱满，为段落元素设置外边距可以让段落之间有合适的间隔。