任务六笔记

预习的方式可以看课件或者w3c

HTML CSS 基础课程  任务六笔记

一、line-height

line-height行高，调整文字间的距离，可以在div使文字垂直居中，（line-height=height）,只是针对按钮，或者小部分文字适用，如果是大段文字，不适合line-height:2，文字本身是1，上下距离各0.5

二、代码兼容性

can i use网站查看

三、text-indent首行缩进

text-indent:2em缩进2个字符

自动折行是以单词为分隔，如果一个单词比较长，会一直往后，不会换行，溢出；可通过word-wrap:break-word;强制折行

四、a标签

默认是是蓝色的，带下划线的，访问过的话，是紫色的。如果连接中不想要下划线，可设置text-decoration:none即可

<a href="" ></a>

在编辑a标签时，herf属性一定要加上，href="#"是当前页面；如果不加，是默认的文本标签，鼠标放到上面不是手型，而是可编辑的样式

伪类使用时，transtion属性一般放在a标签，而不是a:hover

.div1:hover

border-radius圆角，

targe="_blank"

五、样式的继承性

div设置颜色属性,里面包含的所有其他都会变，除非单独设置，比如div包含a标签，div的设置不对a起作用，但是其他设置有效

六、锚点

在同一文章中篇幅过长或者想连接到其他页面，只需设置如下，即可跳转、

<a href="#here">

</a>点击这里即可跳转到下面

<p id="here"></p>

七、表格

表格的使用场景：就是显示为表格

表格的设置：table、tr（行）、td（列）、th(表头)、text-align:center

表格中的文字、图片默认的垂直水平居中

设置元素、图片垂直居中可采用类似方法 display:table-cell;vertical-align:middle;text-align:center;(vertical-align使用范围)让一个图片文字在div水平垂直居中，只用vertical-align不起作用

display:none inline block inline-block table-cell

diaplay:none让元素彻底消失，不占位置，脱离文档流；dome节点中还是存在的

opacity:设置为0 ，看不见

visiblity:hidden让元素隐藏，但是还是实际存在的，只是看不见，类似于透明；dome节点中还是存在的