CSS基础理解（二）
一、 em、rem、vm、vw 分别如何计算尺寸的？
em：相对于父元素的font-size属性值来计算的，如果父元素为14px，那么2em=28px；
rem：相对于根元素<html>的font-size属性值来计算的，一般浏览器默认字体大小为16px，那么2rem=32px；
vh和vw相对于视口的高度和宽度，1vh 等于1%的视口高度，1vw 等于1%视口宽度
二、 颜色相关属性
- 颜色的几种写法
- 颜色关键字（color: white;）；
- 十六进制（background-color: #e0b0ff;）；
- rgb(224, 176, 255)；
//rgb分别表示red green blue比例 - hsl(276, 100%, 85%)；
H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%
- 透明色表示
注：设置透明色只针对背景颜色生效，对文本及其他元素效果并不生效。
-
background-color:transparent完全透明 -
rgba(255,255,255,0.5)a表示Alpha透明度 -
hsla(276, 100%, 85%,0.5)；a表示Alpha透明度
- 透明效果的实现
-
opacity规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
<html>
<head>
<style>
div
{
background-color:red;
opacity:0.5;
}
</style>
</head>
<body>
<div>本元素的不透明度是 0.5。请注意，文本和背景色都受到不透明级别的影响。</div>
</body>
</html>
image.png
-
color: transparent
不建议使用该方法
- currentColor属性
currentColor关键字代表原始的 color 属性的计算值。
它允许让继承自属性或子元素的属性颜色属性以默认值不再继承。
它也能用于那些继承了元素的 color 属性计算值的属性，相当于在这些元素上使用 inherit 关键字，如果这些元素有该关键字的话。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<div style="color:darkred">
The color of this text is the same as the one of the line:
<div style="background:currentcolor; height:1px"></div>
Some more text.
</div>
</body>
</html>
image.png
三、calc元素
calc()是css3的一个新增的功能，用来指定元素的动态长度。
calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。
calc()的运算规则
calc()使用通用的数学运算规则，但是也提供更智能的功能：
- 使用“+”、“-”、“*” 和 “/”四则运算；
- 可以使用百分比、px、em、rem等单位；
- 可以混合使用各种单位进行计算；
- 表达式中有“+”和“-”时，其前后必须要有空格，如"width: calc(12%-5em)"这种没有空格的写法是错误的，浏览器会认为是一个无效的表达式，解析成为一个长度后跟一个加号再跟一个负百分比。
- 表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。
四、CSS选择器权重
- 权重决定了哪一条规则会被浏览器应用在元素上。
- 权重的不同，是你所期望的效果，没有通过css规则在元素上生效的主要原因。
- 权重的级别划分时包含了所有的css选择器
- 如果两个选择器作用在同一元素上，则权重高者生效。
- 权重的级别根据选择器被划分为四个分类：行内样式，id，类与属性，以及元素。
- 如果两个选择器权重值相同，则最后定义的规则被计算到权重中(后面定度的CSS规则权重要更大，会取代前面的CSS规则)
- 如果两个选择器权重值不同，则权重大的规则被计算到权重中
- 如果一条规则包含了更高权重的选择器，那么这个规则权重更高
- 最后定义的规则会覆盖所有跟前面冲突的规则
- 内联样式表含有比别的规则更高的权重
- Id选择器的权重比属性选择器更高
- 你可以使用id来增大权重
- 类选择器比任意数量的元素选择器都高
- 通配符选择器跟继承来的样式，他们的权重以 0，0，0，0来计算
- 你可以用css权重计算器来计算权重。
| 分数 | 条件 |
|---|---|
| 1000 | + 1 / 在 style 属性内或在 <style>标签内 |
| 100 | + 1 / 每个出现的 ID 选择器 |
| 10 | + 1 / 每个出现的 类，伪类或 属性选择器 |
| 1 | + 1 / 每个元素选择器或伪元素 |
| 选择器 | 1000 | 100 | 10 | 1 | 总分 |
|---|---|---|---|---|---|
| body | 0 | 0 | 0 | 1 | 1 |
| #flash | 0 | 1 | 0 | 0 | 100 |
| h1 + p::after | 0 | 0 | 0 | 3 | 3 |
| li > a[download] > .warning | 0 | 0 | 2 | 2 | 22 |
| #notice a:hover 在 <style> 里 | 1 | 1 | 1 | 1 | 1111 |
五、盒模型
盒模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
不同部分的说明：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
在标准模式下最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
六、浏览器默认样式
当对网页标签不设置属性时，浏览器对某些元素设置有默认样式。
常见的例如：p、h1、ul、div都是block显示。
所以建议在制作网页时对常用元素进行reset样式声明，减少默认样式有可能带来的问题。
七、 display属性
这个属性用于定义建立布局时元素生成的显示框类型。
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。（CSS2.1 新增的值） |
| list-item | 此元素会作为列表显示。 |
| run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
| compact | CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
| marker | CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
| table | 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 |
| inline-table | 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。 |
| table-row-group | 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。 |
| table-header-group | 此元素会作为一个或多个行的分组来显示（类似 <thead>）。 |
| table-footer-group | 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。 |
| table-row | 此元素会作为一个表格行显示（类似 <tr>）。 |
| table-column-group | 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。 |
| table-column | 此元素会作为一个单元格列显示（类似 <col>） |
| table-cell | 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） |
| table-caption | 此元素会作为一个表格标题显示（类似 <caption>） |
| inherit | 规定应该从父元素继承 display 属性的值。 |
八、 块级元素和行内元素
块元素：div h1 h2 h3 h4 h5 h6 p hr form ul dl ol pre table li dd dt tr td th
行内元素：em strong span a br img button input label select textarea (包含inline-block元素)
特点：
- 块级元素可以包含文本，块级、行内元素，而行内元素只能包含文本和行内元素
- 块级元素单独占据一整行，行内元素占据的位置只有自身文本宽度的空间
- 块级元素可以设置宽高，行内元素设置宽高无效
- 块级元素的padding，margin值设置有效，行内元素padding，margin上下的值设置无效，但左右有效(虽然表面上看起来变了，但是没有影响到其他元素，换言之，其他元素认为它的大小没变，因此其他元素不会因为他看起来大了，就改变自己的位置)
九、 box-sizing属性
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
取值：
content-box(默认值)：
padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )
content-box
此属性表现为标准模式下的盒模型。
border-box：
padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )
border-box
此属性表现为怪异模式下的盒模型。
十、inline-block
前面提到display属性可取值为inline-block，表示元素以行内块级元素方式展现。
当元素设置display:inline-block时会发现一个问题，即元素之间会出现缝隙，例下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<span>aaa</span>
<span>bbb</span>
<span>ccc</span>
</body>
</html>
span {
display: inline-block;
background-color: red;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
}
image.png
解决方式
- 元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就没有了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<span>aaa</span><span>
bbb</span><span>
ccc</span>
</body>
</html>
- 使用font-size:0 （推荐）
针对父元素设置font-size为0，子元素重新声明正确font-size 。这个方法，基本上可以解决大部分浏览器下inline-block元素之间的间距。
body {
font-size: 0px;
}
span {
display: inline-block;
background-color: red;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 16px;
}
- 使用letter-spacing/word-spacing
一个是字符间距(letter-spacing)一个是单词间距(word-spacing)，大同小异。有一定兼容性问题，有兴趣的可以自己测试。
body {
letter-spacing: -0.31em;
}
span {
display: inline-block;
background-color: red;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
letter-spacing: 0;
}
