盒模型

作者: 饥人谷_吴亚敏 | 来源:发表于2016-08-22 16:02 被阅读0次
盒模型包括哪些属性?

盒模型包括: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,两行可以并列显示。

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

相关文章

  • CSS面试题

    1、盒模型 答:分为标准盒模型和怪异盒模型(IE盒模型) 标准盒模型:宽高(content)+ padding +...

  • CSS面试题

    1、 盒模型 答:分为标准盒模型和怪异盒模型(IE盒模型) 标准盒模型:宽高(content)+ padding ...

  • CSS盒模型和BFC

    盒模型 盒模型分为IE盒模型和W3C标准盒模型。 IE盒模型 IE盒模型也称border-box。属性width,...

  • 前端第四天

    前端第四天 目录: 盒模型之display 盒模型之overflow 盒模型之隐藏 盒模型之border 盒模型之...

  • 前端面试之浏览器/HTML/CSS问题

    盒模型 盒模型主要两种,标准盒模型和怪异和模型 标准盒模型:width指content部分的宽度 怪异盒模型:wi...

  • 前端面试之浏览器/HTML/CSS问题

    盒模型 盒模型主要两种,标准盒模型和怪异和模型 标准盒模型:width指content部分的宽度 怪异盒模型:wi...

  • 盒模型

    盒模型 盒模型,可以简单解释为:盒模型用来描述元素所占据的空间。有两种盒模型:W3C盒模型(标准盒模型)和IE盒模...

  • CSS

    Q1.简单描述CSS的盒模型 1.盒模型种类:包括标准盒模型和IE盒模型(怪异盒模型) 2.盒模型设置方式:通过b...

  • css问题

    标准盒模型&非标准盒模型(怪异盒模型) 标准盒模型 box-sizing (模型样式) 语法: box-sizin...

  • 两种Box Model(盒模型)的理解、区别以及注意事项

    盒模型,可以简单解释为:盒模型用来描述元素�所占据的空间。 有两种盒模型:W3C盒模型(标准盒模型)和IE盒模型这...

网友评论

    本文标题:盒模型

    本文链接:https://www.haomeiwen.com/subject/leqgsttx.html