在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渐变效果,具体样式所示。
