Css的模型构建是什么
这篇文章主要讲解了“Css的模型构建是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Css的模型构建是什么”吧!
站在用户的角度思考问题,与客户深入沟通,找到岱岳网站设计与岱岳网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都网站设计、网站建设、外贸网站建设、企业官网、英文网站、手机端网站、网站推广、域名申请、网站空间、企业邮箱。业务覆盖岱岳地区。
“盒子”模型,每一个HTML元素可以看成一个“盒子”。一个“盒子”具有:宽度、边框、内填充、外边距
1.宽度(width)和高度(height):是指内容的宽度和高度,不含边框、外边距、内填充。
2.内填充(padding):是指内容到边框线间的距离,含四个方向:上、右、下、左
3.外边距(margin):是指边框线以外的距离。
计算一个“盒子”的总空度
假设:总宽度为100px,边框为1px,内填充为10px,求内容的宽度
Width = 100px – 1px*2 -10px*2 = 78px
假设:总宽度为100px,内容的宽50px,求左右内填充分别是多少?
Padding-left = (100px – 50px )/2 = 25px
CSS内填充padding
Padding-left:左边线到内容间的距离
Padding-right:右边线到内容间的距离
Padding-top:顶边线到内容间的距离
Padding-bottom:底边线到内容间的距离
Padding:同时设置四个边的内填充距离
padding:10px; //表示:上下左右四个内填充都是10px
padding:5px 10px; //表示:上下为5px,左右为10px
padding:5px 10px 15px; //表示:上为5px,左右为10px,下为15px
padding:5px 10px 15px 20px; //表示:上右下左分别设置不同的内填充,顺序不可乱
CSS外边距margin
Margin-left:左边线以外的距离
Margin-right:右边线以外的距离
Margin-top:顶边线以外的距离
Margin-bottom:底边线以外的距离
Margin:10px; //表示:四个外边距都是10px
Margin:10px 15px; //表示:上下外边为10px,左右外边距为15px
Margin:5px 10px 15px //表示:上外边距为5px,左右外边距为10px,下外边距为15px
Margin:5px 10px 15px 20px; //分别设置四外外边距,顺序为“上右下左”
感谢各位的阅读,以上就是“Css的模型构建是什么”的内容了,经过本文的学习后,相信大家对Css的模型构建是什么这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!
文章题目:Css的模型构建是什么
网址分享:http://myzitong.com/article/pschhh.html