- 本节涵盖：文本（行高、首行缩进、居中）、锚、伪类、表格、display
学习任务
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效果就生效了。你的实现刚刚好是上面的第二个实现方法。
