很容易搞混的属性们
文章目录
1. mouseenter 和 mouseover
区别: mouseover鼠标经过自身盒子会触发,经过子盒子还会触发, 而mouseenter只会经过自身盒子触发;
即: mouseenter不会冒泡, 同样的mouseenter搭配的mouseleave也不会冒泡, 只识别自身盒子区域
而与mouseover搭配的mouseout会冒泡
2. vertical-align和text-align
a. vertical-align和text-align区别总结
常常把vertical-align跟text-aign记在一起,但其实他们俩完全不一样;
垂直居中一般不用vertical-align, 但水平居中确实常用text-align:center;
b. text-align 属性到底怎么用
text-align: 给父盒子设置,里面文字(包括行内块)都能水平居中
| 值 | 描述 |
|---|---|
| left | 把文本排列到左边。默认值：由浏览器决定。 |
| right | 把文本排列到右边。 |
| center | 把文本排列到中间。 |
| justify | 实现两端对齐文本效果。 |
| inherit | 规定应该从父元素继承 text-align 属性的值。 |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ud8yEJbD-1617176767369)(mkdown图片/image-20210328163923335.png)]
c. vertical-align属性到底怎么用-设置img
注意:
vertical-align只对**行内元素**、表格单元格元素生效：不能用它垂直对齐块级元素。行内元素就是display属性值为inline、inline-block、inline-table另加一个table-cell的元素。注意: vertical-align是给要对齐的子盒子自身加的属性,比如img, 而不是父盒子
vertical-align是把行内元素跟行内文字对齐, 有多种对齐方式, 图片等具体请参考: MDN
| vertical-align: xxx; | 对齐方式 |
|---|---|
| baseline | (默认底沿跟文字基线对齐) |
| top | (底沿跟行高上沿对齐) |
| middle | 使元素的中部与父元素的基线加上父元素x-height（译注：x高度）的一半对齐。 |
| bottom | (下沿跟行高底线对齐) |
| 还有sub, text-top | 不常用懒得记了 |
| 百分比 | 相对行高的百分比,正上负下 |
注意:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lTlkbetG-1617176767374)(mkdown图片/vertical对齐方式)]
总结: vertical-align的常见用法是对盒子里装的img图片设置. img图有大小,外面盒子不给大小的话, img图片会默认跟大盒子底部有缝隙, 这是因为img默认基线对齐, 那么基线下的下空隙会存在, 所以常常在头文件中给img添加vertical-align: middle;这个属性
3. window.onload和document.addEventListener(‘DOMContentLoaded’, function(){})的区别
window.onload的加载完指所有内容(包括图形,脚本等), 但DOMContentLoaded只加载好DOM树的内容,不包括样式表,图片等.
淘宝的flexible.js就是用的DOMContentLoaded, 因为有很多图,加载慢也不影响功能使用
4. document.body和document.documentElement区别
（1）什么是document.body？
返回html dom中的body节点 即
（2）什么是 document.documentElement？
返回html dom中的root 节点 即
5. window.innerHeight和document.documentElement.clientHeight区别
1.window.innerHeight属于BOM（浏览器对象模型），而document.documentElement.clientHeight则属于文档对象模型
2.window.innerHeight获取的高度包含横向滚动条，而document.documentElement.clientHeight不包含横向滚动条
6. opacity和rgba设置透明度的区别
用法:
div{opacity: 0.5;}
div{background: rgba(255,255,255,0.5);}
rgba()和opacity都能实现背景透明效果，但最大的不同是opacity有继承性, opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）比如，我们写透明的黑色部分都是用opcity（0.5），但这带出来一个问题就是如果你在这一div上写字的话，然后那个字体也会变成透明色。