css相关知识点笔记

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

总结css加载会造成阻塞吗

css会阻塞DOM的渲染但不会阻塞DOM的解析。
css会阻塞js的执行
DOMContentLoaded事件与Onload事件的不同
- onload事件意为页面中所有资源加载完成后调用所有资源包括图片视频、链接文件等
- DOMContentLoaded事件为DOM解析完成后执行函数所以文件css在js后面时不用等css加载完毕就会调用函数而如果结构为js css js 在第一个js范围内声明函数就需要等到css加载完成再执行完后面的js才会调用声明函数

总结css的继承与非继承

文本类属性都会继承父标签的值比如color,font-sizefont-weight等。
结构类型的属性只有visibilitycursor这两个属性会继承其他的都不会
列表类元素默认继承如list-style
表格类元素默认如border-collapse
样式属性都有以下四种通用值
- inherit 继承父元素的属性值
- initial 使用该属性的默认值如width默认值为auto
- unset 如果该属性值会继承就继承不会继承就用默认值
- revert 如果样式表设置了属性就用那个属性没有设置就用浏览器的样式规范没有样式规范就继承或者用默认值

vertical-align、line-height、幽灵空白节点

vertical-align
1. 设置基线位置(bottom…)值为百分比时是依据line-height的值
2. 该属性只作用于内联元素
3. 替换元素默认值为bottom非替换元素默认值是baseline
4. 替换元素指内容可以被替换的元素包括存在src属性的img video audio iframe标签以及可以输入文本的input select textarea标签。所有替换元素都是内联元素。
line-height
1. 是指两条基线之间的间距
2. line-height实现垂直居中的重点在使行距相同行距 = line-height - font-size计算出来的值被一行字上下均分
幽灵空白节点
1. 幽灵空白节点在每个行框盒子的最前面有一个空白节点这个空白节点不占据任何宽度也不能选中获取但是是真实存在的。
2. 行框盒子内联元素组成的每一行就是一个行框盒子所以如果一行里面没有内联元素就不能叫做行框盒子。

实现水平垂直居中的方法

已知子块的宽高
1. absolute +负margin
2. absolute + margin auto
3. absolute + calc
未知子元素的宽高
1. absolute + transform
2. vertical-align只作用于内联元素
3. writing-mode看着都麻烦不想看
4. css-table
5. flex
6. grid兼容性不如flex

流的破坏

float
- 具有块状化、BFC、包裹性、脱离文档流、没有margin合并的特性。
- 元素设置了浮动之后元素脱离文档流向左或向右移动直到触碰到包含块的边缘或者碰到上一个浮动元素的边缘停止
- 浮动元素的display属性一般都默认变成block
- 浮动元素没有设置高度时它的高度至少要等于最高的浮动子元素
- clear
  1. 作用于非浮动元素时使非浮动元素移动到浮动元素的下方以清除掉左、右、左右浮动
绝对定位(position:absolute;)
- 绝对定位的包含块则是距离最近的position不为static的祖先元素。
- 不被裁剪。当使用了overflow:hidden;属性被用到绝对定位元素和包含块元素之间时不会对绝对定位元素裁剪
```
<div style="position: relative">
  <div style="overflow: hidden">
    <div style="position: absolute">
      绝对定位元素
    </div>
  </div>
</div>
```

固定定位(position:fixed;)

固定定位一般情况下都是相对于浏览器窗口移动但是当固定定位的祖先元素设置了transform属性值不是none就相对于这个祖先元素移动

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        border: solid 1px;
      }
    </style>
  </head>
  <body>
    body
    <div
      style="width: 500px; height: 500px; padding: 20px; transform: scale(1)"
    >
      div
      <div
        style="position: fixed; left: 0; bottom: 0; height: 300px; width: 300px"
      >
        fixed
      </div>
    </div>
  </body>
</html>

粘性定位(position:sticky;)
- 如果父元素设置了overflow属性值不是visible那子元素的粘性定位失效

常用单位

em / rem
- 两者根本区别在于rem会相对于根元素的font-size变化但是em在自身没有设置font-size的情况下会根据外层设置了font-size变化
px
vh / vw

BFC: 块级格式化上下文

理解成标准布局规范形成BFC后内部元素的布局不会影响BFC外部元素

`display:none;`和`visibility: hidden;`的区别

display:none;的重新显现会导致页面重绘重排visibility: hidden;只会导致页面的重绘
display:none;的元素不会占据页面空间visibility: hidden;会占据页面空间
display:none;会使子孙元素一起消失但是visibility: hidden;的子孙元素可以通过设置visibilityvisible;显示出来
display:none;会影响transition过渡效果,visibility: hidden;不会影响

`box-sizing`

content-box 这是默认值也叫做标准盒模型当元素设置了宽度后内容区的宽就是这个值当设置了padding,border宽度之后元素的实际宽度 = 设置的内容区宽度 + padding值 + border值高度同理
border-box 也叫做怪异盒模型当元素设置了宽度后当前元素的实际宽度固定为这个值当设置了padding,border宽度之后元素的实际宽度 = 设置的宽度元素的内容区宽度 = 设置的宽度 - padding - border值高度同理
阅读https://blog.csdn.net/jhfvuyhgui/article/details/123942537