背景基础样式
- ''' background:#f00 url(http://) no-repeat fixed 0 0;''' 其中0,0为定位需求,可以以此来实现css sprites(精灵图)需求
- 实现几个框排成一列有两种方法:① 使用div包裹所有元素,然后使用float浮动来实现;② 使用div包裹所有元素,然后对元素使用inline-block实现排成一列。
- 对于字体间距的形成:直接使用line-height:2(行高为本字体高度的两倍),或者使用line-height:200%(行高为父元素字体高度的两倍,且具有继承性)
- 对于两个在同一行的inline-block的对齐方式,可以使用vertical-align:bottom或者vertical-align:top或者middle来实现。
盒模型
- 在系统中存在两种盒模型,一种是W3C模型,其width和height仅仅包括content,但是IE盒模型中的width和height包括content,padding,border。两种盒模型有不同的应用场景。
- 'box-sizing:content-box'代表是使用w3C盒模型;‘box-sizing:border-box’使用IE盒模型。
字体图标
- 关于字体图标的原理:是浏览器在读取HTML文件,进行渲染时会将文字转换成Unicode码,然后在根据HTML中设置的font-family来寻找电脑中的字体文件,找到文件后根据Unicode码去绘制外形 ,显示在页面上。
- 有两种方法可以直接在网站上直接拉取图标:一般网页为### Iconfont-阿里巴巴矢量图标库,① 在其中找到对应图标的Unicode码,然后直接调用,并且要将地址导入到css中;② 更改其中的对应图标的名称,然后再调用,并将地址导入到css中。