盒模型

盒模型包括哪些属性?

盒模型包括:margin、border、padding、content。

  • margin:清除边框区域。margin没有背景颜色,它是完全透明的。
  • border:边框周围的填充和内容。边框是受到盒子的背景颜色影响。
  • padding:清除内容周围的区域。会受到框中填充的背景颜色影响。
  • content:盒子的内容,显示文本和图像。
text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中?

让块级元素内的行内元素水平居中显示。

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

Can I use

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

IE的盒模型与W3C盒模型的区别在与width的计算。

盒模型图解

W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。
IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading。

以下代码的作用?兼容性?
*{ box-sizing: border-box;}

以上代码设置了所有元素的内边距和边框都将在已设定的宽度和高度内进行绘制。
设置他以后,border和padding全会在你设置的宽度内部,比如手机端设置两行并列的布局,宽度各为50%,如果不用这个属性,设置border后右边的div会下来错位,设置这个属性,宽度还是50%而不是50%+*px,两行可以并列显示。

兼容性

 
 
 
 
本教程版权归作者和饥人谷所有,转载须说明来源!

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

推荐阅读更多精彩内容