css基础
2023-01-29 本文已影响0人
欢西西西
1. 盒子模型
- 标准盒模型
box-sizing: content-box，设置width设置的是content的宽度。width固定后再设置padding、border、margin则盒子会越来越大 - 怪异盒模型
box-sizing: border-box，设置width是content + padding + border。如果width固定，则无论怎么设置padding和border，盒子的大小都是固定的。
image.png
问题：从这4个维度看块级元素和行内元素的区别
| - | -inline | -block |
|---|---|---|
| -content | 设置width和height无效，width由内部元素决定 | width会自动铺满父元素宽度 |
| -padding | -上下padding无效 | - |
| -border | - | - |
| -margin | -上下margin无效 | - |
| -截图 |
image.png
|
- |
| -测试 | 当inline内部包含了block元素时：① inline可以设置高度，上下padding和margin也有效 ②如果inline不设置高度的话，高度被block元素撑开 |
问题：background-color的填充区域
填充区域是content-padding-border。将border设置为dashed就能很清晰地看出是填充了border区域的
image.png
问题：inline-block
既有inline元素的同行属性，又有block的宽高属性
问题：获取宽度-offsetWidth
image.png
image.png
image.png
2. BFC（block formatting context，块级格式化上下文）
具有BFC特性元素的子元素不会受到外界元素的影响，也不会影响外部元素
一般我们可以用来解决margin重合问题和清除浮动、盒子高度塌陷问题
那什么时候会触发BFC呢？常见的情况如下：
• <html>根元素
• overflow的值为auto、scroll或hidden（本身还是个普通元素，保留了块状元素的流体特性）
• display的值为inline-block、flex、table-cell、table-caption等
• float的值不为none (浮动元素本身BFC化，然而浮动元素有破坏性和包裹性，失去了元素本身的流体自适应性)
• position为absolute或者fixed （元素脱离文档流）
问题：元素脱离文档流有哪些方式？
- float-浮动（需要注意的是文本仍然会为这个元素让出位置）
- position:absolute（相对于第一个非静态定位的父元素）
- position-fixed（相对于浏览器窗口）
问题：position: sticky会触发BFC吗？
不会脱离文档流，也不会触发BFC。sticky的特性只会在它的容器里生效，内部A元素被粘性定位时，后续元素仍按照A未定位时的位置来确定
3. 长度单位
- 绝对长度
| 单位 | 解析 |
|---|---|
| mm / cm | 毫米 / 厘米 |
| in | 英寸 (1in = 96px = 2.54cm) |
- 相对长度
| 单位 | 解析 |
|---|---|
| px | 像素，相对于设备独立像素 |
| % | 百分比，相对于父元素宽度 |
| em / rem | 相对于当前元素/根元素font-size |
| vw / vh | 相对于viewport的宽度 / 高度，1vw=viewport的1% |
| vmin / vmax | vw和vh中较小/大的那个 |
- %相对于谁？
position:absolute：相对于祖先元素中第一个存在定位属性的元素
position:fixed: 相对于视口
position:relative; transform:translate(); border-radius: 50%; background-size相对于自身
margin、 padding、text-indent：相对于父元素宽度
font-size：相对于父元素的font-size
lin-height：相对于当前元素的font-size值
4. opacity与rgba透明的区别
- opacity作用于元素，它的子元素的文本、背景都会继承这个透明度。【就是整个元素的透明度都会变】
- rgba作用于颜色值，只会对当前设置颜色的css属性生效
5. 父元素高度塌陷
父元素没有设置足够的高度，内部元素又设置了浮动，父元素中又没有其他更高的非浮动的元素，就会出现子元素跳出父元素的边界的情况。
6. 伪类和伪元素
伪元素：创建不存在文档中的“假元素”，::before ::after ::selection(设置选中状态的样式) ::first-letter ::first-line ::placeholder()
伪类：用来选择符合某种“状态”的元素 :hover，:first-child,nth-child(odd) 奇数子元素 :not()
7. css选择器的解析
从右向左
所以也应尽可能减小右侧选择器的范围
- 若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。
- 若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。
- 两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点)，而从左向右的匹配规则的性能都浪费在了失败的查找上面。
