学习任务

1.line-height 有什么作用?

line-height 行间距
对一行文字，让它在<div>xxxx</div>里面垂直居中
line-height常用方法：

div {
    border:1px solid #ccc;
    text-align:center;
    height:80px;
    line-height:80px;}

2.如何去查 CSS 属性的兼容性？比如 inline-block 哪些浏览器支持？

使用caniuse查询浏览器兼容性

3.a 标签的href, title, target 是什么？ title 和 alt 有什么区别？如何新窗口打开链接?

href:"#" 代表当前页面
<a href:"#" target="_blank"> 在新窗口打开（ target="_blank"）
一个访未访问的链接，默认颜色是蓝色
一个访问过的链接，默认颜色是紫色
对链接设置颜色，不会识别是否访问过。
去掉链接的下划线：用text-decoration:none(去掉文本装饰)
伪类选择器，伪类是代表一种状态，而不是针对某个特别的元素
当使用多个伪类时，应遵循的顺序为：:link :visited :hover :focus :active

<a href="http://www.baidu.com">百度</a>
  a {
      color:#fff;(我是链接/饥人谷，字体白色显示)
      text-decoration:none;  (去掉下划线)
      border:1px solid #ccc;（添加灰色实线边框）
      padding:4px;
      background:#330000;（背景色深棕色）
      border-radius:3px;(边框圆角)  
      transition:color 0.3s;(变化的时候，是渐变的过程，持续时间0.3秒)
    }
  a:hover {
           color:#eee;（当光标停留在按钮，背景色以0.3秒时间渐变为灰白色）
         }
  a:active {
            background:blue;（当点击按钮，背景色以蓝色显示）
           }

a链接做成按钮，添加伪类后

当对div进行css样式设定时，a标签不会生效，想要a标签生效需要单独对其添加样式（a标签字体大小会继承，css样式不会被继承）
.div a是后代选择器（结合了类选择器），选择器一端用两个以上空格分隔。解释为：a作为div1的一部分；a在div1中找到；a作为div1的后代。

<div class="div1">div1 
    <p class="2"> 我是段落2</p>
    <a href="#">我是链接</a>
</div>

<style>
    .div1 {
           color:red;
         }
    .div1  a {
              color:yellow;
            } 
</style>

跳转到锚点
点击a链接会跳到p标签here处

<a href=''#here''>我是链接</a>
<div class ="div2">
</div>
<p id="here">ddddddd</p>

在新窗口打开
特性值：target="_blank"

<a href="tips" target="_blank">hunger</a>
...
<p id="tips">点击链接跳转到这里</p>

表格

border-collapse:collapse 边框重叠，折叠后边框变为单线

表格.png

表格html.png

对table设置width，表格的宽度为固定宽度，不随内边距变化而变化；对th、td应用内边距，单元格的内容区会变小

表格css

审查元素-内容区变小

对表格应用:hover，改变光标移动的背景

display:table-cell 可应用于表格，与vertical-align:center; text-align:center"同时应用，让元素水平、垂直方向居中
图片是行内元素，让图片在div（表格）中水平垂直居中，应用display:table-cell属性，即让div拥有表格的特性

<div class="div2">
  <img scr="https://.......com/u/.....">
</div>

对div中元素应用居中

其他要点：

text-indent:2em 首行缩进两个字符（中文的书写习惯）
text-indent可使用负缩进，使用负缩进建议加外边距或内边距
word-wrap:break-word 折行（对字符自动换行）
text-align:center与margin:0 auto有什么区别?
前一个是给inline（内联）元素用的，后一个是给block（块级）元素用的。
text-align:center与<CENTER>的区别
<center>是将所有被包含的元素都居中显示，而text-align：center只是将元素（块级元素）下面的内联元素居中显示。
text-align:justify如何生效
链接：w3c css:text-align属性

为什么单独设置text-align:justify;不起作用，非要在后面加一个内联块状元素宽度为100%的才可以？
<p class="center">我是两端对齐文字端对齐文字<span></span></p>
.center{
        text-align:justify;
       }
span{
     display:inline-block;
     width:100%;
    }

这个是因为text-align不会处理被打断的行和最后一行。因为你这里的文字只占了一行，所以也是最后一行了，所以text-align设置为justify不会产生任何效果。
解决方法：使用text-align-last，并将其设置为justify。不过不幸的是，text-align-last不是所有浏览器支持。
对于不支持text-align-last的，可以在最后一行人工生成两行文本，然后把第二行隐藏了，那么我们要显示的第一行自然就可以实现两端对齐了。
span是inline-block，也可以设置宽度（100%），那么这个时候内联匿名盒的宽度超过行盒，浏览器会将其拆成两行，自然第一行文本的text-align效果就生效了。你的实现刚刚好是上面的第二个实现方法。