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. 盒模型

1. 标准盒模型

![](//upload-images.jianshu.io/upload_images/3624093-0c3462615ccf112f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/746/format/webp)

2. IE 盒模型

![](//upload-images.jianshu.io/upload_images/3624093-31e482f19507c6d4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/791/format/webp)

两者区别：
W3C标准中padding、border所占的空间不在width、height范围内，大家俗称的IE的盒模型width包括content尺寸＋padding＋border

• ie678 怪异模式（不添加 doctype）使用 ie 盒模型，宽度=边框+padding+内容宽度

• chrome， ie9+, ie678 (添加 doctype) 使用标准盒模型， 宽度 = 内容宽度

7. 使用 CSS3 新样式 box-sizing

• box-sizing: content-box：w3c标准盒模型的效果

• box-sizing: border-box：“IE盒模型”的效果

  
  

8. 如何使用字体图标

方法一：利用 iconfont 使用字体图标

1. 在页面内容中放入该图标的 Unicode 码（可以自己创建一个) ；
2. 让该元素使用我们自定义的字体；
3. 字体对应着我们创建的字体库文件；
4. 字体库文件里有关于 Unicode 码的外形描述。

具体操作方法：

1. 打开 iconfont.cn，搜索需要的图标添加入库
2. 添加入库后打开购物车，把图标添加至项目（若没有项目则新建一个）
3. 选择 Unicode ，复制图标的 Unicode 码放入页面内容中
4. 生成代码并复制完整 css 代码引入页面中（@font-face .... .css）
5. 像设置字体一样在 CSS 中加入 font-family:'字体名称';，然后就可以给该图标添加和文字一样的样式了

方法二：利用 iconfont 的 Font class 使用字体图标

1. 打开 iconfont.cn，搜索需要的图标添加入库

2. 添加入库后打开购物车，把图标添加至项目（若没有项目则新建一个）

3. 选择 Unicode 旁的 Font class

4. 编辑修改图标名称（英文小写）

5. 更新代码并复制，使用 引入

6. body 内容中设置 class 为

iconfont 为网站默认设置的 font-family 名称
icon-moon 中的 moon 为我们修改的图标名称

方法三：利用 Font Awesome 使用字体图标

1. 打开 bootcdn.cn

2. 搜索 font ，点开 font-awesome 即可看到“.css” 链接

3. 复制 标签引入页面

4. 打开 fontawesome.io，打开菜单栏的 icons 找到所需的 icon

5. class 写 icon 的名称

fa 为网站默认设置的 font-family 名称
fa-user-circle 中的 user-circle 为我们修改的图标名称

在 HTML 中，Unicode 码为 “&#x”e693 ，在 CSS 中为 “\”e693 。