1、盒模型包括哪些属性
CSS 框模型元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。
外边距合并
外边距合并(叠加)是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。
简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图:
CSS 外边距合并实例 1
当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。请看下图: CSS 外边距合并实例 2
尽管看上去有些奇怪,但是外边距甚至可以与自身发生合并。
假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并:
CSS 外边距合并实例 3
如果这个外边距遇到另一个元素的外边距,它还会发生合并:
CSS 外边距合并实例 4
这就是一系列的段落元素占用空间非常小的原因,因为它们的所有外边距都合并到一起,形成了一个小的外边距。
外边距合并初看上去可能有点奇怪,但是实际上,它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并,后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并,段落之间的上外边距和下外边距就合并在一起,这样各处的距离就一致了。
CSS 外边距合并的实际意义
2、text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中
text-aligen: center属性作用在块元素上,能让块元素里的文本、行内元素、图片居中显示。
Paste_Image.png3、如果遇到一个属性想知道兼容性,在哪查看?
4、IE 盒模型和W3C盒模型有什么区别?
1、ie678怪异模式(不添加 doctype)使用 ie 盒模型,宽度=边框+padding+内容宽度
2、chrome, ie9+, ie678(添加 doctype) 使用标准盒模型, 宽度= 内容宽度
5、以下代码的作用?兼容性?
*{ box-sizing: border-box;}
对于所有元素,盒模型变成border,以边框作为界限,便于计算。
2397444-eb0aa2d3dd1825f4.png
网友评论