CSS核心概念与技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/csj41352/article/details/102502874

1、CSS之选择器及其优先级

!important > (权重1000)内联样式 > (权重100)ID选择器 > (权重10)类选择器、属性选择器、伪类选择器 > (权重1)元素选择器、伪元素选择器；

CSS权重：https://www.w3cplus.com/css/css-specificity-things-you-should-know.html

通配选择器 `*` 对权重没有任何贡献；

混合选择器权重叠加。例 #id .class的权重为 110；

属性选择器：

伪类选择器：

2、常见的伪类选择器

参考链接：https://blog.youkuaiyun.com/weixin_44570988/article/details/88931559

2、CSS之定位

Position的属性值有：
1. Absolute：绝对定位，脱离文档流，是相对于最近的且不是static定位的父元素来定位。

2. Fixed：绝对定位，脱离文档流，是相对于浏览器窗口的可视区域来定位的，是固定的，不会跟屏幕一起滚动。

3. Relative：相对定位，不脱离文档流，是相对于其原本的位置来定位的。

4. Static：默认值，没有定位。

5. Inherit：继承父元素的position值。

3、CSS之Flex布局

flex布局：

6个设置在flex容器上的属性：flex-direction、flex-wrap、flex-flow、justify-content、align-item、align-content；

6个设置在flex容器里元素的属性：flex-grow、flex-shrink、flex-basis、flex、order、align-self；

4、CSS之三类元素

4.1块元素

块元素的特性

1.独霸一行，总是在新行上开始

2.宽度缺省是它父级元素的100%，除非设定一个宽度

3.高度、行高、外边距、内边距都可以设置

4.可以容纳其他内联元素或者其他块元素

常见的块元素：div，p，h1-h6，hr，table

4.2行内元素 inline element

行内元素的特性

1.和其他元素都在一行上，遇到父级元素边界会自动换行
2.高、行高以及内外边距都不可以改变
3.宽度与内容一样宽，且不可改变
4.行内元素只能容纳文本或者其他行内元素
对于行内元素，需要注意的是：设置宽度width无效，设置高度无效，可以通过设置line-height来设置，设置margin只有左右有效，上下无效，设置padding只有左右有效，上下无效

常见的行内元素：a，span，q，input，select

4.3行内块元素

行内块元素的特性

1.元素排列在一行

2.宽度默认由内容决定

3.元素间默认有间距

4.支持宽高、外边距、内边距的所有样式的设置

常见的行内块元素：img，button

5、CSS之动画

css实现动画效果分为两步：

1.使用@keyframs + 动画名定义动画，如下图。

2.在需要动画的样式中定义属性animation使用动画；

6、CSS之过渡

过渡属性transition，例transition:width 2s,height 2s;

7、CSS之2D/3D转换

8、Less

1.变量
@valueName:1px;
.style1{
    width:@valueName;
}

2.嵌套
编译前：
#a {
  margin: 10
  .b {
    padding: 20
  }
}
编译后：
#a {
  margin: 10
}
#a .b {
  padding: 20
}

3.Mixin
普通混合：编译后定义的混合(本例中.center )会输出到css文件中

.center {
  text-align: center
}
.a {
  .center
}


不带输出的混合：混合后加一个括号()，编译后定义的混合(本例中.center )不会输出到css文件中

.center() {
  text-align: center
}
.a {
  .center
}


带参数的混合：可以在定义时加入参

.m($a, $b) {

}


带参数并且有默认值的混合

.m($a:10px, $b:pink) {

}


命名参数：对于多参数混合的调用，可以通过@b:red的方式指定要给那个参数赋值

.m($a:10px, $b:pink) {

}
.n {
  .m(@b:red)
}

arguments变量：用@arguments表示mixin的所有入参
.b(@a, @b, @c) {
  border: @arguments
}
.c {
  .b(1px, solid, black)
}

4.运算
在Less中可以进行加减乘除的运算，计算双方只有一方带单位(px)即可

.a {
  width: (100 + 100px)
}

5.继承
.a {
 
}
.b {
  $:extend(.a)
}
性能比混合高
灵活度比混合低: 不支持参数

6.避免编译、!important
通过~""将不想被编译的Less代码放到双引号中，这样编译器会讲内容默认输出到编译后的css文件中
!important直接加在样式后面即可