博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
DIV盒子模型理解的总结
阅读量:6950 次
发布时间:2019-06-27

本文共 815 字,大约阅读时间需要 2 分钟。

hot3.png

1.盒子模型的计算

外边距(margin)+边框(border)+内边距(padding)+内容(content)

在CSS中的width和height只是对内容区域的高和宽设定.不是对整个和模型的高和宽设定.

CSS中的宽度(width)和高度(height)只是对块级元素内容(content)的高度和宽度的设定,不影响块级元素的高度和宽度.

但是修改CSS中的宽度(width)和高度(height),会影响到块级元素的宽度和高度.

在修改CSS中的(内边距)padding和(外边距)margin的时候,若要保持块级元素的高度和宽度不变,那么就需要修改CSS中的width和height,以保持块级元素的width和height不变化.

修改CSS中padding和margin都不会影响content的width和height,但是会影响到块级元素的width和height.

当块级元素内层还有块级元素的时候,若内层的块级元素的width,height,padding,margin,border发生变化的时候,都会影响到外层的块级元素,相当于影响了整个块级元素.

demo
*{margin:0; padding:0;}dl { background:red;border:10px solid #000; width:100px; height:100px;}dt { background:yellow;}dd { background:green;}
test of dt
test of dd

转载于:https://my.oschina.net/owengao/blog/170873

你可能感兴趣的文章
Linux命令参数详细解析-ping
查看>>
数据科学家成抢手人才
查看>>
浅谈视频监控 在智慧城市建设中的综合治理业务
查看>>
思科HyperFlex系统提供最完整的新一代超融合解决方案
查看>>
中国电信明确物联网技术路标:7月启动Cat1
查看>>
市场需求持续增长,云计算或将成为资本市场下一个焦点
查看>>
《 FreeSWITCH权威指南》——3.6 小结
查看>>
JMeter的基本介绍和入门(1)
查看>>
网络电话让毕业季不再有“情感真空”
查看>>
疑似微信企业版曝光 网友留言称“心疼阿里”
查看>>
高通每天提供超过一百万颗芯片 助力物联网发展
查看>>
Python Selenium的js扩展实现
查看>>
全球最大规模窄带物联网智慧水务商用项目在福州启动
查看>>
iDTRONIC推出RFID平板和手持移动设备
查看>>
圆通速递率先推出隐形面单 为个人信息安全再添安全锁
查看>>
当200亿个物联网设备同时产生数据 是时候重新认识传感器了
查看>>
深度专访:深谈的故事 (LinuxDeepin)
查看>>
《构建高可用Linux服务器 第3版》—— 1.2 全面了解Linux服务器
查看>>
《开放复杂智能系统——基础、概念、分析、设计与实施》—第1章1.5节 小结...
查看>>
《测试驱动数据库开发》——2.4 增量构建
查看>>