CSS基础样式&盒模型&字体图标(8)

饥人谷学习第8天

CSS常见样式

背景

• background 简写属性，作用是将背景属性设置在一个声明中；
• background-attachment 背景图像是否固定或者随着页面的其余部分滚动
• background-color 设置元素的背景颜色
• background-image 把图像设置为背景
• background-position 设置背景图像的起始位置

默认对左上角进行偏移

• x y
• x% y%
• [top | center | bottom] [left | center | right]

• background-repeat 设置背景图像是否及如何重复

• no-repeat: 背景图片在规定位置
• repeat-x : 图片横向重复
• repeat-y : 图片纵向重复
• repeat : 全部重复

• background-size 设置背景的大小（兼容性）

• 100px 100px
• contain 图片等比缩放，把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
• cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。超出部分隐藏（背景图像的某些部分也许无法显示在背景定位区域中。）

CSS Sprite

• 指将不同的图片/图标合并在一张图上；
• 使用CSS Sprite 可以减少网络请求，提高网页加载性能。

隐藏or透明

• opacity：0; 透明度为0，整体
• visibility：hidden；和opacity：0；类似，元素存在
• display：none；消失，不占用位置
• background-color：rgba(0,0,0,0.2)只是背景色透明

inline-block

• 既呈现 inline 特性（不占据一整行，宽度由内容宽度决定）
• 又呈现 block 特性（可设置宽高，内外边距）
• 缝隙问题
  1.HTML标签挤到一起消除缝隙；
  2.给父元素设置font-size:0px;子元素重新配置字体大小消除缝隙；
  3.去掉行内元素底线对齐，设置vertical-align(与行内表格元素等绑定到一起的)：top/bottom/middle

inline-block的讲解：
https://www.cnblogs.com/Ry-yuan/p/6848197.html

line-height

设置单行文本的行高（可继承）

• line-height:2 本身文字高度的2倍
• line-height:100% 父元素文字高度的百分比
• height = line-height 来垂直居中单行文本

盒模型

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

1535965813125465.png 1535965819267659.png

使用CSS3新样式box-sizing
1.box-sizing: content-box ：W3C标准盒模型
宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框（元素默认效果）
2.box-sizing: border-box : “IE盒模型”
元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度
3.inherit
规定应从父元素继承 box-sizing 属性的值

ICON实现 网页中的图标

• image

注意事项
1.img的大小设置
2.img的 vertical-align
3.请求数过多

• CSS Sprites

1.用命令行：sprity create build resource/*.png -s style.css
2.用在线工具
缺点：
1.无法缩放
2.不好修改

• Icon Font
  把字体做成图标

1.制作字体文件
2.声明 font-family

• 使用本地链接
• 使用第三方链接

3.使用 font-family

• 使用 html 实体 &#x****
• 使用 CSS：before \****

• CSS Icon
  用CSS画
  cssicon.space/
• SVG

1.img src = svg
2.SVG "sprites"