CSS查漏补缺

45 阅读5分钟

Flex布局

  • flex: flex-grow flex-shrink flex-basis

    默认值:0 1 auto(初始宽度由width决定,不放大,可以缩小)
    其他值:
    auto => 1 1 auto; 子元素宽度由width决定,并且可以放大缩小
    none => 0 0 auto; 子元素宽度由width决定,并且不能放大缩小
    0      => 0 1 0%; 子元素宽度为0(如果里面有内容会撑开),并且不能放大
    1      => 1 1 0%; 子元素宽度为0(如果里面有内容会撑开),父盒子剩余空间我占1份,放大和缩小
    9      => 9 1 0%; 子元素宽度为0(如果里面有内容会撑开),父盒子剩余空间我占9份,放大和缩小

background

background: color image position/size repeat origin clip attachment initial|inherit;
顺序随便写,但是size必须在position后,而且要加 /

  • background-color: 规定要使用的背景颜色。

    rgb,argb包含padding

  • background-image: 规定要使用的背景图像。

    • url();
    • 可设置多个图片:url(), url(), url(); 前面的在上层
    • linear-gradient() 渐变颜色
    • radial-gradient() 径向渐变
    • 默认平铺(repeat)
    • 盖在background-color上面,图片的透明区域看得到背景色
  • background-position:规定背景图像的位置。

    • px, %, left, center, right, top, center, bottom
    • 默认左上角 (0 0)
    • 如果只设置一个值,另一个值默认center; 10px => 10px center
    • px 和 % 对于图像的移动是不一样的。px:坐标移动;%:图像相对于元素进行绝对定位
  • background-size: 规定背景图片的尺寸。

    • px; %(相对于定位区域'background-origin'大小的百分比); auto; cover; contain
    • xpx,ypx ;
    • auto,ypx; xpx,auto
    • xpx(高自动auto, 不是宽高都是xpx)
  • background-repeat:规定如何重复背景图像。

    • 平铺(repeat, repeat-x, repeat-y, no-repeat)
  • background-origin: 规定背景图片的定位区域。

    • padding-box 默认值
    • border-box
    • content-box
  • background-clip:规定背景的绘制区域。

  • background-attachment:规定背景图像是否固定或者随着页面的其余部分滚动。

    • scroll(默认:跟随元素滚动,元素位置不动他不动);
    • fixed(依附的浏览器视口内固定,position是相对与浏览器视口定位,元素不在视口内,他也就不在了);
    • local(fixed+跟随元素内容一起滚动)
  • inherit: 规定应该从父元素继承 background 属性的设置。

box-shadow

(inset) offset-x offset-y blur-radius spread-radius color;

  • offset-x和offset-y表示阴影的偏移量,可以是正数或负数,正数表示向右和向下,负数表示向左和向上;
  • blur-radius: 表示阴影的模糊半径,值越大,阴影就越模糊(0~20px)
  • spread-radius: 表示阴影的扩散半径,值越大,阴影就越大(0~20px)
  • color: 表示阴影的颜色,可以使用CSS颜色值或RGBA值。

vertival-align

  • 用于给inline,inline-block元素的基线 设置到 与父元素的哪个位置对
  • inline元素的高度 = line-height; inline-block元素的高度 = margin-box的高度
  • line-box:就是所有元素顶端到底端的高度,包含行高
  • baseline: 把元素的基线(x)与父盒子的基线(x)对齐,如果元素内是多行文字,则用最后一行的基线与父盒子基线对齐;如果元素没有基线(没有文字就没有基线,如:给inline-box设置宽高但没有文字),把元素的margin box的底部与父盒子基线对齐。父元素的基线是一直存在的
  • super: 把元素的基线升到复合子上标的适当位置
  • sub: 把元素的基线升到复合子下标的适当位置
  • <percentage>: 把元素提升或下降一段距离( % * line-height/元素高度 = 距离),0% 意味同baseline
  • <length>: 同percentage
  • middle:把元素的中心点与父盒子基线加上x-height一般的线对齐
  • text-top:把元素的顶部和父盒子的内容区域顶部对齐
  • text-bottom:把元素的底部和父盒子的内容区域底部对齐
  • top:把元素的顶部和父盒子line-box区域顶部对齐(line-box:容纳所有子元素的最大高度,包含子所有元素的行高)
  • bottom:把元素的底部和父盒子line-box区域底部对齐

选择器

  1. >: 子代选择器
  2. +: 相邻兄弟选择器
  3. :兄弟选择器

滚动条样式

&::-webkit-scrollbar {
  /*滚动条整体样式*/ 
  display: inherit; 
  width: 0.04rem !important; 
} 
&::-webkit-scrollbar-thumb { 
  /*滚动条里面小方块*/ 
  background-color: #5ccce4; 
  border-radius 
  border 
  box-shadow:0 0 6px 0 #5ccce4; 
} 
&::-webkit-scrollbar-track { 
  /**滚动条里面的轨道 */ 
  background: rgba(45,101,255,.22745); 
}

文字默认效果

image.png box只给了固定宽度和边框, 可以看到, nbsp;</br>可以正常发挥作用,而连续的空格会被缩减成一个(比如This和is之间的三个空格变成了一个),换行符也全都无效句子超过一行后会自动换行,而长度超过一行的单个单词会超出边界

word-break:

  • 指定CJK脚本的断行规则。CJK脚本是中国,日本和韩国("中日韩")脚本。
  • normal
  • break-all:碰到边界就换行
  • keep-all: 半角空格或连字符处换行。
  • break-work:在长单词放不下(要超出容器时)才换行,如果换行之后长单词还是超出,则截断单词换行,逗号和空格并不会影响换行,该属性兼顾上面两个属性 早期css达到该效果还需要word-warp属性

word-warp

white-space

  • 如何处理元素内的空白。
  • normal:默认。空白会被浏览器忽略。

  • nowrap: &nbsp有效,空格缩成一个;换行符无效,<br>有效 。

  • pre:&nbsp有效,连续空格保留;换行符和<br>可以换行。没有自动换行其行为方式类似 HTML 中的 <pre> 标签。

  • pre-wrap: &nbsp有效,连续空格保留,换行符和<br>可以换行。

  • pre-line: 合并空白符序列,但是保留换行符。

image.png

image.png

word-spacing

  • normal
  • xx px: 设置单词与单词之间的距离

letter-spacing

  • normal
  • xx px:设置字母与字母或者中文字与中文字之间的距离

单行文本显示...

  • overflow: hidden
  • white-space:nowrap
  • text-overflow:ellipsis

多行文本显示...

鼠标样式

cursor: pointer;

clip-path

clip-path:图片剪裁

out-line