css样式图片body,图片样式的使用-基本介绍-CSS(016)

秒速五厘米 2022-09-02 14:57 191阅读 0赞

在css中，对于图片的大小，我们使用width和height两个属性来定义。

语法：

width:像素值；

height:像素值；

示例代码：

图片大小

img \{ width:100px;height:80px;\}

![Image 1][]

图片的实际大小与设置大小不是正相关的，也就是图片在Photoshop中的宽度高度，在设定网页宽度高度时，可以参考，但是不用严格遵守，我们设置图片的宽度和高度，目标是为了让图片在网页中呈现出想要的效果。

图片边框border：

语法：

border-width:像素值；

border-style:属性值；

border-color:颜色值；

这个边框和元素边框是一样的，比较常用的是简洁写法。

示例代码：

图片边框

img

width:100px;

height:80px;

border-width:1px;

border-style:solid;

border-color:red;

![Image 1][]

如果我们在图片的边框上加hover的效果，

加hover

img

width:100px;

height:80px;

border:1px solid blue;

img:hover \{ border:1px solid green;\}

![Image 1][]

图片水平对齐：

在文本中需要水平对齐时，使用text-align属性，在图片的水平对齐，也可以使用text-align，一样的效果。

语法：

text-align:属性值；

text-align属性取值

属性值说明

left左对齐，默认值

center居中对齐

right右对齐

示例代码：

图片水平对齐

div

width:600px;

height:100px;

border: 1px solid black;

margin-bottom:20px;

img \{ width:80px;height:50px;\}

\#d1 \{ text-align:right;\}

\#d2 \{ text-align:center;\}

\#d3 \{ text-align:left;\}

![Image 1][]

以上代码就是图片的水平对齐方式，很多初学者会有疑问，认为定义图片的水平对齐，肯定是针对img标签来设置的，其实呢，是需要对图片所在的父元素进行水平对齐的。

图片垂直对齐：

如果我想要图片能够垂直对齐，应该怎么做呢？在css中，我们可以使用vertical-align属性来定义垂直对齐方式的。

语法：

vertical-align:属性值；

vertical-align属性取值

属性值说明

top顶部对齐

middle中部对齐

baseline基线对齐

bottom底部对齐

示例代码：

垂直对齐方式

\#dv1

width:600px;

height:600px;

border:1px solid black;

text-align:center;

img \{ width:80px;height:80px;\}

\#img1 \{ vertical-align:top;\}

\#img2 \{ vertical-align:middle;\}

\#img3 \{ vertical-align:bottom;\}

\#img4 \{ vertical-align:baseline;\}

![Image 1][]方式：top

--------------------

![Image 1][]方式：middle

--------------------

![Image 1][]方式：bottom

--------------------

![Image 1][]方式：baseline

--------------------

预览浏览器效果后，大家有疑问了，不是说图片对齐方式吗？没看到图片垂直对齐改变啊。这个就是误解了vertical-align属性的含义了。

它负责定义的是行内元素相对于该元素的垂直对齐方式。也就是上面代码中图片与文字的对齐方式。这个大家自己理解一下，消化一下。

本文来源:码农新势力 微信公众号

文章编辑:标梵互动(https://www.biaofun.com/)

[Image 1]:

css样式图片body,图片样式的使用-基本介绍-CSS(016)

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 CSS样式-图片居中显示

相关如何使用css样式将正方形图片显示为圆形图片布局

相关 html背景图片css怎么添加,css样式怎么插入背景图片？

相关 css样式图片body,图片样式的使用-基本介绍-CSS(016)

相关使用CSS过滤效果来改变图片样式

相关 CSS样式基本知识

相关 css样式

相关 CSS样式

相关 css的基本使用3-背景样式

相关 css的基本使用-文本样式