任务9-1

1、盒模型包括哪些属性

CSS 框模型

元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。

外边距合并

外边距合并(叠加)是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。
简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图:


CSS 外边距合并实例 1

当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。请看下图:
CSS 外边距合并实例 2

尽管看上去有些奇怪,但是外边距甚至可以与自身发生合并。
假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并:
CSS 外边距合并实例 3

如果这个外边距遇到另一个元素的外边距,它还会发生合并:
CSS 外边距合并实例 4

这就是一系列的段落元素占用空间非常小的原因,因为它们的所有外边距都合并到一起,形成了一个小的外边距。
外边距合并初看上去可能有点奇怪,但是实际上,它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并,后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并,段落之间的上外边距和下外边距就合并在一起,这样各处的距离就一致了。


CSS 外边距合并的实际意义

2、text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中

text-aligen: center属性作用在块元素上,能让块元素里的文本行内元素图片居中显示。

Paste_Image.png

3、如果遇到一个属性想知道兼容性,在哪查看?

http://caniuse.com/

4、IE 盒模型和W3C盒模型有什么区别?

1、ie678怪异模式(不添加 doctype)使用 ie 盒模型,宽度=边框+padding+内容宽度
2、chrome, ie9+, ie678(添加 doctype) 使用标准盒模型, 宽度= 内容宽度

5、以下代码的作用?兼容性?

*{ box-sizing: border-box;}
对于所有元素,盒模型变成border,以边框作为界限,便于计算。


2397444-eb0aa2d3dd1825f4.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、盒模型包括哪些属性 **1、盒模型是css中元素大小的呈现方式,每个元素都有盒模型。它包括元素内容(eleme...
    鸿鹄飞天阅读 354评论 0 0
  • 1.盒模型包括哪些属性? 答:从外到内包括外边距<margin>边框 填充 内容<content>。 margin...
    浩天天阅读 246评论 0 1
  • 回答 盒模型包括哪些属性?1 content:内容区域; padding:内边距; border:边框; marg...
    墨灯阅读 229评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 1 . 盒模型包括的属性 margin:外边距:包含margin-top、margin-right、margin-...
    osborne阅读 594评论 0 0