盒模型

1.盒模型包括哪些属性

内容content、内边距padding、边框border、外边距margin

  • 内边距、边框、外边距可以应用于一个元素的所有边,也可以应用于某一边。
  • 外边距还可以是负值
  • 外边距叠加:当两个或更多个垂直边距相遇时, 它们将形成一个外边距。这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。但是注意只有普通文档流中块框的垂直外边距才会发生外边距叠加。 行内框、 浮动框或绝对定位框之间的外边距不会叠加。
  • 行内元素上下margin无效,上下padding撑开空间,但不占用空间。左右margin、padding有效。

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

让块级元素内部的行内元素(如文本和图片)水平居中。

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

caniuse上查看

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

W3C盒子padding、border所占的空间不在width、height范围内,IE的盒模型width包括content+padding+border


![](http://upload-images.jianshu.io/upload_images/2350909-7434d477ab50d653.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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

box-sizing: border-box;
}

此时元素的width和height决定了盒模型宽高。就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制,通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
如图示,


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

推荐阅读更多精彩内容

  • CSS盒模型 在CSS中盒模型被分为两种,第一种是W3C的标准模型,第二种是IE怪异盒模型。两种盒子模型都包括pa...
    _空空阅读 3,391评论 0 3
  • 标准盒模型、怪异盒模型 CSS中Box model是分为两种:: W3C标准(标准盒模型) 和 IE标准盒子模型(...
    陆lmj阅读 384评论 0 0
  • 一、盒模型包括哪些属性 **1、盒模型是css中元素大小的呈现方式,每个元素都有盒模型。它包括元素内容(eleme...
    鸿鹄飞天阅读 348评论 0 0
  • 一.盒模型包括哪些属性? 盒模型包括的属性有: margin:外边距。它包括margin-top、margin-r...
    婷楼沐熙阅读 2,108评论 0 2
  • 三月八号。晚。阴。 家教完,发现自己改作业越来越不细心了。没有改好作业。要加油啦!lx。 回来发现自己的一本卡纸,...
    许七安是只喵阅读 250评论 0 0