HTML3

• 本节涵盖：文本（行高、首行缩进、居中）、锚、伪类、表格、display

学习任务

1.line-height 有什么作用?

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

百度
  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的后代。

div1 
    
 我是段落2
    我是链接

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

我是链接


ddddddd

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

hunger
...
点击链接跳转到这里

表格

• 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中元素应用居中

其他要点：

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

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

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