盒子模型思维导图
盒子模型内容详述
树图思维导图提供 盒子模型 在线思维导图免费制作，点击“编辑”按钮，可对 盒子模型 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：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
Copyright©2022-2025 树图网shutu.cn 版权所有|上海聚石塔网络科技有限公司|网站备案号：沪ICP备2021036420号-3|
沪公网安备 31011502019485号|
上海工商