昨日学习css显示模式转换

Ara~追着风跑 2022-01-15 08:09:34
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示模式的转换</title>
    <style>
        /* 特殊情况下,我们需要元素模式的转换,简单理解:一个模式的元素需要另外一种模式的特性
        比如想要增加链接a的处罚范围 */
        /* 转换为块元素:display:block; */
        /* 装换为行内元素:display:inline; */
        /* 装换为行内块元素:display:inline-block; */
        
        a {
            width: 400px;
            height: 300px;
            background-color: red;
            /* 把行内元素转换为块级元素 */
            display: block;
            /* 把块级元素转换为行内元素 */
            display: inline;
            /* 把块级元素转换为行内块元素 */
            display: inline-block;
        }
    </style>
</head>

<body>
    <a href="#">小小杨</a>
</body>

</html>

 

...全文
5 回复 7 打赏 收藏 举报
写回复
回复
切换为时间正序
请发表友善的回复…
发表回复
相关推荐
发帖
哪吒社区
加入

4.5w+

社区成员

我命由我不由天,来吧,和哪吒一起奋发图强,搬砖工逆袭Java架构师!
帖子事件
创建了帖子
2022-01-15 08:09
社区公告

【Java技能树】和哪吒一起,打卡100天,每天分享一个知识点,一起学习,一起进步,告别CRUD,搬砖工逆袭Java架构师,加油!

【积分榜】积分榜前十每周都有精彩礼包赠送!

【添加微信】备注1024,赠送Java学习路线思维导图