欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

css样式

程序员文章站 2022-04-12 23:29:31
...

55个提高你CSS开发效率的必备片段

1、布局

经常问到大约就是两栏布局以及三栏布局

2、css样式权重

顺序：!import>内联>id>class>标签>通配符>继承>默认
计算规则：
内联：1000
Id:100
class（属性选择器）: 10
标签1
通配符： 0

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表标签选择器和伪元素选择器，如div p，权值为0001。
第五等：通用选择器（*），子选择器（>），相邻同胞选择器（+），权值为0000

例如：

#a .b   100+10 = 110
#a .b #c 100*2+10
div#a .b #c  100*2+10 + 1

下面的图是坑点：（盗的图）
css样式
css样式
最终显示的就是后面的，后面会覆盖前面的
css样式
css样式
css样式
css样式
字体颜色最终是红色的
css样式
css样式

3、z-index

考点：如果两个容器重叠了，设置了z-index，问堆叠顺序
设置z-index不是说都是生效的，只能跟着position为relative、absolute、fixed配合着才能使用，形成层叠上下文

4、盒子模型

1、标准盒子
2、怪异盒子
区别：宽高计算方式不一样
盒子：有margin、border、padding、content四部分组成
标准盒子所设置的宽高就是content区域的宽高
怪异盒子的宽高就是border+padding+content的宽高
解决这种区别，使用box-sizing
两个值：border-box，以及content-box

5、画三角形

等边三角形怎么实现？

6、 flex布局

有些长，准备另一篇文章吧，只是总结

7、动画

CSS动画：animation、transition、transform、translate傻傻分不清 - 掘金

7.1 transition

transition: property duration timing-function delay;
css样式

<!DOCTYPE html>
<html lang="en">
<head>
  <title>transition</title>
  <style>
    #box {
      height: 100px;
      width: 100px;
      background: green;
      transition: transform 1s ease-in 1s;
//过度的属性名字叫做transform 
    }

    #box:hover {
      transform: rotate(180deg) scale(.5, .5);
    }
  </style>
</head>
<body>
  <div id="box"></div>
</body>
</html>

7.2 animation

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

div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}

@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>animation</title>
  <style>
    .box {
      height: 100px;
      width: 100px;
      border: 15px solid black;
      animation: changebox 1s ease-in-out 1s infinite alternate running forwards;
    }

    .box:hover {
      animation-play-state: paused;
    }

    @keyframes changebox {
      10% {
        background: red;
      }
      50% {
        width: 80px;
      }
      70% {
        border: 15px solid yellow;
      }
      100% {
        width: 180px;
        height: 180px;
      }
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

7.3 transtion

translate(x,y) 平移
translateX  translateY
scale(x,y) 缩放  //可以用于设置border为0.5的细线
scaleX(x) scaleY(y)
rotate(angle) 定义 2D 旋转，在参数中规定角度。9deg
rotateX(angle) 沿着X轴旋转 rotateY(angle)

未完待续，之后再整。。。

相关标签： css 面试问题

上一篇： Pure CSS 的网格布局（比bootstrap小很多且易扩展的css UI）_html/css_WEB-ITnose

下一篇： widgetFactory的销毁

推荐阅读