盒模型的组件和注意事项_html/css_WEB-ITnose
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了盒模型的组件和注意事项_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1899字，纯文字阅读大概需要3分钟。
内容图文
盒模型，包括content(width+height)、padding、border、margin四部分，具体视图如下：
平时使用chrome的开发者模式进行调试的时候，每个盒模型都会像上图一样被列出来，方便我们找出bug所在。（另外，还可以直接在开发者模式里增减修改代码，实时观测页面变动，方便快捷)
content：即上图padding下虚线里的部分，在盒模型里输入的内容会在里面显示。
padding：内边距，会增大盒子面积，赋值从上开始顺时针进行，具体如下--
1.当只有一个值的时候，四周都是一样的内边距；
2.当只有两个值的时候，第一个值控制上下，第二个值控制右左；
3.当有三个值的时候，第一个值控制上，第二个值控制右左，第三个值控制下；
4.当有四个值的时候，按照padding赋值原则进行。
例如padding: 10px 20px 30px 40px;即padding-top :10px;padding-right:20px;padding-bottom:30px;padding-left:40px.
border:是外嵌的，会增大盒子的面积。细分出的属性有很多，例如--
border-width: 2px;
border-style: dashed;
border-color: cyan;
border-top-radius:10px;
.....
经常用的属性可以汇在一起写，即border：宽度 线型 颜色。
线型一般有：solid（实线）、double（双实线）、dashed（虚线）、dotted（点线）。
颜色一般用三种方式表示：直接赋值（color:black);十进制赋值(rgb(12,45,3);十六进制赋值(#2fe800).
注意：使用padding和border时注意相应减少盒子的宽高值（宽/高-padding/border-width*2)
盒子面积s =(border-left-width+padding-left+width+border-right-width+padding-right)*(border-top-width+padding-top+height+padding-bottom+border-bottom-width)
margin：外边距，设定与周围元素的距离。赋值顺序同padding。
注意：同级块属性使用margin会出现上下叠压现象，即两者间距离取决于margin值大者。如果是使用了float或者display属性从而同排显示的话，两者的距离为其margin值之和。
当块属性层级结构为父子级时，当对第一个子级使用margin-top时，效果会转移到父级，即相当于对父级设置了margin-top。
解决方法--
1.为父级添加一个border,但是会增加计算量,拓展性受到一定的限制；
2.为父级添加一个属性，overflow: hidden;
3.不使用margin-top，对父级使用padding-top。
内容总结
以上是互联网集市为您收集整理的盒模型的组件和注意事项_html/css_WEB-ITnose全部内容，希望文章能够帮你解决盒模型的组件和注意事项_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。