《响应式Web设计-HTML5和CSS3实战》阅读笔记第五章

最新推荐文章于 2025-12-01 21:03:28 发布

原创

最新推荐文章于 2025-12-01 21:03:28 发布 · 604 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3

概要

响应式设计第五章概要

总结

CSS3给前端开发带来了什么

提供各种效果：圆角、背景渐变、文字阴影、盒阴影、自定义字体以及多重背景图片。IE6-8不支持CSS3，有需要可以使用腻子脚本。

CSS规则解析

规则由选择器和声明组成，声明由属性和值组成。

私有前缀及其用法

私有前缀即是各浏览器对未批准样式的实现，用于测试使用情况。使用未批准样式时应保持前缀样式在前，无前缀样式在后的习惯，这样在浏览器支持后也无需修改样式。

可以使用前缀自动补全功能。1.通过JS添加；2.通过WebStorm添加插件autoprefixer添加；3.通过定义Sass方法添加；

HTML5+CSS3浏览器支持程度查询(http://caniuse.com/)。

快速而有效的CSS技巧

CSS多栏布局
文字换行

<div class="column1">
    今天，一场春雨把我带进了另一个美丽的春的世界，雨中踏春别有一翻情趣在其中。
    ......
    http://localhost:63342/WebProject/Chapter5/column.html
</div>
<div class="column2">
    今天，一场春雨把我带进了另一个美丽的春的世界，雨中踏春别有一翻情趣在其中。
    ......
</div>

.column1, .column2 {
    padding: 10px;
    margin: 10px;
    border: 1px solid #cccccc;
}
.column1 {
    /*固定栏位宽度*/
    -webkit-column-width: 20em;
    column-width: 20em;
    /*文字换行-直接单词内换行*/
    word-break: break-all;
    /*文字换行-末尾超长单词新行显示，还显示不下单词内换行*/
    word-wrap: break-word;
}
.column2 {
    /*固定栏位数量*/