帝国CMS:什么是盒子模型?它的使用方法是?

- 编辑:爱思60度微信公众号(wangxi2004324235) -

1: 什么是盒子:块级元素中的一种,在CSS中,"box model"这一术语是用来设计和布局时使用。

盒子模型中包含的内容:content(内容) border(边框) padding(内边距) margin(外边距) 

margin (外边距)用于定义页面中元素与元素之间的距离

border (边框)元素边框

padding (内边距)用于定义内容与边框之间的距离

content (内容)可以是文字或图片

image.png

2:设置盒子的边框样式(颜色,粗细,边距) 设置顺序都是:上右下左(顺时针顺序)

如{margin:10px  20px 30px 10px};分别对应上边距10px、右边距20px、下边距30px、左边距10px。


特殊情况

image.png

border、padding使用方法同理


3:盒子总宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

盒子总高度最终计算公式同理。


{ width: 300px; border: 25px solid green; padding: 25px; margin: 25px; }

image.png

300px (宽)+ 50px (左右填充)+ 50px (左右边框)+ 50px (左右边距)= 450px

99%的人还阅读了:

帝国CMS:什么是盒子模型?它的使用方法是?

帝国CMS:刷新所有信息内容页面和不打全部刷新勾的区别

帝国网站管理系统参数如何设置?-站长之家

公众号搜索“爱思60度”,领取大礼包

微信二维码

来源:,欢迎分享本文,转载请保留出处!(微信公众号:wangxi2004324235)