CSS知识点总结

1. 隐藏元素

display: none;
visibility: hidden;
opacity: 0;

2. 居中：blog.csdn.net/m0_73560798…

1. 
display: flex;
//水平居中
justify-content: center;
//垂直居中
align-items: center;

Ps: flex-direction: row;  //方向

2.
子绝父相。子向右下移动父元素的一半，再利用transform.
top: 50%;left: 50%;  transform: translate(-50%,-50%);

3. 绝对定位+margin 

.container{
    position: relative;
    width: 500px;
    height: 500px;
    background-color: yellow;
}
.item{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100px;
    height: 100px;
}

3.不可复制

css: user-select: none;
Js document.addEventListener("copy", function (e) {
    e.preventDefault();
});

4. 国际化和省略号

A、 单行文本自适应省略号
white-space: nowrap;  /* 禁止换行 */
text-overflow: ellipsis; /* 溢出显示... */
overflow: hidden;


B、国际化怎么做，中文一个字，阿拉伯语很长一串，怎么实现样式的一致
1. 布局弹性设计
    a. min-width、max-width
    b. Flexbox/Grid 自动分配空间
2. 文本溢出处理 (省略号)
3. 动态字体与间距 
    :root[lang="ar"] { /* 阿拉伯语 */
        --font-scale: 0.9; /* 长文本缩小字号 */
    }

5、计算宽度

布局控制 → offsetWidth/clientWidth
​视口定位 → getBoundingClientRect()
​动态样式 → getComputedStyle()
​滚动逻辑 → scrollWidth
​SVG 图形 → getBBox()
​框架开发 → 结合 Ref API 或ResizeObserver


offsetWidth
原理：返回元素渲染后的总宽度​（包含内边距、边框，但不含滚动条）

clientWidth
原理：返回元素可视区域的宽度​（含内边距，不含边框和滚动条）

scrollWidth
原理：返回元素内容总宽度​（含隐藏的溢出内容）

动态元素尺寸监听：
javascript
const observer = new ResizeObserver(entries => {
entries.forEach(entry => {
	console.log('宽度变化:', entry.contentRect.width);
});
});

observer.observe(document.getElementById('dynamicElement'));

6、BFC是一块块独立的渲染区域，可以将BFC看成是元素的一种属性，

拥有了这种属性的元素就会使他的子元素与世隔绝，不会影响到外部其他元素

bfc:display:inline-block、flex

使用BFC解决子元素浮动导致父元素高度塌陷的机制
margin重叠机制
普通元素和浮动元素相互重叠的机制

7. position:relative 相对定位，相对自身定位

position:absolute 绝对定位，相对于最近的不为static的父级元素定位

8. IE盒子，少了边框和padding的宽度

9. 伪类：特定的状态 :hover,:active ；

伪元素：特定部分，双冒号 ::before