千锋教育-做有情怀、有良心、有品质的IT职业教育机构

400-811-9990
当前位置:千锋视频教程 > html5视频教程  >  HTML5学习之盒子模型概念分析

HTML5学习之盒子模型概念分析

时间:2018-04-25 11:20:01     来源:千锋视频教程 作者:千锋

  盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局。

  (1)盒模型的概念:

  CSS盒子模型也叫做框模型,具备内容(content)、填充(padding)、边框(border)、边界(margin)这些属性。在CSS中,每一个元素都被视为一个框,而每个框都有三个属性:

  border:元素的边框(可能不可见),用于将框的边缘与其他框分开;

  margin:外边距,表示框的边缘与相邻框之间的距离,及相邻盒子的距离(可理解为,盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出);

  padding:内边距,表示框内容和边框之间的空间(可理解为,怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料)。

  (2)盒模型的构成:

  盒模型= content(element) + border+ padding+ margin

  如下图所示:

  (3)两种盒模型

  W3C标准 和 IE标准盒子模型

  在这两种盒模型中width、height分别代表的值

  1) 在W3C标准即标准盒模型中,width、height指的是content(element)元素内容的宽、高的大小;

  2) 在IE标准盒子模型也称怪异盒模型中,width、height指的是content + border+ padding的大小。

  (4)标准盒模型与怪异盒模型的转化:

  利用box-sizing属性,属性值有

  1)content-box默认值,可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容content。

  2) border-box 转化成的怪异盒模型,转化后的width、height指的是content + border+ padding的大小。

  (5)两种盒模型的优缺点

  标准盒模型的优点:

  css样式中元素使用标准盒模型,width能直接表示出content内容的大小,不需计算。

  缺点:

  1)当给元素添加border和padding、margin时,width与height都要减去相应的值。

  2)当设置了margin时存在margin相关的问题。

  怪异盒模型的优点:

  1)在网站设计稿中两处整个部分的宽高后直接把width与height的值设置成最外部的宽高,再根据设计稿直接加padding、margin、border,不用再修改width和height的值。

  2)在网站中的某部分制作鼠标悬停放大等动态变化的宽度时,把元素设置成怪异盒模型可以消除对相邻的元素位置的影响。

  缺点:存在兼容性问题,只适用于IE5/IE6

  • 北京天丰利校区(总部):北京市海淀区宝盛北里西区28号天丰利商城4层
    北京沙河校区:北京市昌平区沙阳路18号北京科技职业技术学院广场服务楼2层、南区服务楼2层
    咨询电话:400-186-9990 010-82790226-801
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、大数据开发培训、VR/AR混合
    现实培训、Python培训、Linux云计算培训、软件测试培训、Android培训、iOS培训、好程序员
  • 深圳西部硅谷校区地址:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619
    深圳大学城校区地址:深圳市南山区留仙大道1201号大学城创客小镇16栋2楼、3楼
    咨询电话:0755-33582485-801(硅谷校区)0755-86660670-801(大学城校区)
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android培训、iOS培训
  • 上海校区地址:上海市宝山区同济支路199号智慧七立方3号楼2-4层
    咨询电话:400-627-7899 021-56166283/56166279
    面授课程:全栈HTML5+培训、UI交互设计培训、JavaEE+云数据培训、Android课程培训、iOS课程培训、好程序员
  • 郑州校区地址:郑州市金水区纬五路21号河南教育学院综合楼(经纬中学楼)7/8层
    咨询电话:0371-55191750 400-186-9990
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 广州校区地址:广州市天河区元岗路310号智汇park创意园E座5层
    咨询电话:020-22119207 400-186-9990
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 大连校区地址:辽宁省大连市甘井子区软件园路2号东软信息学院B5座一楼
    咨询电话:0411-39026086 400-186-9990
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、UI交互设计培训、Android课程培训、iOS课程培训
  • 武汉校区地址:武汉市光谷大道61号智慧园21号楼2层
    咨询电话:027-65523826
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 成都校区地址:成都市武侯区科华北路62号力宝大厦N(北楼)18楼
    咨询电话:028-83178771
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 西安校区地址:西安市雁塔区高新六路52号立人科技C座西区4楼
    咨询电话:029-85260160
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训
  • 杭州校区地址:浙江省杭州市江干区九堡旺田书画城A座4层
    咨询电话:0571-86893632 010-82790226-801
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 青岛校区地址:青岛市市南区金坛路17号青岛职业技术学院南校区实训楼A4层
    咨询电话:0532-80910752/3 010-82790226-801
    面授课程:全栈HTML5+培训、UI交互设计培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 重庆校区地址:重庆市高新区科园一路2号大西洋国际12-1
    咨询电话:023-68883009
    面授课程:JavaEE+云数据课程培训
  • 长沙校区地址:湖南省长沙市岳麓区麓谷企业广场A2栋三单元306号
    咨询电话:0731-85513010/85513210
    面授课程:JavaEE+云数据课程培训
  • 哈尔滨校区地址:哈尔滨市松北区创新一路699号科技创新城19号楼五楼
    咨询电话:15663846969
    面授课程:全栈HTML5+培训
  • 千锋教育服务号

    了解千锋动态
    关注千锋教育服务号

  • 千锋互联服务号

    扫码匿名提建议
    直达CEO信箱