CSS基础-2

background属性

background属性负责给盒子设置背景图和背景色；
1. background-color：设置背景色，background-color: transparent; -->设置透明色
2. background-image：设置背景图，background-image: url(img/icon.png);
    1. background-image通常用于插入装饰性图片，<img />用于插入内容图片；
    2. background是CSS属性，爬虫不容易爬取，而<img />是HTML标签，更容易被爬取。
3. background-repeat：设置背景图的重复平铺方式，默认值repeat(重复平铺，填充整个盒子)
    2. repeat-x/repeat-y：只在水平/垂直方向上重复平铺；
    3. no-repeat：不重复平铺，只填充一次；
    4. space：与repeat不同，图片之间可能有间距，以保证图片的完整性；
    5. round：与space不同，图片会拉伸，填充图片之间的间距。
4. background-position：设置背景图的位置，支持负数和百分比，配合background-repeat
    1. 同时设置两个值(x, y)，分别表示在水平方向和垂直方向上的位移；
    2. 默认值为0% 0%，盒子的左上角，等效于：left top，top left，0px 0px
    3. 可使用关键字：left、right(水平方向)，top、bottom(垂直方向)，center(居中显示)
    4. left/right并不是在盒子的左/右上角，而是垂直居中，同理，top/bottom是水平居中；
    5. 百分比的参照尺寸：背景图所在区域的大小减去背景图自身的大小。
5. background-attachment：决定背景图是在视口中固定的，还是随包含它的区域滚动；
    1. 默认值scroll，背景图相对于元素本身固定，元素带有滚动条时，不会随着它的内容滚动；
    2. fixed：背景图相对于视口固定，元素随父级滚动条滚动时，背景图不动。
background是一个复合属性，可以合并设置：background:color image position repeat;

CSS的样式重置

1. 去除标签默认的margin和padding：*{ margin: 0px; padding: 0px; }
2. font-size、font-family、color等属性具有继承性，可以定义在body标签中；
3. 相关的插件：reset.css、Normalize.css
    1. reset.css属于传统的样式重置，而Normalize.css只是一个很小的CSS文件，更加现代化
    2. Normalize.css保护了有价值的默认值，修复了浏览器的Bug，模块化结构
    3. Normalize.css同时支持移动端和PC端在内的超多浏览器，兼容性更好。

字体相关

1. font-size：可继承，Chrome的默认值为16px，最小值为12px，常用单位有px、em、百分比
    1. em：1em等于其父元素的字体大小；
    2. 百分比：参照父元素的字体大小；
    3. 字体大小设置为小于12px，Chrome仍按照12px渲染，但设置为0时，则按照0px渲染。
2. font-style：可继承，默认值normal，可选值italic(斜体字体)、oblique(让当前字体倾斜)
3. font-weight：可继承，指定字体的粗细程度，默认值normal(400)，加粗bold(700)
    1. 设计比较好的字体，粗细程度会划分为9个等级：100-900
    2. 回退机制：有些字体只提供两种粗细风格，100-500渲染为normal，600-900渲染为bold
4. font-family：指定字体，可以同时指定多种字体，优先使用靠前的字体；
    1. font-family: 'arial','微软雅黑'; -->如果都不支持，则使用浏览器的默认字体；
    2. 字体分为5大类：serif(衬线字体)，sans-serif(非衬线)，monospace(等宽字体)...
    3. 使用一个字体族时，浏览器会自动选择其小分类的字体，但不同浏览器选择的不一样。
5. 简写属性的默认值问题：font: style weight size/line-height family
    #box { line-height:20px; font:20px 'arial'; } --> line-height是无效的
    1. font是简写属性，如果没有显式设置，也会有默认值，会覆盖掉之前的line-height
    2. 正确写法：#box {  font:20px 'arial'; line-height:20px; }

文本相关

文本相关属性：color、text-align、text-indent、text-decoration、letter-spacing、word-spacing、white-space

行高

行高的四线：顶线、中线、基线、底线

三线.jpg

行高：指上下文本行的的基线间的垂直距离。
行距：指一行的底线到下一行顶线的垂直距离。
字体的size = 区域1 + 区域2 + 区域4
半行距 = 行距/2 = (行高-字体size)/2

内容区：顶线和底线包裹的区域。

文本行中的每个元素都会生成一个内容区，由字体大小font-size确定。这个内容区则会生成一个行内框，如果不存在其他因素，这个行内框就完全等于该元素的内容区。
由 line-height 产生的行间距就是增加和减少各行内框高度的因素之一，但它不会影响内容区的计算。

行内框：是一个浏览器渲染模型中的概念，无法显示出来，行内框默认等于内容区域。

将 line-height 的计算值减去 font-size 的计算值，得到的结果就是总行距（行间距），这个值可能是负数。行间距/2 分别应用到内容区的顶部和底部，其结果就是该元素的行内框。当然，浏览器内部的渲染要复杂的多。

行框：line-box，指本行的一个虚拟矩形框，是浏览器渲染模式中的一个概念，并没有实际显示。默认情况下，行框高度等于本行内所有元素中行内框最大的值。

一行上垂直对齐时，以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度；
当有多行内容时，每行都会有自己的行框。

1. 使用默认行高，即不设置line-height，设置字体大小font-size=30px

<div style="background-color:deeppink;">
    <span style="font-size:30px;background-color:pink;">
        中文English中文English
    </span>
</div>

demo1.jpg

通过测量可知：渲染后的 div 的高度为 40px，而 div 的高度是由行内元素 span 撑起来的，准确的说是由span的行框撑起来的！
浏览器在渲染文本时，默认会在文本的顶部和底部增加一段空间，使得内容区的垂直高度要比设置的font-size大一些。此时的垂直高度关系为：内容区 = 行内框 = 行框。

2. 设置line-height <= font-size

<div style="background-color:deeppink;">
    <span style="font-size:30px;background-color:pink;line-height:30px;">
        中文English中文English
    </span>
</div>

demo2.jpg

设置line-height <= font-size时，内容区的高度不会收到line-height的影响，但行内框和行框的高度会收到影响，因此 div 的高度小于 span 的高度，且多余的部分并不是上下等分的！

3. 设置line-height > font-size

demo3.jpg

内容区不受line-height的影响，行内框和行框的高度大于内容区的高度，且内容区在行框内上下居中！

line-height
line-height 是可继承的，它的值可以是像素、百分比、因子。

<div style="font-size:30px;line-height:1;">
    <div style="font-size:20px;">中文English中文English</div>
</div>

1. 设置为像素和因子时，行高是直接继承的。对于因子，继承之后再与自身的font-size相乘，计算出真实的像素值：1 x 20px = 20px。
2. 设置为百分比时，子元素继承的是计算后的像素值！line-height:100%; --> 100% x 30px = 30px。

正因如此，通常会全局设置 body{ line-height: 1; } ，从而确保每一块布局都是紧挨着的，不会因为默认行高问题产生间距。而对于大文本，通常设置p,span{ line-height: 1.5; }，各行文本的行高为字体大小的1.5倍时，最具美感。

文本的其他属性

1. color：在浏览器开发者模式下，Shift + 鼠标左键 可以切换颜色的格式。
2. text-align：控制文本的居中显示，对内联元素和内联块元素也是有效的。

   <div style="text-align:center;">
       <span>中文English</span>
   </div>
   注：如果对<span>做了浮动等操作，则text-align无效。因为浮动元素有自己的盒模型。
   

3. text-indent：首行缩进。如text-indent:2em; 表示首行缩进2个字符。
4. letter-spacing：设置每个字符的间距。
5. word-spacing：设置每个单词的间距，以空格符作为单词的依据。
6. white-space：控制文本是否换行，中文默认自动换行，而单个英文单词是不会换行的。
   • nowrap：不换行。
   • 常用于溢出显示省略号

   .wrap {
       white-space:nowrap;
       overflow:hidden;
       text-overflow:ellipsis;
   }
   

vertical-align

vertical-align：指定内联块元素在垂直方向的位置，但对块元素/浮动/定位元素都是无效的；

1. 应用场景：让图片<img />或<input />这种内联块元素在父元素内垂直水平居中

<div id="wrap">
    <img src="img/img2.jpg" width="150px" />
</div>

#wrap {
    width:400px;
    height:400px;
    border:1px solid red;
}
#wrap:after {
    content:"";
    display:inline-block; --> 把伪元素转为内联块
    height:100%;
    width:0px;
    vertical-align:middle; -->垂直居中，作为参考基线
}
#wrap img {
    vertical-align:middle; -->图片水平垂直居中
}

2. <img />会参考伪元素，实现水平居中，在使用vertical-align实现垂直居中；
3. 图片和文字排列在一行时，默认它们的基线对齐，要让文字与图片的中间对齐：

img {
  vertical-align: middle;
}
<span>文字文字文字</span>
<img src="..." />
<span>文字文字文字</span>

水平垂直居中

水平居中：margin: auto; 浏览器渲染时仍解析为margin:0 auto; 浮动/定位时auto失效；
CSS2.1的标准没有直接垂直居中的属性，所以只能间接实现盒子的垂直居中；

<div id="wrap">
  <div id="inner">Test</div>
</div>
#wrap {
   width:400px;
   height:600px;
   position:relative;
}

1. 已知高度的盒子

• 绝对定位 + margin负值的实现方案：

#inner {
   width:100px;
   height:100px;
   position:absolute;
   left:50%;
   top:50%;
   margin-left:-50px;
   margin-top:-50px;
}

• 绝对定位 + margin:auto的实现方案：

#inner {
    width:100px;
    height:100px;
    position:absolute;
    left:0;
    top:0; 
    right:0;
    bottom:0;
    margin:auto;
}

• 绝对定位的盒子特性：
  水平方向：left+right+width+padding+margin=包含块padding区域的尺寸
垂直方向：top+bottom+height+padding+margin=包含块padding区域的尺寸
• 对于绝对定位的盒子模型，浏览器不会把margin:auto解析为margin:0 auto

2. 未知高度的盒子：涉及CSS3的属性，兼容性较差

#inner {
    position:absolute;
    left:50%;
    top:50%; 
    transform:translate3d(-50%, -50%, 0); -->CSS3的新增属性，以自身为参照(x,y,z)
}