CSS学习笔记三

1.white-space

• normal
  连续的空白符会被合并，换行符会被当作空白符来处理。换行在填充「行框盒子(line boxes)」时是必要。

• nowrap
  和 normal 一样，连续的空白符会被合并。但文本内的换行无效。

• pre
  连续的空白符会被保留。在遇到换行符或者
  元素时才会换行

• pre-wrap
  连续的空白符会被保留。在遇到换行符或者
  元素，或者需要为了填充「行框盒子(line boxes)」时才会换行。

• pre-line
  连续的空白符会被合并。在遇到换行符或者
  元素，或者需要为了填充「行框盒子(line boxes)」时会换行。

• break-spaces
  与 pre-wrap的行为相同，只有较高浏览器才支持，除了：

  任何保留的空白序列总是占用空间，包括在行尾。
  每个保留的空格字符后都存在换行机会，包括空格字符之间。
  这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小)

2.select居中

竟然有人想要实现原生的下拉框出现居中的效果，于是我就使用text-align进行设置，发现竟然不起作用。后来呢，我查了查，各种实现方法竟然也不是非常的完美。最多的就是用padding去实现，但是我测试了，好像不可以。

1
2
3
4
5
6
7
8
9

select:{
    width: auto;
    padding: 0 2%;
    margin: 0;
}
option{
    text-align:center;
}

3.自定义字体

(1) 下载字体
下载需要的字体，比如otf，ttf格式，放到项目目录下。在vue中引入，主要使用了一个相对路径的问题,我这里放到了 asset 文件夹下。
(2) 定义 @font-face
这里也要注意要引用到这个otf文件

1
2
3
4
5
6

@font-face {
  font-family: Heavy;
  src: url('./assets/font/SourceHanSansSC-Heavy-2.otf');
  font-style:normal;
  font-weight:normal;
}

(3) 使用字体

1
2
3
4
5

.title{
    font-size: 36pt;
    line-height: 72px;
    font-family:Heavy;
}

比如下面是使用的苹方字体：

1

font-family: PingFangSC-Regular, sans-serif;

4.transform导致fixed失效

transform是个超级常用的属性, 需要居中/动画/开启cpu加速时经常会用到.但这个属性也有很多副作用, 例如把后边的元素盖住了,或者是后代absolute元素被overflow:hidden剪裁.除此之外还有个影响, 让拥有固定定位(fixed)属性的子元素变的像个绝对定位(absolute)元素.

5.去掉选中div后出现的高亮淡蓝色边框

1
2
3
4

div:focus{outline:none}

*{outline:none;}
div{border:none}

6.opacity

子元素会继承父元素的opacity属性，如果子元素单独设置了opacity那么其真正的结果值是子元素与父元素opacity值的乘积。所以子元素opacity设置为1，其透明度仍然是0.7*1=0.7，（注意opacity的值为0-1，所以不能通过设置opacity为2来使透明度为1）

7.flex布局

(1) padding问题
在设置padding的子元素的属性后，其内容会压缩父元素的空间。当上下两个都用了flex布局，上面三列，下面两列，本来下面的分为了 1:2 ，和上面的1:1:1，应该对齐的，但是实际的结果却并不对齐。

【解决方案】
就是使用flex具体的比例，代替 flex:1;

1
2
3
4

/** 分三列 */
flex:33.33% 1 1;
/** 占两列 */
flex:66.66% 1 1;

(2) 超出父元素问题
我的本意就是在一个用flex布局的div中放一个图表，但是可以自动的占据剩下的内容。但是显然并不是这么如意。

【解决方案】
这个问题其实从父元素的排列上去解决了。比如下面的竖着的三个面板，只有第二个是固定高度的，一和三都是剩余填充，如果 一 不进行 flex:1 设置，那么 三 中的柱状图就无法自适应宽高。

8.fixed定位

backdrop-filter 会导致fixed失效，如果祖先有 backdrop-filter，fixed会不相对于视口，而是相对于这个祖先元素。