css基础样式2

本文设计到的css属性有background、inline-block、line-height

一，background

1.background-color
设置背景图片的颜色

background-color:blue;

2.background-repeat
用于控制背景图片的重复方式，主要用于背景图片面积小于背景容器的面积

• no-repeat 背景图片不重复
• repeat-x 水平方向重复
• repeat-y 垂直方向重复
• repeat 全部屏幕都重复

 background-repeat:no-repeat;

3.background-image

 background-image:url(http://js.jirengu.com/images/dave.min.svg);
//url内是图片的网络地址，可以下载图片到本地，使用图片的相对地址。如url(flower.png)

4.background-position
设置背景图的起始位置（默认的参照点是左上角）

• x，y //x的值代表从左到右偏移x，y的值代表从上到下偏移y
• X%，y% //背景图片容器的定位区域大小减去图片大小。

positionx = (容器的宽度-图片宽度)*percentx
positiony = (容器的高度-图片高度)*percenty

• [left center right] [top center bottom]

5.background-attachment
设置背景图像是否固定，是否随着页面其他部分而滚动。
参数
fixed
此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
local
此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。
scroll
此关键字表示背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）。

p {
  background-image: url("http://js.jirengu.com/images/dave.min.svg");
  /* background-attachment:scroll; */
/* background-attachment:fixed; */
  background-attachment:local;
  background-repeat:no-repeat;
  backgound-size:contain;
}
//简单来说fixed，就是相对于用户看到视图窗口固定的，其他两个参数都是可以滚动的。

详细了解，看demo链接描述

6.background-size
用于设定背景图片的大小。属性是css3的属性，IE9 以下不支持，需要注意其的兼容性。

• cover 缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。

按照容器高度来缩放背景图片。

• contain 缩放背景图片以完全装入背景区，可能背景区部分空白。，不能裁剪背景图片一分一毫

• 100px，100px 设置背景图片的宽高数值

也可以只写一个数值200px，表示为长宽最大200px。也可以设置50%，高度为容器的50%

7.简写
可以把除了background-size以外所有背景的属性放在一起写，background-size要单独拎出来写。

background: #f00 
fixed url(http://js.jirengu.com/images/dave.min.svg) 0 0 no-repeat;
background-size: 300px 300px;

demo链接描述

8.注意事项
一定要设置容器的高度，如果容器高度没有撑开，背景图片就没有办法展示。
就像行内元素，没有办法设置宽高。背景图片无法正常展示。

二，display：inline-block

1.即呈现出inline的特性（不占据一整行，宽度由内容决定）
2.又呈现出block的特性（可以设置宽高，内外边距）
3.还有缝隙问题
两个行内元素并排放时，没有设置外margin也会出现缝隙问题，因为span和span有一个空白字符。如下图

消除缝隙，有两个方法。
（1）span和span紧紧挨着

（2）设置空白字符的fontsize为0，就消除了空白字符的占用位置。
再重新设置子元素的font-size

4.两个行内元素容易会产生对不齐的状况。

代码demo链接描述
前面的盒子没有任何字符，此时它的基线就是它的底边缘，后面的盒子有文字，所以该盒子的基线就是文字的基线，二者基线对齐，现成如此效果。
inline-block的基线是正常流中最后一个line box的基线，除非这个line box里面既没有line boxes或者本身overflow属性的计算值不是visible，这种情况下基线是margin底边缘。
必须使用vertical-align: top;才能让inlineblock元素垂直方向能对齐
基线对齐的内容，比较复杂。这篇博客写的比较清楚链接描述

三，line-height

用来设置单行文本的行高
line-height深究起来特别复杂，先把方方老师的博文放上链接描述

1.line-height的使用

• line-height=2 <数字>

代表行高为本身文字高度的2倍，下面例子中.box和p的行高都是自身字体高度的两倍

• line-height=20px<长度>
• line-height=200%<百分比>

代表是父元素的字体行高的2倍。以下例子中设置line-height=2,由于浏览器的默认字体大小是16px，就相当于设置line-height=32px。由于p的字体是60px的，所以p的内容就被压缩在一起了

• 设置单行文本的height=lineheight ，就可以让单行文本垂直居中。