css入门(九)—— 图片样式

1. 图片大小
    使用width和height属性,一般设置为像素值(20px)
2. 图片边框
    使用border-width、border-style和border-color属性,也可以简写为border
3. 图片水平对齐,即参照x轴上某一点对齐
    A. 虽然叫做图片水平对齐,但实际上图片水平对齐是相对于图片的父元素而言,因此需要在父元素中设置text-align属性,可取值为left(默认值)、center和right。
    B. text-align只对img和文本有效。也就是说如果父元素设置了text-align属性,其中只有img和文本会水平对齐。
4. 图片垂直对齐,即参照y轴上某一点对齐
    A. 指行内其他元素相对于该元素的对齐方式,常用的可取值为top、middle、bottom和baseline。
5. 文字环绕效果
    A. 浮动属性float可以设置文字在某个元素的周围,适用与所有元素。常用可取值为left(元素向左浮动)和right(元素向右浮动),默认不浮动。
    e.g. <head>
            <title>float</title>
            <style type="text/css">
                img {
                    float: left;
                    /* 设置图片大小 */
                    width: 100px;
                    height: 100px;
                    /* 设置图片右边和下边的空隙 */
                    margin-right: 50px;
                    margin-bottom: 50px;
                }

                p {
                    font-size: 16px;
                    text-indent: 28px;
                }
            </style>
        </head>

        <body>
            <img src="kobe.png" alt="" />
            <p>电子科技大学电子科技大学电子科技大学电子科技大学电子科技大学电子科技大学电子科技大学电子科技大学电子科技大学电子科技大学电子科技大学电子科技大学电子科技大学</p>
        </body>

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值