css的一些零碎总结

个人的vue/angular网站开发，记得添加全局css【main.css或index.css】

* {
  padding: 0;
  margin: 0;
  /*height: 100%;*/  /*看情况要不要吧，加了这个可能会影响第三方库，比如element plus的ElMessage*/
  width: auto;
  font-size: 2.2vh;  /*or vw, viewport height|width*/
  position: relative;
}
  

【height默认100%还是不加吧，发现对蛮多第三方库影响挺大的】这里height是100%都是相对于父元素而言【父元素有配置height，且父元素能确定具体大小情况下；和父元素是不是position: static没有关系】

【如果父元素没有配置height，那么就是相对于上N层里第一个配置了height的祖元素，如果直到html元素都没有配置则会相对于viewport height视窗高度；div的width默认是100%，即width: auto;等价于width: 100%;】

 【注意，上面的width、height等属性的配置只针对div等元素，对span，p等元素不一样（所以还和display等属性有关）】

这里之所以没有设置width: 100%;是因为我们看书、看网页都是从左到右然后从上到下，因此如果配置width: 100%;反而会导致要保持一致性而配置更多的css；

width: fit-content;则表示根据子元素来确定当前元素的大小，这个时候就要求子元素有个具体的大小，而不能子元素在内的所有子孙元素的width都是百分比没有具体大小的元素撑起来；

 

注意，每种元素有它们默认的width，比如div的width默认是100%，而其它一些元素可能是fit-content;

 

font-size则可以根据情况看是用相对大小还是绝对大小【px】

配置上面的css有利于网站的整体一致性，需要padding等的元素再配置针对性的比较好；

 

position: absolute;也是相对于父元素【假设父元素不是static】可以做相对于父元素的“浮动”定位（fixed，absolute【通过left，right之类的相对父元素左上角定位】，relative）；fixed则可以相对整个页面左上角做浮动定位；

 

多用display: flex和grid；

 

vue文件里可以有多个style块，这样就可以实现scoped和非scoped的分隔；非scoped用于修改第三方库的默认样式，如element-plus【可以通过在最外层加一个唯一的id来#id .el-table .cell {...}】

如果是用了scoped，由于#sss会被翻译为#sss[xxx]导致优先级不如element-ui等第三方库的css，如果修改无效；

 

css的padding会导致修饰的div 面积变大，即假设div的高度是100px，如果让其padding-top: 10px;那么这个div其实是占用了110px;而margin则不会导致修饰的div高度变高，但是会让div整体往下移；

因此这两种的修饰都会挤压其他元素的空间；但是注意，padding虽然会改变div的高度，比如div的height是200px，然后padding: 25px 0;那么这个div实际上占用了250px，然后它的子元素用了height: 50%;

那么子元素的高度仍然是100px而不是125px；

对于padding-top: Npx，N太大是会导致内容显示在div之外的，但是它不会影响布局（fuck，还是会影响的，除非它外层有个div明确了高度是多少，它只是不会影响它外层的布局，但是和他平级的元素的布局还是会影响向下挤压），即这个显示的内容会和其他元素重叠而不是将其他元素挤压到下面去；而margin则是布局层面的修改会将后面的元素往下面挤压；

margin和padding都可以用10%这种写法，这个和他们的height之类的属性的相对元素是一致的；

border有点像padding，它也是会令元素占用面积加大，不过也是不影响布局而是影响绘制（会影响平级的，不影响上一级的布局，也是想margin一样将元素向下挤压【平级元素前提下】）；比如div的高度是100px，然后它的border-width: 50px;那么这整个div虽然占用高度变成了200px;但是它后面的元素仍然是排列在100px;的高度之后而不是200px;之后（结合z-index就好理解，后面的元素会在padding或border元素的上层）【margin则是会将后面的元素的布局向下挤压】【所以某个元素有border某种意义上可以理解为这个元素外层自动套了一个div且有padding和background；即有border的元素可以通过padding来实现】

 

CSS可以用不同单位进行计算，如：

div {

height: calc(100vh - 100px);/*注意要有空格*/

}

这样子，就可以使用px之类的固定单位来设置border、radius等高度，然后其他元素本来是vh或vw单位再减去这些元素设置的高度或宽度；

 

div {

height: calc(100vh - 100px);

}