盒模型

一、盒模型包括哪些属性

1.内容(content);
2.内边距(padding);
3.边框(border);
4.外边距(margin);

盒模型示例

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

1.作用:能让文本,图片和行内元素水平居中;

代码
示例

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

网站:http://caniuse.com/

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

1.标准W3C盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分;

标准W3C盒模型
  • W3C盒模型的宽包括:content,padding,border,margin;
  • 例:margin:20px;padding:10px;border:5px;width:100px;height:100px;
  • 那么这个标准盒模型占用的宽就是:20×2+10×2+5×2+100=170px;
  • 标准盒模型占用的高度就是:20×2+10×2+5×2+100=170px;
  • 盒模型实际的宽度就是内容的宽度:content=100px;

2.IE 盒子模型的范围包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 padding;

IE盒模型
  • IE盒模型的宽也包括:content,padding,border,margin;
  • 例:margin:20px;padding:10px;border:5px;width:100px;height:100px;
  • 那么这个标准盒模型占用的宽就是:20×2+10×2+5×2+100=170px;
  • 标准盒模型占用的高度就是:20×2+10×2+5×2+100=170px;
  • 盒模型实际的宽度就是:content+border+padding即100+5×2+10×2=130px;

3.避免触发IE盒模型的方法是使用<!DOCTYPE html>声明,告诉IE采用W3C盒子模型即可。

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

Paste_Image.png

1.作用:盒模型的宽度即为盒模型内容的宽度,盒模型的内边距和边框都不会增加盒模型宽度;那么块级元素实际所占文档流的宽度就为盒模型的content即实际内容宽+margin外边距;高度为content的实际高度+margin外边距;

兼容性

本教程归本人和饥人谷所有,转载需说明来源!

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 1、盒模型包括哪些属性 盒模型包括4个属性:content,padding,border,margin. cont...
    _hello__world_阅读 1,787评论 0 0
  • 课程目标 掌握盒模型相关知识点 了解IE盒模型和 W3C 盒模型区别 课程任务 1. 盒模型包括哪些属性 CSS盒...
    Timmmmmmm阅读 1,404评论 0 0
  • 盒模型包括哪些属性? 盒模型: Paste_Image.png 盒模型包括属性有: margin:外边距 bord...
    饥人谷_kule阅读 1,813评论 0 0
  • 今天有个快三十岁的已婚男士叫我“阿姨”,我去,我虽是人到中年,可你也不是青年,更不是孩子,叫我“阿姨”?我只接受跟...
    倪波OH卡心理咨询师阅读 3,770评论 8 4