CSS进阶-16-显示模式-转换

最新推荐文章于 2024-07-10 23:34:24 发布

Keep learning（Poker）

最新推荐文章于 2024-07-10 23:34:24 发布

阅读量227

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_63562705/article/details/121836375

版权

4.1元素显示模式转换

★目的: 改变元素默认的显示特点，让元素符合布局要求

★语法:

属性	效果	使用频率
display: block	转换成块级元素	较多
display:inline-block	转换成行内块元素	较多
display:inline	转换成行内元素	较少

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 块：独占一行；宽度默认是父级100%；添加宽度都生效 */
        div{
            width: 300px;
            height: 300px;
            background-color: pink;

            /* 行内块 */
            /* display: inline-block; */

            /* 行内 */
            display: inline;

            /* 块 */
            /* display: block; */
        }
    </style>
</head>
<body>
    <div>11111</div>
    <div>22222</div>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Keep learning（Poker）

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS进阶-16-显示模式-转换

4.1元素显示模式转换★目的: 改变元素默认的显示特点，让元素符合布局要求★语法:属性效果使用频率 display: block 转换成块级元素较多 display:inline-block 转换成行内块元素较多 display:inline 转换成行内元素较少 <!DOCTYPE html><html lang="en"><head> <meta charset="
复制链接

扫一扫