一、背景
| 属性 | 描述 |
|---|---|
| background | 简写属性，将背景属性设置在一个生命中 |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动 |
| background-color | 可设置元素的背景颜色 |
| background-image | 可把图像设置为背景 |
| background-position | 设置背景图像的起始位置（常用于图标在页面上的设置） |
| background-repeat | 设置背景图像是否重复，以及如何重复 |
| background-size | 设置背景的大小（兼容性）（css3） |
1、background-position ：默认图片主要从左上角方向偏移
x yx% y%[top | center | bottom] [left | center | right]
2、background-repeat：背景图像是否重复或如何重复
-
no-repeat：背景图片在规定位置 -
repeat-x：图片横向重复 -
repeat-y：图片纵向重复 -
repeat：全部重复
3、background-size：背景图片大小的设置，用来拉伸、缩放
100px 100pxcontaincover
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: #f00 url(background.gif) no-repeat fixed 0 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：2VSline-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新样式）
为了使用方便，可以用IE盒模型计算宽度的方法，将width=border+padding+内容宽度
A、W3C标准的盒模型：box-sizing： content-box
B、IE盒模型：box-sizing：border-box
<div style="height:200px; width:200px; border:solid 10px #333; padding:100px>
</div>
七、字体图标的实现
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；等样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style> @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;
}
</style>
</head>
<body>
<p></p>
</body>
</html>
让一个元素"看不见"有几种方式？有什么区别?
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; }
网友评论