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 | 元素向右浮动 |


相关推荐
Erishen7 分钟前
🚀 重新定义前端组件安装体验:shadcn + Bun 的极致开发效率
前端
冬奇Lab7 分钟前
Vercel部署全攻略:从GitHub到上线,10分钟让你的前端项目免费拥有自己的域名
前端·后端·node.js
牛马1119 分钟前
Flutter Web性能优化标签解析
前端·flutter·性能优化
Bigger10 分钟前
Tauri (25)——消除搜索列表默认选中的 UI 闪动
前端·react.js·weui
李少兄21 分钟前
简单讲讲 SVG:前端开发中的矢量图形
前端·svg
前端小万22 分钟前
告别 CJS 库加载兼容坑
前端·前端工程化
恋猫de小郭23 分钟前
Flutter 3.38.1 之后,因为某些框架低级错误导致提交 Store 被拒
android·前端·flutter
JarvanMo26 分钟前
Flutter 需要 Hooks 吗?
前端
光影少年37 分钟前
前端如何虚拟列表优化?
前端·react native·react.js
Moment38 分钟前
一杯茶时间带你基于 Yjs 和 reactflow 构建协同流程图编辑器 😍😍😍
前端·后端·面试