一些小结汇总

1.常用浏览器及对应内核

    Safari浏览器（苹果浏览器）:Webkit内核
    Google浏览器：Blink内核
    Firefox：Gecko内核
    Edge浏览器：Chromium内核
    IE浏览器：Trident内核

2.10个块标签和10个行标签
    
    块标签：独占一整行
        h1-h6, p , hr ,div ,tbale ,tr, ul ,ol ,dt ,dd li 
                    
    行标签：一行内可以插入多个标签
        b, span ,i ,u ,small ,big ,ins, em , sup,    sub,del
        

3.什么是html属性
    
    html属性 ：给html元素提供的附加信息
    html属性一般描述于开始标签，写在开始标签里
    html属性通常是以  属性名="属性值" 成对出现    
        键值对：key="value"，单键对应单值
    html属性属性名和属性值 ，推荐英文字母小写
    html属性不分主次,不分先后 

4.图片标签的属性 src width height alt title 

    src width height alt title 
    source：源头，
    alt：替换 当图片破损无法正常显示时，替换当前文本
    title：当鼠标悬浮在当前元素时，在鼠标右下角显示文本内容

5.alt title有什么作用

    alt：替换 当图片破损无法正常显示时，替换当前文本
    title：当鼠标悬浮在当前元素时，在鼠标右下角显示文本内容

6.锚链接如何实现

    在需要跳转的位置插入
    <h1 id="locate">跳转地点</h1>

    在跳转按钮处插入
    <a href="#locate">跳转按钮</a>
    

7.字体小图标的实现代码

    <link rel="shorcut icon" type="image/x-icon" href="链接地址">

    link引用标题logo，rel声明该属性与本文档之间的关系，type声明该属性的类型，href属性引用链接地址来实现调用

    

8.form表单的action 和method有什么作用

    action=“链接地址”            链接方式
    method=“get / post”        提交方式
    
9.input有哪些常用的属性

    name：元素名称
    type：定义元素的类型

    value：输入框的预输入值    
    palceholder:提示信息

    checkded：规定预选项
    maxlength：规定用户输入的最大字符长度
    autofocus：自动获取焦点
    
    disabled：禁用
    readonly：只读

10.input的type有哪些属性值

    

    text:文本输入框类型
    password:密码输入框类型 （字符不可见）

    label可以使选框与文字捆绑
    checkbox:多选框  
    radio:单选框 配合name使用 

    file：上传文件
    number:数字输入框

    submit:提交按钮(默认提交)
    reset:重置数据
    button：按钮

    date:日期选择框
    datetime-local:日期加时间
    image:图片类型 (默认提交)

11.textarea如何禁止拉伸

    设置resize=none

12.前端分为哪三层？
    
    结构层HTML：负责搭建网页的基本结构

    表现层CSS：负责设计网页的表现样式

    行为层JS：负责实现网页的交互设计

13.css的选择器及优先级

    通配符选择器：*
    标签选择器：标签名
    class选择器（类选择器）：.+class名
    id选择器：#+id名
    ！important
    
    组合选择器：
        子代选择器：使用>隔开，选择直接子代元素
        后代选择器：使用空格隔开，选择所有符合选择的后代元素    
        相邻兄弟选择器：使用+隔开，选择本元素后的同一父级下的单个元素
        后续兄弟选择器：使用~隔开，选择本元素后的同一父级下同种的多个元素
        多个元素选择器：使用，隔开，可以同时选择多个不同级别和标签的元素

    ！important（10000）>id选择器（100）>class选择器（10）>标签选择器（1）>通配符选择器
        组合选择器计算为属性值权重的相加
    

14.文本样式有哪些属性
    
    color：颜色
    text-align：水平对齐方式
    line-height：行高
    vertical-align：垂直对齐方式
    text-decoration：定义文本修饰线
    text-index：首行缩进
    text-shadow：文本阴影
    letter-spacing：文本间隔
    word-spacing：字体间距
    text-transform：元素字母的大小写

    unicode-bidi：返回文本是否重写
    （unicode-bidi：bidi-override）
        {
            direction:rtl;
            <--定义文本的重写方向，从右往左-->
        }

    white-spacing：设置元素中空白的处理方式（多用于设置空格等空白间隔的解析方式）

15.链接属性有哪些？顺序

    ：link
    ：hover
    ：active
    ：visited

16.字体属性有哪些？

    font-size：字体大小
    font-style：字体样式
    font-weight：字体粗细
    font-family：字体系列
    

17.背景属性有哪些？

    bgcolor：背景色
    bgimg:背景图

        基于背景图片实现
        bgsize：背景图显示大小
        bgposition：背景图相对于原图所显示的位置
        bgreport：背景是否重复
        background-attachment：背景图是否随着页面滚动而进行滚动

18.什么是盒模型？box-sizing有哪些值？有什么区别

    在html中规定网页元素如何显示，元素与元素之间的相互关系
    
    box-sizing
        content-box：标准盒模型（W3C标准)
            盒子宽高为 内容+内边距+边框 的和

        border-box：怪异盒模型（IE浏览器默认标准）    
            盒子的宽高直接为所设置的宽高，包含了内容宽高，内边距宽高，外边距宽高，更适合由外向里布局
            直接定义固定宽高并对内容的宽高进行挤压，来限定内容的位置或写入一个固定的盒子

19.如何隐藏元素？有什么区别

    （1）display:none：直接使文本脱离标准文档流，不占据具体位置，导致页面重新排序，需使用display：block来进行显示
                    子元素无法继承，但是会被隐藏，具有单独的display属性，无法脱离父元素单独显示
                    因元素本身不占据位置且隐藏，导致无法触发事件
                    无法触发transition的动画效果

    （2）visibility：hidden：不会脱离文档流，元素隐藏时占据页面位置，需要使用visibility：visible来进行显示
                    子元素会继承该属性，跟随父元素进行隐藏，且可设置单独的visibility属性，可以脱离父元素进行单独显示
                    该元素也无法触发事件（暂认为该元素的隐藏方式为“徒留其形”，“可闻不可见”占据本身文档流但不具备被交
                                       互的能力，但自身所占据的排序等不被影响，类似于插入一个无法进行的交互的iform窗口）
                    可以触发transition的动画效果，但是较为鸡肋

    （3）opacity：0 ：不会脱离文档流，元素隐藏时占据页面位置，需要改变opacity的属性值
                    子元素会继承该属性并在其基础上叠加，不可脱离父元素单独显示，同样具有opacity属性
                    该元素可以触发事件，且可以触发transition动画

20.浮动的作用？弊端？如何清除浮动？
        
    让元素显示在同一行内

    会导致父元素高度塌陷，会脱离文档流导致网页格式错误

        在最后一个浮动元素侯建加入一个空的块级元素并赋予样式 clear：both
        给浮动元素的父元素设置 overflow: hidden; 或 overflow: auto; 属性，通过触发BFC（块级格式化上下文）来清除浮动。
        给父元素设置高
        给父元素设置伪元素 ：after/ :before
                        {
                            content：‘’”；
                            display:block;
                            clear:both;
                            overflow:hidden
                        }
    

21.定位有哪些值？有什么区别

    position    指定了元素的定位类型

        relative    生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素
                不脱离文档流，占据位置

        absolute    生成绝对定位的元素，相对于第一个设有position的父元素进行定位。
            元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 
            脱离标准文档流  不占位置  

        fixed        生成固定定位的元素，相对于浏览器窗口进行定位。
            元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。   
            脱离标准文档流  不占位置

        sticky:吸顶效果

            top:定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
            right:定义了定位元素右外边距边界与其包含块右边界之间的偏移。
            bootom:定义了定位元素下外边距边界与其包含块下边界之间的偏移。
            left:定义了定位元素左外边距边界与其包含块左边界之间的偏移。
            z-index:元素的在z轴的前后顺序

22.弹性布局有哪些属性
    
    flex-direction：子级的排列方向
    flex-wrap：定义换行
    justify-content：主轴对齐方式
    align-items：单轴对齐方式
    align-content：多轴对齐方式
 
23.响应式布局如何实现

    通过以下方式实现
        @media 设备  and （区间） and （区间）
        {
            CSS样式
        }

24.px % vh vw em rem分别代表什么

    px：像素
    %：相对于父级元素的百分比
    vh：相对于屏幕的高
    vw：相对于屏幕的宽
    em：相对于父级元素的大小
    rem：相对于根元素的字体大小

25.图片留白如何解决
    
    图片独占一行时：设置    display：block / float:left 即可
    一行多张图片时：display：flex
                float：left
                font-size：0

26.超出文本显示...

27.盒子绝对居中（自身宽高已知和自身宽高未知）

    子元素宽高已知：

    子元素宽高未知：设置position：absolute，四个位置设为0，margin为auto

    宽高未知：设置position：absolute   top：50%； left：50%；
            使用平移transform：translate（-50%，-50%）平移自身-50%的距离
        

28.满屏的品

<!DOCTYPE html>
    <html>
        <head>
            <title>满屏的品</title>
            <style>
                *    {
                        margizn:0;
                        padding:0;
                        list-style:none;
                        text-decoration:none;
                    }
                div
                    {
                        width:20vh;
                        height:20vh;
                        background-color:skyblue;
                        position:fixed;
                    }
                .d1
                    {
                        top:0;
                        transform:translateX( calc(50vw - 50%));
                        
                    }
                .d2
                    {
                        bottom:0;
                        left:0;
                    }

                .d3
                    {
                        bottom:0;
                        right:0;
                    }

            </style>
        </head>

        <body>
            <div class="d1"></div>
            <div class="d2"></div>
            <div class="d3"></div>
        </body>
    </html>

29.h5有哪些新特性

    1.语义化标签：就是使用合理，正确标签来展示内容（用正确的标签做正确事）。
                有利于搜索引擎优化（SEO）,搜索引擎爬虫会根据不同标签来赋予不同权重。
                header 头部标签
                nav  导航标签
                main 主体内容
                article 内容标签
                section  块标签  类似于div 
                aside 侧边栏标签
                footer 尾部标签

        2. h5新增多媒体标签 视频 音频
                audio:音频
                    src:需使用音频地址
                    controls 控制组件
                    autoplay 自动播放
                    loop 循环播放
                video:视频 
                    src:需使用视频地址
                    controls 控制组件
                    width 视频宽
                    height 视频高
                    autoplay 自动播放
                    loop 循环播放
                    preload 是否等待加载完播放
                        auto:一边加载一边播放
                        metadata：加载完后在播放
                        none：页面加载完后不加载视频
                    poster 页面加载时等待的画面图片
                    muted 静音  
                    
        3. h5 新增 input 表单属性 :
                required 属性 : 一旦设置了该属性 , 则表单的内容就是必填项 , 不能为空 
                placeholder 属性 : 用于设置表单的提示信息
                multiple 属性 : 可以 选择多个文件提交 
                autofocus 属性 : 设置了该属性 , 可以自动进行聚焦
                autocomplete 属性 : 属性值为 off / on , 浏览器会记录之前输入的值,默认值是 on , 自动补全默认是打开的 ;使用自动补全 , 需要满足以下两                个条件 :为表单添加 name 属性,自动补全的内容需要之前提交成功过

30.css3有哪些新特性