ROOT
ROOT
文章目录
  1. 修饰图片
    1. 图片边框(border-style)
    2. 图片缩放
  2. 对齐图片
    1. 横向对齐方式
    2. 纵向对齐方式
  3. 图文混排
    1. 文字环绕
    2. 设置图片与文字间距

CSS 美化图片

好久没写博客了,最近在忙着编写百科知识竞赛平台,第一个 php 项目实现了。。有点不爽的是,希望这个百科竞赛是校级的,不然废了那么多精力最后只是系级的比赛很不值,但也算作是经验吧。。只是写的很凌乱。。

把 HTML+CSS 的书看完了,来继续整理下 css 的知识。

修饰图片

图片边框(border-style)

可定义边框样式,即边框风格。

{ border-style: dotted|dashed|solid|double; }
{ border-top-style|border-right-style|border-bottom-style|border-left-style: dotted|dashed|solid|double; }

图片缩放

使用 (max-width) 和(max-height),分别用来设置图片的宽度最大值和高度最大值。例如

{ max-height: 180px; }

使用 (width) 和(height)属性,可以设置图片的宽度和高度。

对齐图片

横向对齐方式

如果要定义图片的对齐方式,不能在样式表中直接定义图片样式,需要在图片的上一个标记级别,即父标记定义,让图片继承父标记的对齐方式。毕竟图片本身没有对齐属性,需要使用 css 继承父标记的 (text-align) 来定义对齐方式。

纵向对齐方式

使用 (vertical-align) 属性来定义图片纵向的对齐方式。

{vertical-align: baseline|sub|super|top|text-top|middle|bottom|text-bottom|length|%;}

图文混排

文字环绕

使用 (float) 属性来定义该效果,该属性主要定义元素在哪个方向浮动,一般情况下该属性总应用于图像,使文本环绕在图像四周,有时候也可以定义其他浮动元素。

{float: none|left|right; }

设置图片与文字间距

可以使用 (padding) 来设置。

padding 属性主要用来在一个声明中设置所有内边距属性,既可以设置元素所有内边距的宽度,或者设置各边上的内边距的宽度。

{ padding: padding-top|padding-right|padding-bottom|padding-left; }
支持一下
扫一扫,支持Netcan
  • 微信扫一扫
  • 支付宝扫一扫