热点:

    CSS3 inline-box使用指南

      [   原创  ]   作者:
    收藏文章 暂无评论

    在CSS3新增的特性中,display属性扩展了多个取值,除box外还引入了inline-box,用于定义内联伸缩容器。通过一个具体示例可清晰展示inline-box的实际应用方式,其操作步骤如下:将元素设置为inline-box后,该元素既具备内联特性,又能启用弹性布局功能,实现内容的灵活排列与对齐。

    1、 在已有Web项目中创建名为inlinebox.html的静态页面,具体操作所示。

    2、 在页面 body 标签内添加一个 div 容器,并在其内部嵌入七个子 div,每个子 div 分别显示星期一至星期日的文字内容。

    3、 第三步,通过week类选择器将display属性设为inline-box,具体效果所示。

    4、 第四步,通过类选择器定位子div标签,设置其内边距、外边距、字体样式、行高、边框,并使内容居中显示,效果所示。

    5、 保存代码后在浏览器中查看效果,各设置项将依次横向排列展示。

    6、 第六步,为div标签设置border-radius属性及背景样式,背景采用repeating-radial-gradient渐变效果,具体样式所示。

    soft.zol.com.cn true https://soft.zol.com.cn/1202/12023577.html report 807 在CSS3新增的特性中,display属性扩展了多个取值,除box外还引入了inline-box,用于定义内联伸缩容器。通过一个具体示例可清晰展示inline-box的实际应用方式,其操作步骤如下:将元素设置为inline-box后,该元素既具备内联特性,又能启用弹性布局功能,实现内容的灵活排...
    不喜欢(0) 点个赞(0)
    随时随地资讯查报价 就上ZOL手机客户端,点击或扫描二维码下载
    立即下载

    Display Changer

    更新时间:2010年02月04日

    用户评分:0 | 0人点评

    软件类型:共享软件

    软件语言:英文

    Display Changer
    • 更新时间:2010年02月04日
    • 软件大小:0.5MB
    • 软件分类:系统优化
    • 语言种类:英文
    • 软件评级:0 人点评