经验:
1.行内元素不能设置宽,高,margin-top,margin-bottom属性,给行内元素设置行高,行高会给其父元素,而当把他设置为块元素时,行高才会给它,所有行内元素行高无效。
2.设置图标字体大小时,如果通过给其父元素a设置,图标字体的原有css样式会覆盖继承的a的字体大小,所以无效。
3.选择器的权重,参考CSS选择器优先级的计算方式。
4.mid-width保证宽度最小值,布局稳定性。
5.traption: height 0.3s,过渡效果。
6.相邻块元素相邻边的阴影会被层级高的遮挡。
7.border-color,transparent(属性)。
8.text-indent:首行缩进 我们可以把设置一个特别大的负值,然后隐藏文本(文字是给搜索引擎看的,并不想用户看到)。
9. : focus 当元素获取焦点的伪元素
10.ctrl + f ,本文件中搜索代码。
11.
小米商城首页右侧固定布局的工具栏,使用固定定位(position: fixed;),由于固定定位按视窗布局,所以使用以下代码实现此功能。
.right-toolbar { 26px; height: 206px; background-color: pink; position: fixed; bottom: 60px; right: 50%; margin-right: -639px; /* left + margin-left + width + margin-right + right = 视口的宽度 auto + 0 + 26 + 0 + 60 = 视口宽度 auto + 0 + 26 + -639px + 50% = 视口宽度 */ }
12.(图标字体的使用再重新总结一次,参考HTML5和CSS3基础教程那本书以及iconfont官方文档中的使用教程)。
13.开启BFC解决外边距重叠(overflow: hidden;)。
14.搜索框增加打字时候与边框的距离,给搜索框增加padding-left和padding-right
15.设置标题图标:
网站图片一般都存储在网站的根目录下, 名字一般都叫做favicon.ico。
<link rel="icon" href="favicon.ico"/>
16.为了提升用户体验,css代码是要压缩的。
疑问(希望看完《CSS世界》后可以得到解答):
1.对图片使用vertical-align: top;有什么效果,为什么。
2.
为什么0;height:0;(不使用此行代码小三角将变大)。
3.有关行高的问题。
学识浅薄,如有错误,恳请斧正,在下不胜感激。