墨痕的前端知识体系

# CSS容易忘记的一些属性

# text-align属性

  1. text-align:justify 两端对齐
  2. text-align属性只对块级元素起作用，行内级元素无效
  3. 这一居中显示可以用margin 0 auto 表示

# line-height属性

行高指的是文本间基线的距离，其单位可以为px,百分比,em 文字基线 顶线 划分

行高就是 inline-box 的高度,默认情况下行内元素是基于base-line对齐的 QQ截图20200128111606.png

图片1px问题:因为图片本身也是行内元素,也是基于基线对齐,基线距离底部会有一个间隙,所以会有留白,解决方案:font-size:0 或者 vertical-align:bottom

# vertical-align

垂直对齐方式 只作用于行内元素,块级元素设置无效

{% note purple no-icon %}

  • vertical-align:top:垂直对齐于一行内最高的元素
  • vertical-algin:Text-top:垂直对齐于文本顶部
  • vertical-align:middle:对齐于文本中线
  • vertical-align:baseline:对齐于文本基线(英文字母文本底部)
  • vertical-align:Text-bottom:对齐于文本底部
  • vertical-align:bottom:对齐于行内底部最低元素 {% endnote %}

# word-spacing letter-spacing text-transform

white-space no-wrap 不换行 word-spacing 单词之间间隔 letter-spacing 字母之间的间隔 text-transform:capitalize(首字母大写)|uppercase(字母大写)|lowercase(字母小写)|none()

# text-decoration

{% note purple no-icon %} 文本修饰

  • underline:下划线
  • overline:上划线
  • line-through:删除线
  • blink:闪烁效果
  • none {% endnote %}

# 动态伪类

只有当用户交互时才显示,分为锚点伪类和用户行为伪类

锚点伪类

:link :visted

行为伪类

:hover :active :focus

# CSS3新增UI元素伪类

{% note orange no-icon %}

:disable(input框的未选中的伪类) :enabled(input框的可选中的伪类) :checked(单选框或者复选框的选中伪类) {% endnote %}

# css3结构类

{% note orange no-icon %}

  • :first-child-第一个子元素类

  • :last-child-最后一个子元素类

  • :nth-child(N)-第N个子元素类

  • :nth-of-type(N) 指定类型的第N各元素

  • div:nth-of-type(2) 只匹配div的第二个元素

  • nav > a:not(last-of-type) not选择器 表示除了最后一个a标签 其他的元素的样式 {% endnote %}

# 伪元素

用于向某些选择器设置特殊样式 语法格式：Element::pseudo-element 只作用于块级元素 {% note orange no-icon %} 伪类

  • ::first-line 块级第一行

  • ::first-letter 块级元素第一个字

  • ::before

  • ::after 这一类伪元素只能用content表示 而且都是行内元素,块级第一个元素,不是真实存在html 支持一切css样式

div::before{
  content:'ABC'
}
  • ::selection 控制文本选中的背景色和前景色 同样也是作用于块级元素 {% endnote %}

# border-radius拓展

{% note blue no-icon %}

border-top-left-radius 左上角弧度 border-top-right-radius 右上角弧度 border-bottom-right-radius 右下角弧度 border-bottom-left-radius 左下角弧度 {% endnote %}

(chrome 火狐 ie 欧朋) {% endnote %} 兼容性写法 border-radius 50% -webkit-border-radius 50% -moz-border-radius 50% -ms-border-radius 50% -o-border-radius 50% {% endnote %}

border实现三角形

.div{
  width:0;
  height:300px;
  border-bottom:30px solid red;
  border-left:30px transparent;
  border-right:30px transparent
}

# box-shadow

原理就是在原来的盒子下盖住一个盒子 然后控制颜色偏移 模糊

  • 属性：
    • 水平偏移
    • 竖直偏移
    • 模糊
    • 扩展(在已有的偏移量上四条边同时增加对应值)
    • 颜色
    • 偏移种类

举例：element的基础阴影:基础投影 box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)

# 背景

{% note green no-icon %}

  • background-clip - 背景图像区域
    <!-- 显示区域包括border区 -->
background-clip:border-box
<!-- 显示区域包括padding区域 -->
background-clip:padding-box
<!-- 显示区域只包括content区域 -->
background-clip:content-box
    效果图:
  • background-origin -相对于背景偏移的初始区域
    background-origin:border-box
background-origin:padding-box
background-origin:content-box

background-image:url() no-repeat 10px 20px
<!-- 这三个值的权重有小到大 分别对应的偏移量起点不同 背景图的位置不相同 -->
  • background-size
    <!-- 只有一个值 第二个值默认就位auto 图片将会默认缩放 -->
background-size:100%
background-size:100% 100%
<!-- 这种情况下 图片一定会按照长宽比填满容器 -->
background-size:cover
<!-- 这种情况下 图片将会一定完整展示 宽度100% 高度自适应 -->
background-size:contain
  • background完整写法
    <!-- background:color position size repeat origin clip attachement url -->

background:#fff center 50% no-repeat content-box content-box fixed url()

{% endnote %}

# 渐变

gradient分为线性渐变和径向渐变

线性渐变-linear-gradient

  • 默认的渐变方向从上到下
    //从上到下有蓝色渐变到红色

background:linear-gradient(bule,red)
background:-webkit-linear-gradient(blue,red)
background:-moz-linear-gradient(blue,red)
background:-ms-linear-gradient(blue,red)
background:-o-linear-gradient(blue,red)
```
  • 从左往右线性渐变写法
    <!-- 从左往右 -->
linear-gradient(to direction,color1,clor2...)
-webkit-linear-gradient(begin direction,color1,color2...)
-moz-linear-gradient(end direction,color1,color2...)
-ms-linear-gradient(end direction,color1,color2...)

标准写法:
linear-gradient(to right,blue,red)
-webkit-linear-gradient(left,blue,red)
-moz-linear-gradient(right,blue,red)
-ms-linear-gradient(right,blue,red)
  • 对角线渐变
    <!-- 左上角到右下角渐变 -->
linear-gradient(to right bottom,blue,right)
<!-- chrome浏览器和其他浏览器相反 一个是定期开始位置 一个定义结束位置 -->
-webkit-linear-gradient(left top,blue,right)
-moz-linear-gradient(right bottom,blue,red)
  • 偏移角度渐变写法 
    0 deg 从下往上
90deg 从左往右
180deg 从右往左
background:linear-gradient(90deg,red 10%,orange 30%,blue 100%)
//这种写法 百分数表示从这个数值的百分数开始想另一个颜色渐变
10% - 30% red向orange渐变
30% - 100% orange向blue渐变

{% note pink no-icon %} 带有-web-kit的chrome浏览器的兼容 0deg是从左到右 然后增大角度它是轴逆时针方向,也就是走左下角 css -webkit-linear-gradient(0deg,red,blue) 普通情况下 0deg是从下往上 也就是结束方向 css linear-gradient(0deg,red,blue) {% endnote %}

# text-shadow

  • 属性值:
    • 水平偏移
    • 竖直偏移
    • blur 模糊
    • color

# text-overflow

  • 属性值:
    • clip 溢出文本隐藏
    • ellipsis 显示省略号
    • string (只兼容火狐浏览器)

# 文字换行

  • overflow-wrap(word-wrap) 是否保留单词
  • word-break 针对多字节文字 设定保留的单位
  • white-space 空白处是否断行 no-wrap

# @font-face

语法规则

@font-face{
  font-family:<webfontname>
  src:<source>[<format>]
  [font-weigth:<weight>];
  [font-style:<style>]
}

实例:

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9 */
}

{% note pink no-icon %} Internet Explorer 9 只支持 .eot 类型的字体, Firefox, Chrome, Safari, 和 Opera 支持 .ttf 与.otf 两种类型字体 {% endnote %}

推荐引入字体通用模板

@font-face
  font-family 'YourWebFontName'
  src url('YourWebFontName.eot'); /* IE9以上 */
  src url('YourWebFontName.eot?#iefix')format('embedded-opentype'),/*兼容IE6-IE8*/
  url('YourWebFontName.ttf')format('truetype'),/*Safari,Andriod ios*/
  url('YpurWebFontName.woff')format('wodff'),/*Mordern Browser*/
  url('YourWebFontName.svg#YourWebFontName')format('svg') /*除了ios*/

使用直接 font-family:YourWebFontName即可

# CSS3 2D转换

{% note success simple %}

  • rotate() 平面2d旋转 通过角度参数对元素进行旋转 正角度为顺时针 语法:transfrom:rotate(angle)

  • translate() 平移-正方向 右 下

translateX() translateY() translate(X,Y)

  • scale() 缩放 参数为缩放比例 缩放时水平方向竖直方向的坐标原点在元素几何中心

scaleX() scaleY() scale(X,Y)

  • skew() 扭曲与斜切

skewX() 参数正角度逆时针方向斜切 skewY() x轴方向 正角度顺时针斜切

{% endnote %}

# CSS3 3D转换

{% note success simple %}

  • rotate3d()

rotateX() 对象在x轴上旋转 90deg时图片消失 正方向手掌向上弯曲 rotateY() 在y轴旋转 向里旋转为正角度 正方向手掌想里弯曲 rotateZ() z轴方向旋转 类似于二维方向旋转

  • translate3d()

translate3d(X,Y,Z) 加速cpu渲染 z轴正方向指向我们

  • scale3d() {% endnote %}

# Transfrom坐标系

transfrom-origin 改变转换元素的位置

默认是元素几何中心点为基点 transfrom-origin: left top 围绕左上角旋转

transfrom-style属性 定义指定嵌套元素是怎样在三维空间呈现

transfrom-style: flat | preserve-3d perspective:number 当数值越来越大 transform的元素就会感觉越来越近

# CSS transition属性

过渡属性:

  • transition-property:指定过度的对象

transition-property:none | all(默认值) | property(指定颜色 或者opacity 或者等等属性)

  • transition-duration :指定过渡的时间
  • transition-timing-function 动画类型

linear 线性过度(匀速) ease 平滑过渡 ease-in 由慢到快 ease-out 由快到慢 ease-in-out 慢到快到慢 step-start

  • transition-delay 指定过度的延迟时间

{% note danger simple %}

标准写法

transition:<transition-propetry><transition-duration><transition-timing-function><transition-delay>

{% endnote %}

# animation

{% note blue no-icon %}

  • animation-name 动画名称

  • animation-duration 动画持续时间 默认为0

  • animmation-timing-function

    linear 线性过渡 ease 平滑过渡 ease-in 慢到快 ease-out ease-in-out

  • animation-delay 定义动画的延迟时间

  • animation-iteration-count 动画循环次数

    infinite 无限次数 count count次数

  • animation-direction 定义动画的方向

    normal 正方向 reverse 反方向 alternate 动画现正常运行然后再反方向 alternate-reverse 相反

    {% endnote %}

{% note pink no-icon %} 标准写法

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

{% endnote %}

# @keyframes 关键帧

语法:

@keyframes animationname {
  keyframes-selector {
    css-styles
  }
}

三个均为必写项

  • animationName
  • keyframes-selector 动画持续时间百分比 0-100 from(0%) to(100%)
  • css-styles 样式 {% note green no-icon %} 最好添加-webkit-animation兼容 {% endnote %}
Last update: 12/20/2020, 10:54:06 PM

← 常见面试题 →