盒子模型

简介: 盒子模型

一、盒子的组成:

1.网页内容:位于最中间,网页的主要显示内容

2.边框(border):位于内边距外面。

3.内边距(paddind):位于内容与边框之间的空隙

4.外边距(margin):边框与外面元素的空隙

二、边框:

1.颜色color:black,red

2.大小:1px

3.类型:实线solid,虚线dashed,点线dotted

4.上边框设置:border-top:1px solid black

5.下边框设置:border-bottom:1px solid black

6.左边框设置:border-left:1px solid black

7.右边框设置:border-right:1px dashed black

三、margin:

外边距:

margin-top:上外边距

margin:15px,表示当前元素的四格外边距都是15px

margin:15px 20px 10px 15px:表示上边距15px,右边距20px,下边距10px,左边距15px

四、padding:

内边距:

padding-bottom:下内边距

padding:10px,表示4个内边距都是10px;

padding:15px 20px 10px 10px,表示上内边距15px,右内边距20px,下内边距10px,左内边距10px;

五、border-radius:表示边框的圆角。eg:border-radius:10px

圆形:border-radius:50% 50%;

六、一个盒子的总宽度=左外边距+左边框+左内边距+内容+右内边距+右边框+右外边距

七、盒子的总高度=上外边距+上边框+上内边距+内容的高度+下内边距+下边框+下外边距

相关文章
|
8天前
|
前端开发 容器
给 CSS 盒子模型添加边框时,需要注意什么?
在给CSS盒子模型添加边框时,需要注意边框的宽度、样式和颜色,以及它如何影响盒子的总尺寸和布局。边框会增加盒子的总宽度和高度,可能需要调整其他属性以保持布局的完整性。
|
2月前
|
容器
认识盒子模型
认识盒子模型。
45 2
|
4月前
|
前端开发 C++
CSS【详解】 标准盒模型 VS IE 盒模型
CSS【详解】 标准盒模型 VS IE 盒模型
44 0
|
5月前
|
前端开发
CSS基础-盒模型:边框、内边距、外边距
【6月更文挑战第8天】Web设计中的盒模型由内容区域、内边距、边框和外边距组成,是理解页面布局的关键。内容区域包含实际内容,内边距提供间隔,边框定义元素边界,外边距控制元素间距。常见易错点包括边框宽度计算、外边距折叠和盒模型理解不透彻。通过实践和媒体查询可解决响应式设计挑战,`border-radius`可能导致圆角问题。理解盒模型并灵活应用能创建多样化布局。
77 6
|
6月前
|
前端开发
盒子模型练习
盒子模型练习
24 0
|
6月前
|
前端开发
说说你对盒子模型的理解
该文介绍了CSS中的盒子模型,包括W3C标准盒子模型和IE怪异盒子模型。在标准模型中,元素宽度不包含padding和border,总宽度=width+padding+border+margin。而在IE怪异模型中,width和height包含padding和border,总宽度和高度仅加margin。CSS的box-sizing属性用于控制元素的盒模型,content-box遵循标准模型,border-box则类似IE模型。
|
前端开发 开发者
标准盒子模型,与怪异盒子模型详解
标准盒子模型,与怪异盒子模型详解
163 0
|
前端开发
【说说你对盒模型的理解】
【说说你对盒模型的理解】
【说说你对盒模型的理解】
|
前端开发
不知道宽度和高是多少,实现水平垂直居中(css)
不知道宽度和高是多少,实现水平垂直居中(css)
|
前端开发 小程序
CSS 盒子垂直居中的方法
CSS 盒子垂直居中的方法
140 0