盒子模型

简介: 盒子模型

一、盒子的组成:

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%;

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

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

相关文章
|
23天前
|
前端开发
CSS基础-盒模型:边框、内边距、外边距
【6月更文挑战第8天】Web设计中的盒模型由内容区域、内边距、边框和外边距组成,是理解页面布局的关键。内容区域包含实际内容,内边距提供间隔,边框定义元素边界,外边距控制元素间距。常见易错点包括边框宽度计算、外边距折叠和盒模型理解不透彻。通过实践和媒体查询可解决响应式设计挑战,`border-radius`可能导致圆角问题。理解盒模型并灵活应用能创建多样化布局。
|
5天前
|
Web App开发 移动开发 前端开发
CSS 盒子模型(显示模式、盒子模型)
CSS 盒子模型(显示模式、盒子模型)
|
2月前
|
前端开发
盒子模型练习
盒子模型练习
15 0
|
2月前
|
前端开发
说说你对盒子模型的理解
该文介绍了CSS中的盒子模型,包括W3C标准盒子模型和IE怪异盒子模型。在标准模型中,元素宽度不包含padding和border,总宽度=width+padding+border+margin。而在IE怪异模型中,width和height包含padding和border,总宽度和高度仅加margin。CSS的box-sizing属性用于控制元素的盒模型,content-box遵循标准模型,border-box则类似IE模型。
|
24天前
|
前端开发 容器
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影(一)
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影一
30 0
|
24天前
|
前端开发
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
22 0
|
9月前
|
前端开发 开发者
标准盒子模型,与怪异盒子模型详解
标准盒子模型,与怪异盒子模型详解
110 0
|
11月前
|
前端开发
【说说你对盒模型的理解】
【说说你对盒模型的理解】
【说说你对盒模型的理解】
|
10月前
|
前端开发
不知道宽度和高是多少,实现水平垂直居中(css)
不知道宽度和高是多少,实现水平垂直居中(css)
|
前端开发
CSS中的标准盒子模型和怪异盒子模型
CSS中的标准盒子模型和怪异盒子模型
192 0