CSS结构布局的重点概念——盒子模型

盒子模型

盒子模型包括外边距,边框,内边距,元素本身的高度或者宽度

CSS框模型实质上是一个盒子。 它包括:页边距,边框,填充和实际内容。 下图说明了盒子模型:

  • 内容content-盒子里面的内容,其中显示文本和图像
  • 填充padding-清除内容周围的区域。 填充是透明的
  • 边框border-围绕内边距和内容的边框
  • 边距margin-清除边界border外的区域。 边距是透明的

重要提示:使用CSS设置元素的width和height属性时,你只是设置了内容区域的宽度和高度。 要计算元素的完整大小,还必须添加填充,边框和边距。

元素的总宽度应这样计算:

元素总宽度=宽度+左填充+右填充+左边框+右边框+左空白+右空白

元素的总高度应如下计算:

元素总高度=高度+顶部填充+底部填充+顶部边框+底部边框+顶部边距+底部边距

边框

边框属于盒子模型的一部分

html标签也有边框,并且是最外面的边框
body是仅次于html的第二层边框
默认有的浏览器html标签与body标签之间会有边距,可以将body的外边距设置为0,这是一个好习惯。

元素高度和宽度

设置元素的高度和宽度,仅仅是指元素内容本身的高度和宽度,不包括内边距,边框的宽度以及外边距

最大宽度最小宽度以及最大高度最小高度
在当屏幕大小发生变化的时候固定显示的大小,假如当设置最小宽度为800px的时候调整浏览器窗口大小小于800的时候就会出现水平滚动条,当设置最大宽度的时候,尽管屏幕大于800,钙元素的显示宽度仍然是800,不会变大。

外边距

外边距margin-top margin-right margin-bottom margin-left

外边距的属性值可以是:auto inherit px 百分比

提示:允许使用负值。

margin:auto; 将元素水平居中

auto您可以将margin属性设置为auto以自动将元素在其容器中水平居中。

然后,元素将占据指定的宽度,剩余空间将在左右外边距之间平均分配。

外边距崩溃
常识似乎表明<h1><h2>之间的垂直边距总计为70像素(50像素+ 20像素)。 但是由于边距崩溃,实际边距最终为50px。

内边距

CSS填充属性用于在任何定义的边框内,在元素内容周围生成空间。

内边距像外边距一样除了没有auto值,其他值都有,另外就是内边距不支持负数值,而外边距支持负数值

内边距和元素的宽度之间的关系
CSS width属性指定元素内容区域的宽度

如果希望内边距不影响整个元素的宽度大小,若要将宽度保持为300px,无论填充量如何,都可以使用box-sizing属性。 这将导致元素保持其宽度。 如果增加填充,则可用的内容空间将减少。

使用属性box-sizing: border-box;将内边距包含进元素宽度中

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注