CSS常用属性

选择器

选择器权重：
        !important:10000
        内联样式:1000

        id选择器:100

        (伪)类选择器/属性选择器:10

        (伪)元素选择器:1

        通配选择器:0

<div class="box">
    <div>
        <span></span>
    </div>
    <span></span>
</div>
<span class="content"></span>
<span></span>
<span></span>
<span></span>

1.相邻兄弟选择器
.box + span {}
2.全兄弟选择器
.box ~ span {}
3.所有后代选择器
.box span {}
4.直接子代选择器
.box > span {}
5.选择器组-交集选择器
div.box {}
6.选择器组-并集选择器
.box .content {}
7.伪类选择器
a:hover { color: red }    鼠标放上去，文字变红
a:link { color: red }     a元素从未被访问过
a:visited { color: red }  a元素被访问过
a:active { color: red }   a元素被点击还未松手
a:focus { color: red }    a/input元素聚焦(获取焦点)
8.伪元素选择器
.box::first-line { color: red }    选中首行
.box::first-letter { color: red }  选中首字母
.box::before { content: "321",color: red }  元素前添加内容
.box::after { content: "cav",color: red }   元素后添加内容

一、文本

1.text-decoration:文本装饰线;
    none:无任何装饰线;
    underline:下划线;
    overline：上划线;
    line-through:中划线(删除线);
2.text-align:设置行内级元素对其方式;
    left:左对齐;
    right:右对齐;
    center:正中间显示;
    justify:两端对其;
3.letter/word-spacing:字母/词之间的间距;

二、字体

1.font-size:字体大小;
2.font-family:设置文字字体;
3.font-weight:字体的粗细;
    normal:默认值;
    bold:等于700;
    (num):数值;
4.line-height:行高(两行文字基线之间的间距);
    

三、元素类型

display:元素类型;
    block:块级元素(可以手动修改宽高);
    inline:行内级元素(行内非替换元素不可以设置宽高，宽高由内容决定);
    inline-block:行内块级元素;
    none:不显示(元素仍存在);

四、元素隐藏方法

1.display:none;

2.visibility:hidden;

3.color:rgba(0, 0, 0, 0);

4.opacity:0.5;

五、盒子模型

1.outline: solid 1px #fff;  外轮廓；
2.box shadow:5px 5px 10px 10px orange inset;   盒子阴影；
    第一个<length>:offset-x，水平方向的偏移，正数往右偏移
    第二个<length>:offset-y，垂直方向的偏移，正数往右偏移
    第三个<length>:blur-radius,模糊半径
    第四个<length>:spread-radius,延伸半径
    <color>:阴影颜色，如果没有设置，就跟随color属性的颜色
    inset:外框阴影变成内框阴影;
3.text-shadow:5px 5px 10px orange;   文字阴影
    第一个<length>:offset-x，水平方向的偏移，正数往右偏移
    第二个<length>:offset-y，垂直方向的偏移，正数往右偏移
    第三个<length>:blur-radius,模糊半径
    <color>:阴影颜色，如果没有设置，就跟随color属性的颜色
4.盒子属性对于行内非替换元素注意事项:
    padding、border上下会被撑起来，但是不占据空间
    margin上下不生效;
5.box-sizing:设置盒子模型中宽高的行为
    content-box:padding、border都布置在width、height外边
    border-box:padding、border都布置在width、height里边;

六、用CSS绘制三角形

.box{
  width: 100px;
  height: 100px;
  border: 50px solid transparent;
  border-top-color: blue;
}

七、css元素定位

position:对元素进行定位;
    static: 默认值，静态定位;
    relative: 相对定位;
    absolute: 绝对定位（子绝父相），定位参考对象是最邻近的定位祖先元素，
              如果找不到这样的祖先元素，参照对象是视口;
    fixed: 固定定位;
    sticky: 粘性定位;

将position设置为absolute/fixed元素的特点:
    1.可以随意设置宽高
    2.宽高默认由内容决定
    3.不再受标准流约束
    4.不再给父元素汇报宽高数据
    5.脱标元素内部默认还是按照标准流布局;


z-index:用来设置定位元素的层叠顺序(仅对定位元素有效)
    取值可以是正整数，负整数，0

八、css元素浮动

1.float:指定一个元素沿容器的左侧或右侧放置，允许文本和内联元素环绕它
    none:不浮动默认值
    left:向左浮动
    right:向右浮动;


2.clear:指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面
    left:要求元素的顶部低于之前生成的所有左浮动元素的底部
    right:要求元素的顶部低于之前生成的所有右浮动元素的底部
    both:要求元素的顶部低于之前生成的所有浮动元素的底部
    none:默认值，无特殊要求;


3.伪元素清除浮动
.clear-fix::affter {
  content: "";
  display: block;
  clear: both;

  visibility: hidden;  /*浏览器兼容性*/
  height: 0;  /*浏览器兼容性*/
}
.clear-fix {
  *zoom: 1;  /*IE6/7兼容性*/
}

九、flex布局(弹性盒子)

display: flex;  /*开启弹性盒子布局*/

flex-container属性：
1.flex-direction: 修改主轴方向
    row:默认值
    row-reverse:row的反转
    column:列变为主轴方向
    column-reverse:列主轴进行反转;
2.flex-wrap: 决定了flex container是单行还是多行
    nowrap(默认):单行
    wrap:多行
    wrap:多行(对比wrap，cross start与cross end相反);
3.flex-flow: flex-direction与flex-wrap的简写;
4.justify-content:决定了flex items在main axis上的对齐方式
    flex-start：与main start对齐
    flex-end：与main end对齐
    content：居中对齐
    space-between：flex items之间的距离相等
                   与main start、main end两端对齐
    space-around：flex items之间的距离相等
                  flex items与main start、main end之间的距离是flex items之间距离的一半
    spance-evenly：flex items之间的距离相等
                   flex items与main start、main end之间的距离等于flex items之间的距离;
5.align-items：决定了flex items在cross axis上的对齐方式
    normal：在弹性布局中，效果和stretch一样
    stretch：当flex items在cross axis方向的size为auto时，会自动拉伸至填充flex container
    flex-start：与cross start对齐
    flex-end：与cross end对齐
    center：居中对齐
    baseline：与基准线对齐
6.align-content：决定了多行flex items在cross axis上的对齐方式，用法与justify-content类似
    stretch(默认值)：与align-items的stretch类似
    flex-start：与cross start对齐
    flex-end：与cross end对齐
    center：居中对齐
    space-between：flex items之间的距离相等
                   与cross start、cross end两端对齐
    space-around：flex items之间的距离相等
                  flex items与cross start、cross end之间的距离是flex items之间距离的一半
    space-evenly：flex items之间的距离相等
                  flex items与cross start、cross end之间的距离等于flex items之间的距离


flex-item属性
1.order：决定了flex items的排布顺序
    可以设置任意整数(正整数、负整数、0)，值越小越排在前面
    默认值是0
2.align-self：可以覆盖flex container设置的align-items
    auto(默认值)：遵从flex container的align-items设置
    stretch、flex-start、flex-end、center、baseline效果跟align-items一致
3.flex-grow：决定了flex-items如何扩展(拉伸/成长)
    可以设置任意非负数字(正小数、正整数、0)，默认值是0
    当flex container在main axis方向上有剩余size时，flex-grow属性才会有效
4.flex-shrink：决定了flex items如何收缩(缩小)
    可以设置任意非负数字(正小数、正整数、0)，默认值是1
    当flex items在main axis方向上有超过了flex container的size，flex-shrink属性才会有效
5.flex-basis：用来设置flex items在main axis方向上的base size
    auto(默认值)、具体的宽度数值(100px)
6.flex：flex-grow||flex-shrink||flex-basis的简写
    none：0 0 auto
    auto：1 1 auto 

十、transform用法

transform语法：
1.平移：translate(x,y)：用于移动元素在平面上的位置
    值个数：一个值时，设置x轴上的位移
           二个值时，设置x轴和y轴上的位移
    值类型：数字：100px
           百分比：参照元素本身
    
2.缩放：scale(x,y)
    值个数：一个值时，设置x轴上的缩放
           二个值时，设置x轴和y轴上的缩放
    值类型：数字：
                1：保持不变
                2：放大一倍
                0.5：缩小一般
           百分比：不常用

3.旋转：rotate(deg)
    值个数：一个值时，表示旋转的角度
    值类型：常用单位deg：旋转的角度(degress)
            整数为顺时针
            负数为逆时针

4.倾斜：skew(deg,deg)
    值个数：一个值时，设置x轴上的倾斜
           二个值时，设置x轴和y轴上的倾斜
    值类型：deg：倾斜的角度，正数为顺时针，负数为逆时针
    

transform-origin：形变的原点(比如在进行scale缩放或者rotate旋转时都会有一个原点)
    一个值：设置x轴的原点
    两个值：设置x轴和y轴的原点
    值类型：left、center、top、bottom关键字
            length：从左上角开始计算
            百分比：参考元素本身大小

十一、transition过度动画

transition:transition-property transition-duration transition-timing-function transition-delay;

1.transition-property:指定应用过渡属性的名称
    all：所有属性都执行动画；
    none：所有属性都不执行动画
    css属性名称：要执行动画的css属性名称，如width、left、transform等
2.transition-duration：指定过渡动画所需的时间
    单位可以使秒(s)或毫秒(ms)
3.transition-timing-function：指定动画的变化曲线
4.transition-delay：指定过渡动画执行之前的等待时间

十二、Animation动画

animation
1.使用步骤
    步骤一：使用keyframes定义动画序列(每一帧动画如何执行)
    步骤二：配置动画执行的名称、持续时间、动画曲线、延迟、执行次数、方向等
2.@keyframes规则：可以使用@keyframes来定义多个变化状态，并且使用animation-name来声明匹配
    关键帧使用percentage来指定动画发生的时间点
    0%表示动画的第一时刻，100%表示动画的最终时刻
    因为这两个时间点十分重要，所以还有特殊的别名：from和to(from相当于0%，to相当于100%)
3.animation属性
    animation-name：指定执行哪一个关键帧动画
    animation-duration：指定动画的延迟时间
    animation-timing-function：指定动画的变化曲线
    animation-delay：指定延迟执行的时间
    animation-iteration-count：指定动画执行的次数，执行infinite表示无限动画
    animation-direction：指定方向，常用值normal和reverse

十三、vertical-align行盒内容对齐方式

vertical-align:
    baseline(默认值)：基线对齐;
    top：把行内级盒子的顶部跟line boxes顶部对齐;
    middle：行内级盒子的中心点与父盒基线加上x-height一半的线对齐;
    bottom：把行内级盒子的底部跟line box底部对齐;

十四、CSS函数

1.var():使用css定义的变量
    属性名需要以两个减号(--)开始l;
    属性值则可以使任何有效的css值;
        div {
          --main-color: red;
        }
    我们可以通过var函数来使用
        span {
          color: var(--why-color)
        }
    规则集定义的选择器是自定义属性的可见作用域(只在选择器内部有效)
        所以推荐将自定义属性定义在html中，也可以使用:root选择器；

2.calc():计算css值，通用语计算元素的大小或位置
    计算支持加减乘除的运算
        √-和+运算符的两边必须要有空白字符
    通常用来设置一些元素的尺寸或者位置       
        .box{
          width: calc(100% - 60px);
        }

3.blur():毛玻璃（高斯模糊）效果
    函数将高斯模糊应用于输出图片或者元素
        blur(radius)
        radius:模糊的半径用于定义高斯函数的偏差值，偏差值越大，图片越模糊;
    通常会和两个属性一起使用:
        filter:将模糊或颜色偏移等图形效果应用于元素
        backdrop-filter:为元素后面的区域添加模糊或者其他效果;

4.gradient():颜色渐变函数
    常见的函数实现:
        linear-gradient():创建一个表示两种活多种颜色线性渐变的图片;
        radial-gradient():创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成;
        repeating-linear-gradient():创建一个有重复线性渐变组成的<image>;
        repenting-radial-gradient():创建一个重复的原点触发渐变组成的<image>;
        等等;

十五、浏览器前缀

1.为什么需要浏览器前缀？

        CSS属性刚开始并没有成为标准，浏览器为了防止后续会修改名字给新的属性添加了浏览器前缀

2.浏览器私有前缀只有对应的浏览器才能解析使用

        -o-、-xv-:Opera等

        -ms-、mso-:IE等

        -moz-:Firefox等

        -webkit-:Safari、Chrome等

3.不需要手动添加，后面学习了模块化打包工具会自动添加浏览器前缀

十六、CSS编写顺序思路

十七、meta元素的name属性(常用)

robots：爬虫、协作搜索器、或者“机器人”，对此页面的处理行为，或者说，应当遵循规则

author：文档作者的名字

Copyright：版权声明

description：一段简短而精确的、对页面内容的描述

                        一些浏览器，比如Firefox和Opera，将其用作书签的默认描述

keywords：与页面内容相关的关键词，使用逗号分隔，某些搜索引擎会进行收录