初学css笔记

部分笔记！！持续更新

css时写在style标签里，style标签在head标签里，title标签下。
    基本结构：选择器（标签名字）{css的属性}
html是卸载body里面的
----------------------------------------
----------------------------------------

------------------------scc常见属性
color：颜色
font-size：文字大小        取值：数字px    谷歌默认16px
font-weight字体粗细
    ==============关键字
        normal正常
        bold加粗
    ==============纯数字100~900整百
        正常400
        加粗700
font-style：字体样式
    =============
        italic倾斜
        normal正常
font-famil：字体类型

font字体连写顺序：style   weight   size/line-height   family  空格隔开
                  倾斜     粗细    大小/行高           字体

text-indent文本缩进
    ===========取值
        数字+px
        数字+em（1em=当前标签的font-size大小）
text-align文本水平对齐方式，一般给文本的父元素(文本所在标签)设置
    ===========取值
        left左对齐
        center水平居中
            ---可以让文本，span标签，a标签，input标签img标签水平居中。
                 并且是给父元素设置的。
        right右对齐
        text-align：center水平居中
        margin：0 auto水平居中
            ---可以让div标签，p标签，h标签水平居中（直接给当前元素本身设置）
text-decoration文本修饰
    ===========取值
        underline下划线
        line-through删除线
        overline上划线
        none无修饰线
        text-decoration：none；清除a标签默认下的下划线

line-heigh行高   （每一行的间距）
    ===========取值
        数字+px
        倍数（当前标签font-size的倍数）
        取消上下间距：line-height: 1;

background-color：背景颜色
    ===========取值
        英文单词：red...
        RGB：rgb(255,0,0)红色0~255
        rgba：与rgb相似，a表示透明度。0~1
        十六进制取色：#ff00aa
background-imga：url（）----------->背景图片    
background-repeat：背景平铺
    ===========取值
        repeat：水平和垂直都平铺
        no-repeat：不平铺
        repeat-x：x轴方向平铺
        repeat-y：y轴方向上都平铺
background-position：水平反向的位置  垂直反向的位置  ---->背景位置
    ==========取值
        水平方向：left左   center   right右
        垂直反向：top上  center   bottom下

    坐标：数字+px
        原点（0，0）左上方
        x轴：水平向右
        y轴：垂直向下
背景相关属性的连写:background(bg)
    background： color image repeat position
                颜色    图片    平铺     位置

        
width：宽度
height：高度

css和html连接方式：
    1.内嵌式：就是在一个html中在head里加入style标签再写入
    2.外联式：就是建立一个.css的文件，在文件中写  选择器{属性}  ；
        然后在在原来的html中的title里加入link，选择css的文件就好了。
    3.行内式：就是在当前的p标签后加入css的属性

class属性：类名，区分。不能拿以数字或者中划线开头。
    使用html时是直接写在标签后面作为属性
    使用css时在style里用   .类名   使用
id属性：与class属性差不多。区别就是id属性每一个都是唯一的
    使用时   #id名
通配符选择器：*{css属性名：属性值；}       （选择所有）

chrome调试工具    
    打开方式：点击网页->检查
    控制样式：修改属性值，添加属性值，控制样式生效
    1.样式上有删除线：样式被注释，或者样式被覆盖掉了
            （下面的会覆盖上面的，上面的不显示！）
    2.样式前有三角形：属性值没有英文分号，属性名或者英文单词拼错了。

后代选择器： 选择器1 选择器2 {css}
            父代     子代           ----选择器之间用空格隔开
            在父代中找到所有的子代，不论子代藏得有多深
子代选择器：选择器>选择器2{css}
                     父代       子代
            在父代中找到在父代里的，藏起来的不找了！
并集选择器：选择器1，选择器2{css}
            选择器1和选择器2都需要一样的效果，可以不止有两个选择器，可以多个！一般一行写一个选择器。好看！
交集选择器：选择器1选择器2{css}
                ----选择器之间啥也没有
honer选择器：选择器：hover{css}
            鼠标悬停在元素中的状态
            

继承性：子承父业，就是一div里有父亲和另一个div里有儿子，包含关系时，给父亲的属性儿子也会出现。
//a标签的颜色color属性会继承失败
//h系列标签的font-size属性会继承失败
//div标签的高度不能继承，宽度有类似继承效果
    ---常见的继承属性有：
            color
            font-stlye、font-weight、font-size、font-family
            text-indent、text-align
            line-height
层叠性：叠加/覆盖
    叠加：给标签设置不同的属性会出现叠加效果，就是属性会共同作用在标签上
    覆盖：给标签设置一样的属性效果，最终的样式会是写在后面的 
    -----层叠性要在选择器相同时才生效，

元素转换：
    转换为块级元素：display：block
    转换为行内元素：display：inline
    转换为行内块元素：display：inline-block

优先级：继承<通配符选择器（*）<标签选择器<类选择器<id选择器（#）<行内选择器<!important

权重叠加的计算：复合选择器中可以权重叠加计算的方式知道最终哪个选择器会生效。
    权重计算公式：（0，0，0，0）
    复合选择器中->（行内样式的个数，id选择器的个数，类选择器的个数，标签选择器的个数）
    比较规则：先比较第一个，再逐级比较
        如果全部相同属于覆盖性，就是说谁写在下面谁说了算
        **注意：!imptant如果不是继承，则权重最高，天下第一！！
权重计算题解题步骤：
    1、先判断选择器是否能直接选中标签，如果不能直接选中->是继承，优先级最低（继承）->直接pass
    2、通过权重计算公式判断

差错流程：
    1、右击检查
    2、哪里不会点哪里：再elements中找到对应的元素
    3、看style中有没有自己设置的属性---->没有（就是没生效）{1选择器单词拼写错误，2选择器结构写错}
    4、有选择器--->1、是否有删除线（没生效）{1样式被覆盖，2样式被注释}  2、是否有三角形（报错）{1属性后面没有分号，2出现中文标点，3属性名或属性值单词拼错}

盒子模型-边框：border
    边框粗细：border-wigth：数字+px
    边框样式：border-style：实线solid，虚线dashed，点线dotted
    边框颜色：border-color：颜色取值
    反向设置边框：border-方向名：上top右right左laft下bottom
    边框连写：border：粗细值 样式值 颜色值

    //圆角
    border-radius:边框半径
    border-radius：10px--->上下左右都为10px
    border-radius：10px 20px--->上下为10px，左右为20px
    border-radius：10px 20px 30px--->上为10px，左右为20px，下为30px
    border-radius：10px 20px 30px 40px--->上为10px，右为20px，下为30px

    /* 清楚标签默认的amrgin和padding */
    /* 就是清楚网页中默认的间隙 */
    *{
        margin: 0;
        padding: 0;
    }

盒子模型-内边距：padding
    padding：10px--->上下左右都为10px
    padding：10px 20px--->上下为10px，左右为20px
    padding：10px 20px 30px--->上为10px，左右为20px，下为30px
    padding：10px 20px 30px 40px--->上为10px，右为20px，下为30px，左为40px
    pading-方位：数值+px
box-sizing：boeder-box--->自动消减多出来的边距

透明度------filter:opacity(80%)

  display: flex;------------------------------->横向布局
  justify-content: space-around;------------->分布布局

//**下面这个网站是position的完整解说！！！
https://www.w3school.com.cn/css/css_positioning.asp

位置布局（应用于元素的定位方法的类型）：position
一般于top、right、bottom、left一起用于调整
    position：static    不会有特殊的定位方式
    position：relative    根据相对于正常位置（页面）进行定位    
    position：fixed    相对于视口位置，就算滚动，也始终在同一位置
    position：absolute    根据父级元素进行定位
    position：sticky    根据用户的滚动位置进行定位   和fixed有区别

float布局

水平导航连接  display: inline-block;