CSS基础使用

前言：该笔记适合学习过CSS，想快速回忆复习的人

css基本语法

选择器

标签选择器： div

类选择器： .class_div

id选择器： #id_div

选择器优先级：id>类>标签

!important：在html元素行内添加，优先级最高

后代选择器：.class_div span

群组选择器：.class_div, #id_div

背景样式

background-color：颜色

background-image：图片url background-size：图片大小

background-position：图片位置center

background-repeat：图片重复 属性：no-repeat、repeat-x、repeat、repeat-y

文本属性

line-height：行高

text-align：对齐方式

text-decoration：文本修饰 属性：line、color、style、thickness

字体属性

font-family：类型

font-size：大小

font-weight：字体粗细

font-style：风格

链接中的伪类

盒模型

margin：外边框属性

padding：内边距属性

border：边框属性

dispaly属性

inline：可以让像 div 这样的霸道块，接纳其他元素来自己的地盘。

浮动与定位

float:left、right：元素沿其容器的左侧或右侧放置 属性：left、right

position：对元素位置控制

• 静态定位（position:inherit）（默认：普通流、标准流）

• 相对定位（position:relative） （相对于自身位置移动，占位置）

• 绝对定位（position:absolute） （相对带有定位的父级，不占位置）

• 固定定位（position:fixed）（元素不随着滚动条拖动而改变位置，不占位置）

  子绝父相

.ad-l {
    position: relative;
    left: -40px;
}

CSS新特性

新增选择器

属性选择器：通过正则去匹配指定属性的元素

子元素伪类选择器：选择某元素的子元素

UI伪类选择器：通过元素的状态来选择

文本阴影

text-shadow: x-offset y-offset blur color;

文本溢出

text-overflow：设置超长文本省略显示

圆角边框

border-radius： 顺序：左上角、右上角，右下角，左下角

盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;

渐变属性

线性渐变

/*从上到下线性渐变*/
.gradient1 {
    background-image: linear-gradient(#ff577f, #c6c9ff);
}
/*从左到右线性渐变*/
.gradient2 {
    background-image: linear-gradient(to right, #ff9d72, #c6c9ff);
}
/*从左上角到右下角的渐变*/
.gradient3 {
    background-image: linear-gradient(to bottom right, #8ad7c1, #c6c9ff);
}
/*定义角度的渐变*/
.gradient4 {
    background-image: linear-gradient(50deg, #bc6ff1, #ffd5cd);
}

径向渐变

/*均匀分布径向渐变*/
.gradient1 {
    background-image: radial-gradient(#ff577f, #c6c9ff, #8ad7c1);
}
/*不均匀渐变*/
.gradient2 {
    background-image: radial-gradient(#8bcdcd 5%, #ff9d72, #c6c9ff);
}
/*椭圆形渐变*/
.gradient3 {
    background-image: radial-gradient(ellipse, #8ad7c1, #c6c9ff, #fce2ce);
}
/*圆形渐变*/
.gradient4 {
    background-image: radial-gradient(circle, #bc6ff1, #ffd5cd, #b6eb7a);
}

重复性径向渐变

是用重复性的径向渐变组成的图像。它与径向渐变的区别在于，它会从原点开始重复径向渐变来覆盖整个元素。

元素转换

旋转函数(transform:rotate(角度edg))：绕原点旋转 其他属性：rotateX()、rotateY()、

移动函数(transform:translate(px,px))：定位 X 轴和 Y 轴的新坐标

其他属性：translateX()、translateY()

缩放函数(transform:scale（number)：沿着 X 轴和 Y 轴缩放

其他属性：scaleX()、scaleY()

CSS3过渡

元素从一种样式逐渐过渡到另一种样式

transition: 指定属性 持续时间 速度曲线 开始时间; (前两个必写)

transition: transform 1s ease-in-out;

动画

@keyframes 被称为关键帧，它能够设置一些元素的样式，让该元素可以从原来的样式渐渐过渡到新的样式中。

@keyframes 动画名 {    
    0% {样式属性：属性值;}  
    25% {样式属性：属性值;}    
    50% {样式属性：属性值;}    
    100% {样式属性：属性值;} 
}
animation: 动画名 完成动画的周期(s) 是否重复;

弹性盒子

display: flex 盒子为弹性盒子

flex-direction 弹性子元素在父容器中的排列方向和顺序

flex-wrap 弹性盒子的子元素换行方式

align-items 弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

align-content 控制多行的对齐方式，一行则不起作用

媒体查询

@media语法

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

mediatype （媒体类型）取值范围如下：

media feature （媒体特性）常用取值如下：