css小结

发表于 | 分类于
字体，文本基础
  • font-size，font-family，font-weight（regular或者bold加粗），line-height
  • text-align：文本对齐方向 left，right，center
  • text-indent：文本第一行缩进距离
  • text-decoration：文本下划线none，overline，line-through，underline
  • text-transform：改变大小写none，uppercase，lowercase，capitalize（首字母大写）
  • direction：文本方向 ltr，rtl
  • word-spacing：单词间隔
  • letter-spacing：字母间隔
  • white-space：
    • normal（多个空格变为一个，换行变空格）
    • pre（正常）
    • nowrap（在normal的基础上阻止换行）
    • pre-wrap：保留空格，会自动换行
    • pre-line：合并空白符，保留换行符
文本

  • text-overflow：

    • clip(修剪)，隐藏超出文本

      1
      2
      overflow:hidden
      text-oveflow:clip

    • ellipsis(省略)，需要其他属性配合

      1
      2
      3
      overflow:hidden
      text-overflow:ellipsis
      white-space:nowrap

  • word-wrap：允许长单词换行

    • normal：只在允许的断字点换行，单词过长不会换行会超出文本
    • break-word：在长单词或 URL 地址内部进行换行。

  • word-break：

    • normal：浏览器默认规则换行
    • break-all：允许拆单词换行
    • keep-all：只能在半角空格或者连字符换行
背景background

  • background-attachment：背景图像是否跟着滚动scroll，fixed

  • background-color

  • background-image：url(‘URL’)

  • background-position：x y（中间没有逗号），top/center/bottom left/center/right

  • background-repeat：no-repeat， repeat-x， repeat-y ， repeat

    简写：background: #fff url(test.jpg) no-repeat fixed 0 0

  • background-size：background-size: length|percentage|cover|contain

    background-origin：如果background-attachment为fixed则无效

    ​ padding-box（相对padding边）

    ​ border-box（相对border边）

    ​ content-box（相对于内容框）

    background-clip：规定背景的绘制区域：padding-box ; border-box ; content-box

边框border

简写：border：1px solid（dashed虚线）red；

用border画三角形

1
2
3
4
5
6
7
8
p{
  height:0;
  width:0;
  border-top:30px solid rgba(0,0,0,0);
  border-left:30px solid rgba(0,0,0,0);
  border-right:30px solid rgba(0,0,0,0);
  border-bottom:30px solid blue;
}
padding和margin
  • margin可以是负数
  • 外边距合并，当两个垂直外边距相遇时，会重叠形成一个外边距（以较大的为准）
盒模型box-sizing
  • box-sizing: content-box , 标准盒模型，宽高只包含content的宽高
  • box-sizing: border-box , ie盒模型，宽高包括了content，padding和border
CSS选择器

  1. 组合选择

    • E,F: 多元素选择器
    • E F: 后代选择器
    • E>F: 直接子元素选择器
    • E+F: 直接相邻选择器
    • E~F: 普通相邻选择器（无论直接相邻与否）

  2. 属性选择

    • E[attr] :匹配所有具有attr属性的元素 ，div[id] ,取到所有具有id属性的div
    • E[attr=value] : 匹配属性值为value的元素，div[id=”haha”]
    • E[attr=value]: 匹配包含value值的元素，` div[class =aaa]可以选到
      `

  3. 伪类选择器

    • E:first-child: 匹配元素E的第一个子元素 / E:last-child

    • E:link：所有未被电击的链接

      E:visited: 已被点击的链接

      E:hover: 鼠标悬停 （必须在前两个之前）

      E:active: 鼠标点击未释放 （必须在hover之前)

    • E:nth-child(n) :匹配第n个子元素，n从1开始(也可取odd，even，2n+1) / E:nth-last-child(n)

    • E:not(selector)

  4. 伪元素选择器

    • E::fefore
    • E::after ：在E元素之后插入生成的内容
定位
  • static: 正常文档流
  • relative: 相对于元素本身进行定位，移动的距离会占据文档流空间。
  • absolute: 绝对定位，脱离文档流 ，相对于static定位以外的第一个祖先元素进行定位。
  • fixed: 相对于浏览器窗口进行定位
  • 粘性定位sticky: 必须指定top，bottom，left，right中的其中一个值，如top:30px，这个值表示当元素距离页面视口顶部距离大于 30px 时，元素以 relative 定位表现，而当元素距离页面视口小于 30px 时，元素表现为 fixed 定位，会固定在目标位。 可以用于导航栏固定

浮动

清楚浮动，在父元素后添加一个伪元素

1
2
3
4
5
.parent:after{
  content:"";
  display:block;
  clear:both
}
负边距margin

当 margin-top 、 margin-left 为负值的时候，会把元素上移、左移，同时⽂档流中的位置也发生相应变化,这点与 position:relative 的元素设置top、left后元素还占据原来位置不同。

  • 垂直居中:利用绝对定位元素的复边距实现

    1
    2
    3
    4
    5
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-？px;  //根据实际元素计算出其自身高度和长度一半的负间距
    margin-left:-？px;

  • 负边距对float元素：可以覆盖往负边距方向移动

  • 多列布局：固定右边列、

display
  • display: inline（行内元素） ， block（块元素） ， inline-block（表现和行内元素一致，但是支持宽高设定）
  • display:none: 把元素从文档中删除，不会渲染
  • visibility:hidden: 隐藏，还在文档中，而且占据文档流
text-shadow

text-shadow: x轴 y轴 模糊半径 颜色

text-shdow: 2px 2px 3px #333;

box-shadow

box-shadow:inset(内阴影) x-offset y-offset blur-radius(阴影模糊半径) spread-radius(阴影扩展半径) color

渐变

  • 线性渐变：linear-gradient(direction, color-stop1, color-stop2, ...)

    • direction：to top \ to right \ to bottom \ to left
    1
    background:linear-gradient(to top,#ddd,red)  //用逗号分隔！

  • 径向渐变：background: radial-gradient(shape size at position, start-color, ..., last-color);

    • shape：ellipse（默认），椭圆径向渐变 / circle：圆形
    • at position：at center / at top / at bottom / at 10px 20px / at x% y%
    1
    background:radial-gradient(circle at top,red,yellow) //注意逗号位置
过渡和动画

  • transition: property duration timing-function delay;

    • property：属性，height，width等
    • duration：需要多少时间完成
    • timing-function：linear（匀速），ease-in（加速），ease-out（减速），cubic-bezier(n,n,n,n)
    • delay：多少秒后开始
    1
    transition: width 1s ease-out 2s

  • animation: name duration timing-function delay iteration-count direction fill-mode play-state;

    • iteration-count：播放次数
    • direction ：reverse（倒放）
    • direction fill-mode：forwards（停在最后的状态） / backwords
    1
    2
    3
    4
    5
    6
    7
    8
    9
    div:hover{
      animation: rainbow 1s
    }
    @keyframes rainbow{
      0% { background: #c00; }
      50% { background: orange; }
      100% { background: yellowgreen; }
    }

  • 另外一点需要注意的是，浏览器从一个状态向另一个状态过渡，是平滑过渡。steps函数可以实现分步过渡（一卡一卡的感觉）

    1
    2
    3
    div:hover {
    animation: 1s rainbow infinite steps(10);
    }
变形

transform-origin：定位变形的点

transform：

  • translate：translateX(x) / translateY(y) 水平移动

  • rotate：rotateX(deg) / rotateY(deg)/ rotateZ(deg) 沿X,Y,Z轴旋转

    perspective:number：透视，一般和旋转配合使用，数字越小，透视效果越明显

  • skew：skew(deg , deg) / skewX(deg) /skewY(deg)

  • scale：scale(x,y) / scaleX(x) / scaleY(y) 缩放