前端知识点-Css 篇

Css

CSS 优化、提高性能的方法有哪些？

• 避免过度约束
• 避免后代选择符避免链式选择符使用紧凑的语法
• 避免不必要的命名空间
• 避免不必要的重复
• 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
• 避免！important，可以选择其他选择器
• 尽可能的精简规则，你可以合并不同类里的重复规则

推荐 Scss，相比Less，解析快一些

CSS 中 link 与 @import 的区别

@import是CSS提供的语法规则，只有导入样式表的作用；
link是HTML提供的标签，不仅可以加载CSS文件，还可以定义RSS，rel连接属性

• 加载页面是，link引入的CSS被同时加载，@import 引入的CSS 将在页面加载完毕后加载。
• @import 是 CSS 2.1 才有的语法，IE5 之前不能识别
• 可以通过 JS 操作 DOM，来插入 link 标签改变样式；由于 DOM 方法是基于文档的，无法使用@import 方式插入样式。

CSS选择器列表优先级权重

选择器	栗子
ID	#id
class	.class
标签	p
属性	[type='text']
伪类	:hover
伪元素	::first-line
相邻选择器、子代选择器	> +

• 内联样式，如: style="..."，权值为1000。
• ID选择器，如：#content，权值为0100。
• 类，伪类、属性选择器，如.content，权值为0010。
• 类型选择器、伪元素选择器，如div p，权值为0001。
• 通配符、子选择器、相邻选择器等。如* > +，权值为0000。
• 继承的样式没有权值

常用可继承CSS属性

1、字体系列属性
font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格

2、文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：单词之间的间距
letter-spacing：中文或者字母之间的间距
text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
color：文本颜色

3、元素可见性
visibility：控制元素显示隐藏

4、列表布局属性
list-style：列表风格，包括list-style-type、list-style-image等

5、光标属性
cursor：光标显示为何种形态

CSS3 有哪些新特性

• border-radius：圆角
• box-shadow：阴影
• text-shadow：文字特效
• gradient：线性渐变
• transform：rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位
• rgba：多背景
• ::selection：媒体查询
• border-image：图片边框

CSS3 新增伪类有哪些：

CSS3 新增伪类举例：
p:first-of-type 选择属于其父元素的首个元素的每个元素。
p:last-of-type 选择属于其父元素的最后元素的每个元素。
p:only-of-type 选择属于其父元素唯一的元素的每个元素。
p:only-child 选择属于其父元素的唯一子元素的每个元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中

批量改变样式

/* 使用cssText */
el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 20px';

css表达式使用一次性表达式(但最好避免css表达式)

// css
p{
    background-color: expression(altBgcolor(this))
}

// js
function altBgcolor(el){
    el.style.backgroundColor = (new Date()).getHours() % 2 ? "#fff" : "#06c";
}

三角箭头

.triangle{
    width:0px;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom:20px solid #000;
}

长宽比方案：

.aspectration[data-ratio="16:9"] {
    padding-top: calc(100% * 9 / 16);
}

aspect-ratio（需借助插件实现）

清除浮动

 /*方法一： 清除浮动代码 推荐写法*/
.clearfloat:after{
    display:block;
    clear:both;
    content:"";
    visibility:hidden;
    height:0
}
.clearfloat{zoom:1}


/*方法二：不能和position配合使用，因为超出的尺寸的会被隐藏*/
.clearfloat{
    overflow:hidden;
}

BFC即 Block Formatting Contexts (块级格式化上下文)

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

可触发 BFC 特性：

• body 根元素
• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position (absolute、fixed)
• display 为 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

让页面里的字体变清晰

-webkit-font-smoothing 在 window 系 统 下 没 有 起 作 用 ， 但 是 在 IOS 设 备 上 起 作 用 -webkit-font-smoothing：antialiased 是最佳的，灰度平滑

盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

  box-sizing: content-box|border-box|inherit:

• content-box: 这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
• border-box: 指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
• inherit: 指定 box-sizing 属性的值，应该从父元素继承

标准盒子模型和IE盒子的区别

一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。

居中的实现

• line-height

• 子级 position: absolute; // 左，高 各50%，

  • 子级具体高度 然后通过margin往回移动元素50%的宽高度
  • 不知高度使用 transform: translate(-50%, -50%);

• 子级 具体宽高度 position: absolute； left,right,bottom,top 都为0，margin:atuo;

• 通过给父级设置 flex

• 父级display:table, 子级:display: table-cell; vertical-align: middle;

• 父级display:grad, 子级:margin：auto; 兼容性差，不推荐

• 通过给父级设置before

  .ghost-center {
    position: relative;
    border: 1px solid blue;
    height: 400px;
  }
  
  .ghost-center::before {
      content: " ";
      display: inline-block;
      height: 100%;
      width: 1%;
      vertical-align: middle;
  }
  
  .ghost-center>.content {
      display: inline-block;
      vertical-align: middle;
      width: 20rem;
  }

动画

• transform:

  • scale 等比缩放，scale(x, y)、scaleX()、scaleY() 可以使用负数，效果：细长字体，字体反转
  • skew 倾斜 单位: degress (度) transform: skew(100deg,100deg) grad (百分度) transform: skew(10grad,10grad) rad（弧度） 一个完整的圆 为2π transform: skew(10rad,10rad) turn (圈数) 一个完整的圆 为1turn transform: skew(0.25turn，1.2turn) 可以为负数
  • rotate 旋转 单位同skew, rotate(n)相等于rotateX(n)、totateY(n)、rotateZ(n)、rotate3d(x,y,z,angle);
  • translate：平移 transform: translate(x,y)、translateX(n)、translateY(n)

• transition：transition: property-color duration timing-function; transition: height 0.3s ease;

  • transition-property: 指定过渡属性
  • transition-duration: 过渡持续时间
  • transition-delay: 过渡开始之前需要等待的时间 单位：s，ms
  • transition-timing-function: 指定动画运动时的节奏

• animations：用来指定一组或多组动画，每组之间用逗号相隔，支持IE10以上

  • animation-name: 指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画系列

    .anim{
      animation-name:jump;
    }
    @keyframes jump{
      form{
        top: 100;
      }
      to{
        top: 0
      }
    }  
  

  • animation-duration：指定动画周期的时长 默认为0 无动画
  • animation-iteration-count：定义动画运行的次数 默认运行一次 取值为 infinite 则为无限循环，不可以为负数，可以为小数
  • animation-direction：动画播放方向
  • animation-timing-function：每个动画周期执行的桀纣，作用于一个关键帧周期而非整个动画周期 同 transition-timing-function

CSS开启GPU加速

为 动 画 DOM 元 素 添 加 CSS3 样 式 -webkit-transform:transition3d(0,0,0) 或 -webkit- transform:translateZ(0);，这两个属性都会开启 GPU 硬件加速模式，从而让浏览器在渲染动画 时 从 CPU 转 向 GPU ， 其 实 说 白 了 这 是 一 个 小 伎 俩 ， 也 可 以 算 是 一 个 Hack ， -webkit-transform:transition3d 和-webkit- transform:translateZ 其实是为了渲染 3D 样式，但我 们设置值为 0 后，并没有真正使用 3D 效果，但浏览器却因此开启了 GPU 硬件加速模式。

开启GPU硬件加速可能触发的问题：

• 可能会导致浏览器频繁闪烁或抖动，可以尝试以下办法解决之：

  -webkit-backface-visibility:hidden; 
  -webkit-perspective:1000;
  

css Hack

说明：针对不同的浏览器写不用的CSS,就是CSS Hack

• 条件Hack

  只在IE下生效
  <!--[if IE]>
  这段文字只在IE浏览器显示
  <![endif]-->
  
  只在IE6下生效
  <!--[if IE 6]>
  这段文字只在IE6浏览器显示
  <![endif]-->
  
  只在IE6以上版本生效
  <!--[if gte IE 6]>
  这段文字只在IE6以上(包括)版本IE浏览器显示
  <![endif]-->
  
  只在IE8上不生效
  <!--[if ! IE 8]>
  这段文字在非IE8浏览器显示
  <![endif]-->
  
  非IE浏览器生效
  <!--[if !IE]>
  这段文字只在非IE浏览器显示
  <![endif]-->  
  

• 属性级Hack

  hack	写法	实例	IE6(S)	IE6(Q)	IE7(S)	IE7(Q)	IE8(S)	IE8(Q)	IE9(S)	IE9(Q)	IE10(S)	IE10(Q)
  *	*color	青色	Y	Y	Y	Y	N	Y	N	Y	N	Y
  +	+color	绿色	Y	Y	Y	Y	N	Y	N	Y	N	Y
  -	-color	黄色	Y	Y	N	N	N	N	N	N	N	N
  _	_color	蓝色	Y	Y	N	Y	N	Y	N	Y	N	N
  #	#color	紫色	Y	Y	Y	Y	N	Y	N	Y	N	Y
  \0	color:red\0	红色	N	N	N	N	Y	N	Y	N	Y	N
  \9\0	color:red\9\0	粉色	N	N	N	N	N	N	Y	N	Y	N
  !important	color:blue !important;color:green;	棕色	N	N	Y	N	Y	N	Y	N	Y	Y

• 选择符Hack 最常见的是

  *html *前缀只对IE6生效  
  *+html *+前缀只对IE7生效  
  @media screen\9{...}只对IE6/7生效  
  @media \0screen {body { background: red; }}只对IE8有效  
  @media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效  
  @media screen\0 {body { background: green; }} 只对IE8/9/10有效  
  @media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效  
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效  
  

px和em的区别

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。

浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em