盒子模型思维导图

🐱呆呆

2025-05-28

浏览量: 0

背景属性

边框属性

宽度属性和高度属性

盒子模型内容详述

树图思维导图提供《盒子模型》在线思维导图免费制作，点击“编辑”按钮，可对《盒子模型》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：dc63a38303626b8edc50ee453fb1c099

思维导图大纲

div标签

可以设置宽度，高度，内边距，边框，外边距

可以在内部嵌套绝大多数HTML标签

可以嵌套<div>标签，以划分出更复杂的网页结构

还可以和id，class等属性结合使用

边距属性

内边距属性

调整内容在盒子中的显示位置

padding:上内边距[右内边距下内边距左2内边距]

top

right

bottom

left

外边距属性

调整盒子与盒子间的距离

margin:上外边距[右外边距下外边距左外边距]

CSS3渐变属性

线性渐变

background-image:linear-gradient(渐变角度，颜色值1，颜色值2，...,颜色值n)

径向渐变

background-image:linear-gradient(渐变形状中心位置，颜色值1，颜色值2，...,颜色值n)

重复渐变

background-image:repeating-radial-gradient(渐变形状中心位置，颜色值1，颜色值2，...,颜色值n)

认识盒子模型

宽度属性和高度属性

可以对盒子的大小进行控制

盒子宽度=width属性值+左右内边距值+左右边框宽度值+左右外边距值

盒子的高度=height属性值+上下内边距值+上下边框宽度值+上下外边距值

边框属性

border-style

border-style:上边[右边下边左边]

border-width

border-width:上边[右边下边左边]

border-color

border-color:上边[右边下边左边]

border

border:宽度样式颜色；

border-radius

border-radius：参数1/参数2

border-image

border-image-source

指定图像路径

border-image-slice

用于指定边框顶部，右部，底部，左侧的向内偏移量

border-image-width

指定边框宽度

border-image-outset

指定边框图像向外部眼神的距离

border-image-repeat

指定图像的填充方式

box-sizing属性

box-sizing：content-box/border-box;

content-box:定义的width和height数值不包括border和padding数值

border-box：定义的width和height数值包括border和padding数值

背景属性

设置背景颜色

background-color

设置背景图像

body{ background-color:#ccc;background-image:url(images/...);

设置背景图像平铺

repeat

设置背景图像沿水平和数值两个方向平铺，为默认值

no-repeat

设置图像不平铺

repear-x

只沿水平方向平铺

repeat-y

只沿着竖直方向平铺

设置背景图像的位置

background-position:属性值1 属性值2；

center：水平垂直居中

top：水平居中垂直居上

设置图像固定

background-attachment

scroll:背景随图像一起滚动

fixed：图像不随页面滚动

设置背景颜色与背景图像的不透明度

RGBA颜色模式rgba{r,g,b,alpha}

opacity：opacityValue

设置背景图像的大小

background-size:属性值1 属性值2

设置背景图像的显示区域

background-origin：属性值

padding-box：背景图像相对于内边距定位

border-box：背景图像相对于边框定位

content-box：背景图像相对于内容边界定位

设置背景图像的裁剪区域

background-clip:属性值；

padding-box：从外边框区域向外裁剪

border-box：从内边距向外裁剪

content-box：从内容区域向外裁剪

设置多重背景图像

背景复合属性

background:[background-color][background-image][background-repeat][background-attachment][background-position][background-size][background-clip][background-origin]

box-shadow属性

box-shadow:像素值2 像素值2 像素值3 像素值4 颜色值阴影类型；

数学如何解决问题？思维导图

U575789758

0.46

树图思维导图提供《数学如何解决问题？》在线思维导图免费制作，点击“编辑”按钮，可对《数学如何解决问题？》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：1b17bf503628837a34235fb7a84f5863

环境分析与理性分析思维导图

U282206716

2.61

树图思维导图提供《环境分析与理性分析》在线思维导图免费制作，点击“编辑”按钮，可对《环境分析与理性分析》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：1058265a6266a53cea7c1845ca85c804

思维导图模板

IT互联网

分析方法/模型

正文

相似思维导图模版

思维导图模版推荐

一、反映成果的总结（不超过5000字）思维导图

2025-05-28 09:44:23

首页

我的文件

我的团队

个人中心

盒子模型思维导图

思维导图大纲

相关思维导图模版

div标签

边距属性

CSS3渐变属性

宽度属性和高度属性

边框属性

box-sizing属性

背景属性

box-shadow属性

相似思维导图模版

思维导图模版推荐