#02你认真学了css（（基本样式2）） #02你认真学了css？（基本样式

一、背景

属性	描述
background	简写属性，将背景属性设置在一个生命中
background-attachment	背景图像是否固定或者随着页面的其余部分滚动
background-color	可设置元素的背景颜色
background-image	可把图像设置为背景
background-position	设置背景图像的起始位置（常用于图标在页面上的设置）
background-repeat	设置背景图像是否重复，以及如何重复
background-size	设置背景的大小（兼容性）（css3）

1、background-position ：默认图片主要从左上角方向偏移

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

2、background-repeat：背景图像是否重复或如何重复

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

3、background-size：背景图片大小的设置，用来拉伸、缩放

100px 100px
contain
cover

4、关于background相关元素的属性，
代码：

/*背景色和背景图片使用场景 */ 场景1：两元素适用于页面大、背景图片小场景2：背景图为```.png```格式的图片*/```background-color: #f00; ``` ``` background-image:url(background.gif); ``````background-repeat: no-repeat; ``` ``` background-attachment: fixed; ``` ``` background-position: 0 0; ``` /*背景位置与页面窗口的宽、高成正相关*/

可缩写为一句：

background: #f00url(background.gif)no-repeatfixed0 0;

如图：

文章图片
background-size：contain；

文章图片
background-size：cover；

文章图片
display：inline-block

文章图片
display：block

注：使用background-color和background-image，需要注意：
（1）将该页面撑开
（2）注意background-size使用

二、CSS Sprite 1、俗称“雪碧图”或“精灵图”指将不同的图片、图标合并在一张图上。 2、作用：使用CSS Sprite 可以减少网络请求（如每一张小icon图片都会产生加载时间），提高网页加载性能。 3、使用：利用background-position，对图标进行位置偏移三、隐藏or透明

opacity: 0;：透明度为0，整体（透明度0-1，0.5为半透明）
visibility: hidden;: 即元素看不见，但存在。和opacity：0；类似
display：none；: 消失，不占位置（页面上渲染的其他元素都察觉不到）
background-color：rgba（0，0，0，0.2） 只是背景色透明

四、inline-block 1、定义：
既呈现inline特性（不占据一整行，宽度由内容宽度决定），又呈现block特性（可设置宽高，内外边距）
注：

display:block;

的布局下，块级元素的宽度是一个可忽视的问题

文章图片
1

文章图片
2

文章图片
3 2、缝隙问题：
如图：

文章图片
image 3、行内元素对齐问题：
如图：
在inline-block的布局下，可以看成文字对齐。默认情况下，行内元素对齐是以里面内容的底部为基线对齐（至少两个元素进行对比），其他则设置vertical-align：top(bottom、middle)等）进行基线对齐（在表格中使用尤为明显）

文章图片
image
五、line-height 1、定义：
用于设置单行文本的行高。
2、几个问题：
（1）了解line-height和margin、padding在使用上的一个区别

line-height: 2，所占据的行高是本身文字高度的2倍。
margin是外边距，
padding则是内边距

文章图片
image

（2）line-height的用法，数字和百分比的区别

line-height：2VS line-height： 100%
line-height具有继承性。

文章图片
image

line-height: 2，所占据的行高是本身文字高度的2倍。想要页面每个元素都拥有几倍的行高，则设置为数字。
line-height: 200% ，是其父元素文字高度的2倍。（注：百分比有一定的相对性，如本身无设置和设置百分比，便可看出差别）

文章图片
image

3、height=line-heihgt
设置垂直居中单行文本，如图：

文章图片
image 六、盒模型 1、IE 盒模型
IE 盒模型的width包括：content尺寸+padding+border

文章图片
image
（如IE678怪异模式，不添加doctype，使用ie盒模型，宽度=边框+padding+内容宽度），如图：

文章图片
image
2、W3C标准下的盒模型
W3C标准下的盒模型padding、border所占的空间不在width、height范围内，content宽度即是width

文章图片
image
（如chrome，ie9+,ie678，添加doctype，使用标准盒模型，宽度=内容宽度），如图：

文章图片
image
3、box-sizing（css3新样式）
【#02你认真学了css（（基本样式2））】为了使用方便，可以用IE盒模型计算宽度的方法，将width=border+padding+内容宽度
A、W3C标准的盒模型：box-sizing： content-box
B、IE盒模型：box-sizing：border-box

七、字体图标的实现 1、字体图标的原理：
当你写完带有字体的html文件时，在浏览器打开页面时，浏览器会读取 HTML 文件进行解析渲染。当读到「饥饿」两个字时会转换成对应的 unicode码（一种识别字体的特定编号）。再根据HTML 里设置的font-family（如果没设置则使用浏览器默认设置）去查找电脑里（如果有自定义字体@font-face ，则加载对应字体文件）对应字体的字体文件。找到文件后根据 unicode 码去查找绘制外形，找到后绘制到页面上。所以对于第二个范例， 「⛭」是「饥」的 unicede 码，所以用户最终也能看到serf字体样式的「饥」字。
2、实现步骤：
第一步：
进入Iconfont-阿里巴巴矢量图标库——选一个喜欢的图标——添加至购物车——添加至项目——复制Unicode码
第二步：
进入代码——并未展示图标（说明系统中没有能体现字体图标的该Unicode码，浏览器也未能识别Unicode码）——复制该图标自动生成的css代码（用@font-face来定义一个字体，该字体名可以随便取，这里为：XXX）——定义该字体图标，并设置它css样式如font-family：XXX；等样式

JS Bin - 锐客网 @font-face { font-family: 'iconfont'; /* project id 645342*/ src: url('//at.alicdn.com/t/font_645342_wae7ml0d77am7vi.eot'); src: url('//at.alicdn.com/t/font_645342_wae7ml0d77am7vi.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_645342_wae7ml0d77am7vi.woff') format('woff'), url('//at.alicdn.com/t/font_645342_wae7ml0d77am7vi.ttf') format('truetype'), url('//at.alicdn.com/t/font_645342_wae7ml0d77am7vi.svg#iconfont') format('svg'); }p{ font-family:iconfont; font-size: 40px; }

让一个元素"看不见"有几种方式？有什么区别?
1、