CSS盒子模型01
CSS盒子模型01
vertical-align:middle;
使文字和图片对齐
放到行内块标签中
盒子模型：
1.标准盒模型 w3c width内容区域
2.怪异盒模型IEwidth盒子大小
都由内容区域 内边距 边框 外边距 组成
内容区域：
width
height
overflow:内存溢出
visible
hiddern
scroll
auto
padding
(内边距 内填充 内补丁)
边框和内容之间的空白宽度
注意：这个部分只有空白，不能设置外观样式，颜色等，只能设置空白的宽度
padding:x y;
x上下 y 左右
padding:x y z;
x上 y左右 z 下
border
border-style:solid 实线
border-style:none 无样式
border-style:dashed 虚线
border-style:dotted 点线
border-style:double
border-style:groove
border:border-width border-style border-color
中间无先后顺序 中间用空格隔开
margin
标签和它相邻的标签之间的空白宽度
外边距的设置是相叠加的
特别
<body>标签的margin代表内容与浏览器边框的距离
两个行内元素的margin-right和margin-left，采用“和”
两个块元素的marign-top和margin-bottom，采用“最大值”
margin:auto使块元素居中对齐
具体用法同padding
display
CSS使用display设置的标签的显示方式
block“块”元素
inline“行内”元素
inline-block 行内块元素
none 隐藏
background
background-color
定义标签的背景颜色
background-image
定义背景图片,可定义多背景
background-repeat
定义背景图片的显示方式
repeat，图片重复
repeat-x，图片横向重复
repeat-y，图片纵向重复
no-repeat，图片不重复
background-position
定义背景图片的位置
直接使用两个定位单词，例:background-position: right top;
使用x、y坐标，例:background-position: 20px 30px;
background-size
定义背景图片的大小
background-size: *length* | *percentage* | cover | contain;
cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。（可能会裁剪图片）
contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。(可能会出现空白)
background-origin
定义背景图片的渲染位置
背景图片可以放置于padding-box (内边框)、 content-box（内容框） 或 border-box（边框） 区域。
background-attachment
定义背景图片是否固定或者随着页面的其余部分滚动
background-attachment：fixed（固定）| scroll（默认）
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
· 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统