HTML-HTML5+CSS3权威指南阅读(三、CSS3)

本文深入探讨了CSS3新特性在不同浏览器中的实现方式,着重介绍了block、inline、inline-block的区别,以及text-shadow、box-shadow的运用,并对比了多栏布局与盒布局的特点与应用。通过实例演示如何灵活运用这些特性进行网页布局。

不同的浏览器(包括-moz-代表的Mozilla Firefox, -ms-代表的Microsoft Internet Explorer等)厂商在发布正式版本之前之前, 试验各自对CSS3新特性的实现, 正式版本发布后就不再需要前缀, 遵循样式表的层叠特性, 我们将无前缀的代码放在最后, 这样如果该特性可用, 则会覆盖之前的声明

1.display 中 block, inline, inline-block 的区别

  1).默认情况下, block 宽度占满整个浏览器, inline 宽度等于其内容的宽度

  2).每行只容纳一个 block 元素, 但可以并列容纳多个 inline 元素

  3).block 元素宽、高、行高等可以更改, inline 元素宽、高、行高等不可更改

  4).应用 inline-block 的元素呈现为内联对象, 周围元素保持在同一行, 但可以设置宽度和高度地块元素的属性(这样可以使用 li + inline-block 制作导航, 而无需 float)

  5).若想将 table 改为 inline 可以是使用 inline-table

2.text-shadow, box-shadow

  text-shadow: 对文字加上阴影效果

  box-shadow: 对容器加上阴影效果

3.box-sizing

  content-box: 只是内容的宽高

  border-box: 内容和边框及补白的总宽高

4.column-count: n 和 display: box 即多栏布局与盒布局之间的区别之间的区别

  多栏布局: 将一个元素的内容平均分为两栏或者多栏, 保证个栏中的内容底部对齐, 各栏宽度必须是相等的, 且不可能指定什么栏中显示什么内容, 所以比较适合文章分栏

  盒布局:

转载于:https://www.cnblogs.com/JohnABC/p/4234577.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值