ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

盒模型

2021-11-14 19:35:16  阅读:173  来源: 互联网

标签:模型 边框 5px 10px 外边 15px border


CSS box-model

Content(内容) - 盒子的内容,显示文本和图像。

Padding(内边距) - 清除内容周围的区域,内边距是透明的。

应用:

paddin 10px 5px 15px 20px

上内边距是 10px

右内边距是 5px

下内边距是 15px

左内边距是 20px

padding: 10px 5px 15px

上内边距是 10px

右内边距和左内边距是 5px

下内边距是 15px

padding: 10px 5px

上内边距和下内边距是 10px

右内边距和左内边距是 5px

padding:10px

所有 4 个内边距都是 10px

Border(边框) - 围绕在内边距和内容外的边框。

值:

border-width:规定边框的宽度。

border-style:规定边框的样式。

border-color:规定边框的颜色。

应用:可单独设置上下左右

border-bottom-color:#.......

border-style:dotted solid double dashed; 

上边框是点状

右边框是实线

下边框是双线

左边框是虚线

border-style:dotted solid double;

上边框是点状

右边框和左边框是实线

下边框是双线

border-style:dotted solid;

上边框和下边框是点状

右边框和左边框是实线

border-style:dotted;

所有 4 个边框都是点状

Margin(外边距) - 清除边框外的区域,外边距是透明的。

值:auto:浏览器计算外边距

应用:

margin:10px 5px 15px 20px;

上外边距是 10px

右外边距是 5px

下外边距是 15px

左外边距是 20px

margin:0px 5px 15px;

上外边距是 10px

右外边距和左外边距是 5px

下外边距是 15px

margin:10px 5px;

上外边距和下外边距是 10px

右外边距和左外边距是 5px

margin:10px;

所有 4 个外边距都是 10px

 

标签:模型,边框,5px,10px,外边,15px,border
来源: https://www.cnblogs.com/hxy-123/p/15552881.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有