TreeMind树图在线AI思维导图
笔灵Logo笔灵AI论文写作三步搞定,GO>>
当前位置:树图思维导图模板IT互联网分析方法/模型盒子模型思维导图

盒子模型思维导图

  收藏
  分享
免费下载
免费使用文件
🐱呆呆 浏览量:02025-05-28 11:30:56
已被使用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 颜色值 阴影类型;

相关思维导图模板

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

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

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

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