CSS新手入门笔记整理:CSS图片样式

图片大小

语法

复制代码
width:像素值;
height:像素值;

图片边框:border

语法

边框:宽度值 样式值 颜色值;

复制代码
border:1px solid red;

图片对齐

水平对齐:text-align

语法

复制代码
text-align:取值;

|---------|----------|
| 属性值 | 说明 |
| left | 左对齐(默认值) |
| center | 居中对齐 |
| right | 右对齐 |

  • 图片是在父元素中进行水平对齐,因此我们应该在图片的父元素中定义。

垂直对齐:vertical-align

语法

复制代码
vertical-align:取值;

|----------|--------|
| 属性值 | 说明 |
| top | 顶部对齐 |
| middle | 中部对齐 |
| baseline | 基线对齐 |
| bottom | 底部对齐 |

  • vertical-align属性是定义周围的行内元素或文本相对于该元素的垂直方式。

文字环绕方式:float

复制代码
float:取值;

|---------|--------|
| 属性值 | 说明 |
| left | 元素向左浮动 |
| right | 元素向右浮动 |


相关推荐
刘发财3 小时前
弃用html2pdf.js,这个html转pdf方案能力是它的几十倍
前端·javascript·github
牛奶6 小时前
2026年大模型怎么选?前端人实用对比
前端·人工智能·ai编程
牛奶6 小时前
前端人为什么要学AI?
前端·人工智能·ai编程
Kagol8 小时前
🎉OpenTiny NEXT-SDK 重磅发布:四步把你的前端应用变成智能应用!
前端·开源·agent
GIS之路9 小时前
ArcGIS Pro 中的 notebook 初识
前端
JavaGuide9 小时前
7 道 RAG 基础概念知识点/面试题总结
前端·后端
ssshooter10 小时前
看完就懂 useSyncExternalStore
前端·javascript·react.js
格砸11 小时前
从入门到辞职|从ChatGPT到OpenClaw,跟上智能时代的进化
前端·人工智能·后端
Live0000011 小时前
在鸿蒙中使用 Repeat 渲染嵌套列表,修改内层列表的一个元素,页面不会更新
前端·javascript·react native
柳杉11 小时前
使用Ai从零开发智慧水利态势感知大屏(开源)
前端·javascript·数据可视化