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


相关推荐
Carsene13 分钟前
开源项目文档架构设计:Git Submodule 实现文档与代码的优雅分离
前端·后端
bdawn15 分钟前
SCSS、CSS 和 SASS 之间的联系与区别
css·sass·预处理·编译·scss
Z思学17 分钟前
promise 有几种状态 async/await 和promise 有什么关系
前端
han_18 分钟前
JavaScript设计模式(四):发布-订阅模式实现与应用
前端·javascript·设计模式
276695829220 分钟前
租车帮(悟空)订单查询算法分析
java·服务器·前端·悟空·悟空app·租车帮·租车帮逆向
__雨夜星辰__32 分钟前
TypeScript 入门学习笔记(面向对象 + 常用设计模式)
前端·学习·typescript
阿珊和她的猫34 分钟前
微信小程序 WXSS 与 CSS 的区别
css·微信小程序·notepad++
晚霞的不甘1 小时前
HarmonyOS ArkTS 进阶实战:深入理解边距、边框与嵌套布局
前端·计算机视觉·华为·智能手机·harmonyos
_野猪佩奇_牛马版1 小时前
ReACT Agent 开发知识点总结
前端
牛奶1 小时前
你发送的消息,微信到底怎么送到的?
前端·websocket·http