css中关于盒子模型与层模型的理解与应用(一)

标签: 前端  css  html

题记:之前学了一会盒子、层模型,也做了几个小项目,但还是往往应用中会出现一点小瑕疵,今天就详细的总结一下。

一,盒模型理解

1)简单说说:

我们都知道任何元素都相当于一个盒模型——他们都有默认值。
在这里插入图片描述每过元素都像上述的一样有自己的文本内容、padding、border、margin(没有显示出来就是0)。在实际问题中经常作怪的就属margin与padding了。

2)内外边距问题

默认设置:
由于元素都会有默认的属性,少数情况下我们并不需要,推荐每个样式表第一条规则:

*{margin:0;padding:0;

添加后所以默认外与内边距都为0,然后真正需要的就写出来(*的优先级最低)

叠加外边距:
第一段的外边距与第而段的外边距是最大的那个50px(而非50)

p { height:50px; border:1px solid #000; backgroundcolor:#fff;  margin-top:50px;
margin-bottom:30px;}

在这里插入图片描述
这样做的好处就是:如果有一连串段落都被应用了相同的样式,那么对其中第一段和最后一段来说,它们的上外边距和下外边距决定了它们与包含元素的间距。而那些位于中间的段落呢,根本不需要两个外边距加起来那么宽的间距。因此,就像图 3所示的那样,相邻的外边距叠加起来是最合理的,哪个外边距宽,就以哪个外边距作为段间距。

3)外边距的单位

文本元素的设置外边距的时候需要使用不同的单位。比如说,一个段落的左、右外边距可以使用像素,以便该段文本始终与包含元素边界保持固定间距,不受字号变大或变小的影响。而对于上、下外边距,以 em为单位则可以让段间距随字号变化而相应增大或缩小,比如:

/*这里使用了简写属性把上、下外边距设置为.75em,把左、右外边距设置为 30 像素*/
p {font-size:1em; margin:.75em 30px;}

这样,段落的垂直间距始终会保持为字体高度的四分之三(上下外边距都是 .75em ,叠加后还是 .75em )。如果用户增大了字号那么不仅段落中的文本会变大,段间距也会成比例变大。这样,页面的整体布局就会比协调一致。与此同时,使用像素单位的左、右外边距不会改变。我想,你应该也不会想让字号变化影响到布局宽度吧。

二,盒子有多大

1)没有宽度的盒子

所谓“没有宽度”就是指没有显式地设置元素的 width 属性,如果不设置块级元素的 width 属性,那么这个属性的默认值是 auto ,结果会让元素的宽度扩展到与父元素同宽。下面我们来看一个宽度处于 auto 状态的元素。

<body>
     <p>aaaa aaaaa aaaa aaaa aaaa aaa a …</p>
</body>
再配上以下 CSS:
body {font-family:helvetica, arial, sans-serif; font-size:1em; margin:0px;
background-color:#caebff;}
p {margin:0; background-color:#fff;}

```css

在这里插入图片描述
在没有边框、内边距,也没有外边距的情况下,段落的文本扩展到了与 body 元素同
宽。接下来为两边各添加 6像素的边框和 20像素的内边距以及外边距后,内容区变成了 348像素(400-302-202-6*2)。

css
p {margin:0  30px; background-color:#fff; padding:0 20px; border:solid red;
border-width:0 6px 0 6px;}

在这里插入图片描述
盒模型结论一:没有(就是没有设置 width 的)宽度的元素始终会扩展到填满其父
元素的宽度为止。添加水平边框、内边距和外边距,会导致内容宽度减少,减少量
等于水平边框、内边距和外边距的和。

1)有宽度的盒子
p {width:400px; background-color:#fff; margin:0;}

在这里插入图片描述
明确设定 width 属性后,块级元素就不会再扩展到与父元素(即 body )同宽了

p {width:400px; background-color:#fff; margin:0;padding:0 20px;  border:solid
red; border-width:0 6px 0 6px;}

在这里插入图片描述
目前总宽度已达到 512像
素(30 + 6 + 20 + 400 + 20 + 6 + 30 = 512)。如下:
在这里插入图片描述
盒模型结论二:为设定了宽度的盒子添加边框、内边距和外边距,会导致盒子扩展
得更宽。实际上,盒子的 width 属性设定的只是盒子内容区的宽度,而非盒子要占
据的水平宽度。

关注公众号邻好礼:
在这里插入图片描述

以上内容参考了Charles Wyke-Smith(李松峰 译)的《css程序设计》

版权声明:本文为qq_44969643原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_44969643/article/details/104587071