CSS 基础样式&盒模型&字体图标
1. 背景
| 属性 | 描述 |
|---|---|
| background | 简写属性，作用是将背景属性设置在一个声明中 |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动 |
| background-color | 设置元素的背景颜色 |
| background-image | 把图像设置为背景 |
| background-position | 设置背景图像的起始位置 |
| background-repeat | 设置背景图像是否及如何重复 |
| background-size | 设置背景的大小(兼容性) |
-
background-position（默认针对左上角进行偏移）
- x y （ x 为10px ，相当于往右偏移10px；y 为10px，相当于向下偏移10px）
- x% y% (是设置偏移的百分比）
- [top | center | bottom] [left | center | right]
-
background-repeat
- no-repeat：背景图片在规定位置
- repeat-x：图片横向重复
- repeat-y：图片纵向重复
- repeat：全部重复
-
background-size
- 100px 100px
- contain （正好放入容器，等比缩放）
- cover （高度正好放入容器，长度多的会溢出）
background 写法：
background-color: #F00;
background-image: url(background.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;
可以缩写为：
background: #f00 url(background.gif) no-repeat fixed 0 0;
2. CSS Sprite（精灵图/雪碧图）
- 指将不同的图片/图标合并在一张图上。
- 使用CSS Sprite 可以减少网络请求，提高网页加载性能。
3. 隐藏 or 透明
- opacity: 0 ; 透明度为0，整体
- visibility: hidden ; 和opacity:0 类似
（ hidden 这个元素看不见，但本身是存在的，有位置的） - display:none; 消失，不占用位置
- background-color: rgba(0，0，0，0.2) 只是背景色透明
（只针对背景色）
4. inline-block
- 既呈现 inline 特性 (不占据一整行，宽度由内容宽度决定)
- 又呈现 block 特性 (可设置宽高，内外边距)
- 缝隙问题
5. line-height
- line-height: 2
（本身文字行高的 2倍 ） - line-height: 100%
（父元素文字行高的 100% ） - height = line-heihgt 来垂直居中单行文本
6. 盒模型
- 标准盒模型
- IE 盒模型
两者区别：
W3C标准中padding、border所占的空间不在width、height范围内，大家俗称的IE的盒模型width包括content尺寸＋padding＋border
-
ie678 怪异模式（不添加 doctype）使用 ie 盒模型，宽度=边框+padding+内容宽度
image -
chrome， ie9+, ie678 (添加 doctype) 使用标准盒模型， 宽度 = 内容宽度
image
7. 使用 CSS3 新样式 box-sizing
box-sizing: content-box：w3c标准盒模型的效果
-
box-sizing: border-box：“IE盒模型”的效果
<div style="height:200px;width:200px;border:solid 10px #333;padding:100px;box-sizing: border-box;">
</div>
8. 如何使用字体图标
方法一：利用 iconfont 使用字体图标
- 在页面内容中放入该图标的 Unicode 码（可以自己创建一个) ；
- 让该元素使用我们自定义的字体；
- 字体对应着我们创建的字体库文件；
- 字体库文件里有关于 Unicode 码的外形描述。
具体操作方法：
- 打开 iconfont.cn，搜索需要的图标添加入库
- 添加入库后打开购物车，把图标添加至项目（若没有项目则新建一个）
- 选择 Unicode ，复制图标的 Unicode 码放入页面内容中
- 生成代码并复制完整 css 代码引入页面中（@font-face .... .css）
- 像设置字体一样在 CSS 中加入
font-family:'字体名称';，然后就可以给该图标添加和文字一样的样式了
方法二：利用 iconfont 的 Font class 使用字体图标
打开 iconfont.cn，搜索需要的图标添加入库
添加入库后打开购物车，把图标添加至项目（若没有项目则新建一个）
选择 Unicode 旁的 Font class
编辑修改图标名称（英文小写）
更新代码并复制，使用
<link>引入-
body 内容中设置 class 为
<span class="iconfont icon-moon"></span>
iconfont为网站默认设置的 font-family 名称
icon-moon中的 moon 为我们修改的图标名称
方法三：利用 Font Awesome 使用字体图标
打开 bootcdn.cn
搜索 font ，点开 font-awesome 即可看到“.css” 链接
复制
<link>标签引入页面打开 fontawesome.io，打开菜单栏的 icons 找到所需的 icon
-
class 写 icon 的名称
<span class="fa fa-user-circle"></span>
fa为网站默认设置的 font-family 名称
fa-user-circle中的 user-circle 为我们修改的图标名称
在 HTML 中，Unicode 码为 “&#x”e693 ，在 CSS 中为 “\”e693 。
