超详细--CSS知识点总结（面试备战必备）

之前CSS讲解的差不多了，想了一想打算把之前出现过或者忘记讲解的一些重要的知识点整合一下，

可以方面小伙伴们再学习CSS或者面试备战复习的时候拿来参考。

里面有很多非常重要的知识点，虽然是基础、但再面试的时候也是经常出现的、面试官一般面试的时候、除了看你的能力之外、更多的还是看你的基础的知识点掌握了多少

砖瓦都没准备多少怎么能够够建立一座大厦呢？是吧！只有把基础的知识点掌握住了，才能能好的将自己所以运用到实战中提升自己的能力

---------------------------------------------------------------------------------------------------------------------

1、html【超文本标记语言】类似于快递上的地址，快递公司根据不同的地址发送目的地
    1. 普通文本与超文本
        普通文本
            纯字符
        超文本
            字符，图片，超链接，视频，音频
        <h1>hello world</h1>
        <p>段落</p>
        <video src="a.mp4"></video>
        <a href="http://www.baidu.com">百度一下</a>
    2. 浏览器由上而下解析html文件，会将标签自动进行转换，变成浏览器页面元素显示
2、开发环境
    编辑器
        vscode、sublime
    浏览器
        firefox、chrome、IE
    服务器
3、B/S架构【浏览器/服务器模式】
    B Browser浏览器
    S Server服务器
    手机、电脑的浏览器  <-->  各类网站(服务器)  <-->  数据库(java/python/nodejs)
    演示资源库
4、html网页
    1. 编写hello world
    2. 结构
        doctype     声明部分 
            html    Html的根元素，用来包含html文档的所有元素
                head    不会显示到浏览器视口中
                    title        显示在浏览器选项卡的标题
                    meta         用于设置元信息，配置
                        charset=utf-8     
                        编码
                            编辑器 UTF-8
                        解码
                            浏览器
                        
                        程序员  编写 
                        浏览器  解析
                body
                    网页主体
    3. 基本语法
        1) 注释 ctrl + /
            <!--注释-->

        2) 元素组成
            开始标签、内容(文本或者子标签)、结束标签
            <div>hello world</div>
            <div>
                <span>hello world</span>
            </div>

        3) 属性
            在开始标签中可以添加属性
                <div 属性名=属性值 属性名=属性值>
                    属性名不区分大小写
                    <div id="one"></div>
                    <div ID="one"></div>

            1. 核心属性【绝大多数标签都可以应用的属性】
                id             文档内部的唯一标识
                class     类
                    <div class="first one">one</div>
                    <div class="first two">two</div>
                    <div class="first three">three</div>
                title     描述
                style     样式，取值为css规则
                    css规则,键值对，键值之间通过冒号分割，规则之间通过分号分割
                    <div id='one' style="color:#333;backgroud:#ededed"></div>

            2. 特有属性【某些标签特有的】
                a
                    href
                    target
                img
                    alt
                    src

        4) 元素分类
            1. 块级元素
                作用：作为页面框架，或者容器。是页面的主体
                特性：
                    1) 独占一行空间
                    2) 默认宽度为100%，默认高度由子元素或者内容决定 
                    3) 可以为其指定宽高 style="width:;height:;" 
                    div     无意义的块元素
                    h1~h3    标题
                        font-size
                        font-weight
                        margin
                    p         段落
                        margin
                    html
                    body
                        margin
                    ul、li     无序列表，列表项    
                        ul
                            margin
                            padding
                            list-style
                        li
                    ol、li      有序列表，列表项
                        ol
                            margin
                            padding
                            list-style
                    dl、dt、dd     有序列表
                        dl
                            margin
                        dd
                            margin

                    H5新增的块元素（语义化标签）
                        header(头)
                        nav
                        article（主体）
                        section (部分)
                        footer（脚）
                        video
                        audio
            2. 行内元素
                作用：点缀网页，填充内容
                特性：
                    1) 与其他行内元素共享一行空间
                    2) 默认宽高由内容决定
                    3) 不能为其指定宽和高
                    4) 行内元素中不可以嵌套块元素，但块元素中可以嵌套行内元素

                span     无意义的行内元素
                a         超级链接
                    默认样式
                        color
                        text-decoration
                        cursor
                    默认事件（js - dom） 点击事件
                    href
                        url
                        相对路径
                        绝对路径
                        锚点

                    target
                        _self   当前页打开
                        _blank  新建选项卡打开

                strong
                bold
                b
                em
                i
                sub
                sup
                ...
            3. 功能元素    （行内元素）
                1) 表格
                    table
                        【属性】border、width、、、、
                        caption     表格标题
                        thead         表头部分
                            tr 
                                th/td
                        tbody         表格主体部分【不可以省略】
                            tr
                                td/th
                                【属性】colspan、rowspan、width、align
                                td/th中可以放任意子元素
                        tfoot         表底部分
                            tr
                                td
                    【注意】：每一行中的列数应该是相等

                2) 表单（前后台交互）
                        <form action="">
                            input
                            select
                            textarea
                        </form>

                        form
                            action     后台接口地址
                            method     请求方式
                                get
                                    参数拼接在url后面，通过?来分割
                                    传递参数较少
                                post
                                    参数存放在请求体中，安全
                                    传递参数更多
                            enctype 编码方式
                                1. enctype='application/x-www-form-urlencoded'
                                    浏览器就会将参数转换为【查询字符串 qs】格式
                                    username=tom&password=123321&
                                2. multipart/form-data
                                    当有附件在表单中的时候，enctype务必设置为这种格式

                        input
                            name:             作为参数中的key
                            value:             作为参数中的value,在按钮中务必指定value值
                            type:
                                text         单行文本框
                                password     密码框
                                submit         提交按钮
                                radio         单选按钮
                                checkbox     复选按钮
                                file         附件选择器
                            checked         单值属性    默认选择
                            placeholder     提示语

                        select
                            option
                                标签中的文本显示在网页中，提交的值应该是option的value值，当这个值没有设定的时候，提交的是标签中的文本
                                <option value="sx">山西</option>

                        textarea
                            多行文本域
                            placeholder 提示语

                        第三方库
                            日期插件
                            地址选择器地址
                            附件上传
                            富文本

                3) H5新增
                    标签
                        progress 进度条
                        output 表示用户动作产生的结果
                        datalist 表示其他控件可用的值
                    属性
                        type
                            date    日期
                            datetime-local     日期时间控件
                            time     时间控件
                            number     数字控件（只能输入数字）
                            range     范围控件（通过控制条可以调整取值）
                            search     搜索控件
                            tel     电话控件
                            url     地址控件
                            color     颜色控件
                            email      email控件
----------------------------------------------------
1、HTML5 中的新特性
    语义化标签：article、footer、header、nav、section
    表单控件：date、time、email、url、search
    音视频：video、audio
    画布：canvas
    本地离线存储：localStorage
2、css3新增属性
    边框：border-radius、box-shadow
    背景：background-size（背景图片的尺寸）
    文本：text-shadow（文本阴影）
    变换：transform
    过渡：transition
    动画：animation
        设置动画关键帧：
            @keyframes animate {
                0% {
                    background-color: white;
                    margin-left:0px;
                }
                100% {
                    background-color: white;
                    margin-left:0px;
                }
            }
        使用动画：
            div {
                width:100px;
                animation:animate 5s infinite;
            }
            animation-name     动画名
            animation-duration     动画时间。
            animation-iteration-count   动画播放的次数
            animation-direction   动画方向

        IE 9 以及更早的版本不支持 animation 属性
3、清除浮动的方式
    什么是浮动：
        元素使用float:left/right;后，会脱离文档流，父级元素因此失去支撑（如果没有设置高度），下面的元素就会忽略父元素开始布局
    常用方式：
        浮动元素的父级元素：overflow:hidden;
        浮动元素的父级元素： ::after{clear:both;content:'';display:block;}
        浮动元素的同级：添加一个空标签，并且设置clear:both;
4、浮动与绝对定位脱离文档流的区别(主要体现在 元素内文本的位置)
    float：其他盒子会无视当前元素，从浏览器左上角开始布局，而盒子内的文本依旧会为浮动的元素让出位置
    绝对定位：其他盒子与盒子内的文本都会无视当前元素，从左上角开始布局
5、盒子模型的区别
    盒子组成
        内容width + padding + border + margin
    通过box-sizing可以设置不同的盒子模型，所以盒模型分为 ：
        box-sizing:content-box  【默认值】  --  气球，大小可以随内容的变化而变化
            内容盒子(W3C标准盒子)
            盒子总宽度 = margin + border + padding + width
        box-sizing:border-box              -- 
        2) 默认宽度为100%，默认高度由子元素或者内容决定 
        3) 可以为其指定宽高 style="width:;height:;" 
    行内元素
        span、a、img、strong、i
        1) 与其他行内元素共享一行
        2) 默认宽高由内容决定
        3) 不能为其指定宽和高
        4) 行内元素中不可以嵌套块元素，但块元素中可以嵌套行内元素
7、如何给行内元素设置宽高   --  将行内元素设置为块级元素、脱离文档流
    1) 使用display
        display:block/inline-block
    2) 使用position
        position:absolute/fixed
    3) 使用float
        float:left/right
8、块级元素如何在父元素中水平垂直居中
    1) 父元素position
        1. 父元素相对定位，子元素绝对定位，子元素margin:auto;top:0;left:0;bottom:0;right:0;  
        2. 父元素相对定位，子元素绝对定位，子元素left:50%,top:50%;margin-left:-子元素一半的宽度;margin-top: - 子元素一半的高度  
    2) 父元素display
        3. 父元素display:flex; justify-content:center; align-items:center，子元素自动居中  （伸缩盒布局）
        4. 父元素display:table-cell; vertical-align:middle; 子元素margin:auto 
9、隐藏元素的方式及区别4
    display:none    浏览器不显示该元素, 也不占据页面空间
    opcity:0    浏览器不显示该元素,但是会占据页面空间，交互事件正常
    visibility:hidden 浏览器不显示该元素,但是会占据页面空间，交互事件失效

    var div = document.getElementById('one');
    div.onclick = function(){
        alert(1)
    }

    注意：当父元素使用opacity改变透明度的时候，子元素也会跟着改变，即使子元素使用opacity:1;也不行
    解决方法：父元素使用rgba

    ==>

    rgba和opacity的区别？
    opacity作用于元素本身以及元素内的所有内容，
    rgba只作用于元素本身，子元素不会继承透明效果。
10、css中link和@import的区别
    1) 所属范围
        @import是 CSS 的语法，只能导入样式
        link是 HTML 的标签，不仅可以加载 CSS 文件，还可以定义 rel 属性
            rel="stylesheet"表示调用外部样式表

    2) 加载顺序
        页面加载时，link标签引入的 CSS 被同时加载
        @import引入的 CSS 将在页面加载完毕后被加载

    3) 兼容性区别
        @import需要IE5+
        link标签，不存在兼容性问题
11、如何让元素使用margin:0 auto，水平居中
    只对块级元素生效，所以margin:0 auto的用法分为三种，分别为
        块级元素：div、h1~h3、ul
            /*对于块级元素，只需要设置width*/
            div{
                width: 200px;
                background-color: #ccc;
                margin:0 auto;
            }

        行内元素：span、a
            /*对于行内元素，需要先设置为块级元素，再加宽度*/
            span{
                display: block;
                width: 100px;
                background-color: red;
                margin:0 auto;
            }

        行内块元素：button、img、input、textarea
            /*对于行内块级元素，需要设置为块级元素，可以不用设置宽度*/
            input{
                display: block;
                margin:0 auto;
            }
12、overflow的三种取值，并说明具体含义
    auto：自适应，内容如果溢出，会自动生成滚动条
    scroll：将超出的内容进行裁剪（也就是不显示），并以滚动条的方式显示超出的内容（若不设置隐藏滚动条，滚动条一直存在）。
    hidden：将超出内容进行裁剪，不会出现滚动条。
---------------------------------------------------------------------------------------------------------

五天假期的五一小长假也结束了，我知道肯定还有很多小伙伴跟我一样还没有休息够(虽然再瘫下去人都要生锈了)，但还是要努力回归到学习和生活中积极向上面对每一天啦！加油代码人！