#02你认真学了css（（基本样式2））
一、背景
| 属性 | 描述 |
|---|---|
| background | 简写属性，将背景属性设置在一个生命中 |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动 |
| background-color | 可设置元素的背景颜色 |
| background-image | 可把图像设置为背景 |
| background-position | 设置背景图像的起始位置（常用于图标在页面上的设置） |
| background-repeat | 设置背景图像是否重复，以及如何重复 |
| background-size | 设置背景的大小（兼容性）（css3） |
background-position ：默认图片主要从左上角方向偏移x yx% y%[top | center | bottom] [left | center | right]
background-repeat：背景图像是否重复或如何重复-
no-repeat：背景图片在规定位置 -
repeat-x：图片横向重复 -
repeat-y：图片纵向重复 -
repeat：全部重复
background-size：背景图片大小的设置，用来拉伸、缩放100px 100pxcontaincover
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
注：使用二、CSS Sprite 1、俗称“雪碧图”或“精灵图”指将不同的图片、图标合并在一张图上。 2、作用：使用CSS Sprite 可以减少网络请求（如每一张小icon图片都会产生加载时间），提高网页加载性能。 3、使用：利用background-color和background-image，需要注意：
（1）将该页面撑开
（2）注意background-size使用
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
line-height的用法，数字和百分比的区别line-height：2VSline-height： 100%
line-height具有继承性。
文章图片
image
-
line-height: 2，所占据的行高是本身文字高度的2倍。想要页面每个元素都拥有几倍的行高，则设置为数字。 -
line-height: 200%，是其父元素文字高度的2倍。（注：百分比有一定的相对性，如本身无设置和设置百分比，便可看出差别）
文章图片
image
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-boxB、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、
display: none;
给元素设置
display: none;
后，元素会从页面中彻底消失，它原本占据的空间会被其他元素占有，会造成浏览器的回流与重绘。2、
visibility: hidden;
给元素设置
visibility: hidden;
后，元素会从页面中消失，它原本占据的空间会被保留，会造成浏览器的重绘，适用于希望元素隐藏又不影响页面布局的场景。3、
opacity: 0;
给元素设置
opacity: 0;
后，元素变成透明的我们肉眼就看不到了，所以原本占据的空间还在。4、设置盒模型属性为0
将
height、width、padding、border、margin等盒模型属性的值全设为0，如果元素內还有子元素或内容，还应overflow: hidden;
来隐藏子元素。.box1{width: 0;
height: 0;
padding: 0;
border: 0;
margin: 0;
overflow: hidden;
}
5、设置元素绝对定位与
top、right、bottom、left等将元素移出屏幕，如：
.box1{position: absolute;
left: 100%;
}或:
.box1{position: absolute;
top: 100px;
}
6、设置元素的绝对定位与
z-index，将z-index设置成尽量小的负数。但
z-index是相对而言的 ，用z-index就要设置其他元素的z-index值，且如果元素本身占据空间很大就不一定会被z-index值比它大的元素完全覆盖，所以不推荐这种方法。 如：.box1{position: absolute;
z-index: -100;
}.box2{position: absolute;
z-index: 1;
}
推荐阅读
- 热闹中的孤独
- 放屁有这三个特征的，请注意啦！这说明你的身体毒素太多
- 尽力
- 你到家了吗
- 爱就是希望你好好活着
- 为什么你的路演总会超时（）
- 死结。
- 跌跌撞撞奔向你|跌跌撞撞奔向你 第四章（你补英语，我补物理）
- 奔向你的城市
- 喂，你结婚我给你随了个红包