1.对html css js的理解

html是语义, 是构建网页内容的基础,是超文本标记语言,标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。css 是表现,是一系列格式设置的规则,它们控制网页内容的外观。
javascript是行为,是一种动态类型、弱类型、基于原型的语言,内置支持类型,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。


    2.div和span的区别

    div是块级元素,它不论大小默认占一行,而且可以设置宽高以及外边距
    span是行内元素,它占它自身大小的位置,而且不能设置宽高以及边距
    同时div也可以变为span,通过设置display:inline,这样div将变为行内元素
    span也可以变为div(display:block),这样span将变为块级元素,默认占一行,而且可以设置宽高同时,两者要想实现既可以设置宽高,边距,又可以不占一行,则display:inline-block


      3.position定位方式和默认方式

      默认方式:
      position:static,为默认方式。不能进行z-index 划分层次。
      
      定位方式:
      固定定位 position:fixed  
      不占位,参照物为当前窗口 ,可使用top、right、bottom、left进行定位,不会随着窗口滚动而滚动。
      脱离标准流,变成行内块。
      
      相对定位 position:relative  
      占位,占的是原来的位置,参照物为自身,一般用来做微调,可使用top、right、bottom、left进行定位。
      半脱离标准流,一方面可以使用top、right、bottom、left进行定位,另一方面,行内标签和块级标签的性质没有改变。
      
      绝对定位  position:absolute
      不占位,一般情况下,子级绝对定位,父级相对定位(父级只要有任何一种定位方式即可,用相对定位,因为对别的标签影响最小),让子级固定在父级的某个位置。可使用top、right、bottom、left进行定位。
      脱离标准流,变成行内块。


        4.px和em的区别

        相同点:px和em都是长度单位;
        异同点:px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。


          5.CSS选择器以及权重怎么计算

          css选择器的权重可参考另外一篇博客:https://blog.csdn.net/qq_41638795/article/details/79108799
          
          1) 基本选择器:id,class,标签(如div、span),通配符(*);
          2) 层次选择器:parent > child,prev + next ,prev ~ siblings
          3) 基本过滤器选择器::first,:last ,:not ,:even ,:odd ,:eq ,:gt ,:lt
          4) 内容过滤器选择器: :contains ,:empty ,:has ,:parent
          5) 可见性过滤器选择器::hidden ,:visible
          6)属性过滤器选择器:[attribute] ,[attribute=value] ,[attribute!=value] ,[attribute^=value] ,[attribute$=value] ,[attribute*=value]
          7) 子元素过滤器选择器::nth-child ,:first-child ,:last-child ,:only-child
          8) 表单选择器: :input ,:text ,:password ,:radio ,:checkbox ,:submit 等;
          9) 表单过滤器选择器::enabled ,:disabled ,:checked ,:selected


            6.CSS实现垂直居中有哪些方法

            方法一. 表格布局 display:table-cell
                        给父级元素添加样式: display: table-cell; vertical-align: middle;  使其内的子元素实现垂直居中;
            方法二. 弹性布局display:flex
                        给父级元素添加样式:display:flex; align-item:center;  使其内的子元素实现垂直居中;
            方法三. 绝对定位 position:absolute
                       给父级元素添加样式:position:absolute; top: 0;  right: 0; bottom: 0; left: 0; margin: auto; 使其内的子元素实现垂直居中;
            方法四. display:box
                       给父级元素中添加样式:display: box;display: -webkit-box;-webkit-box-align:center;  使其内的子元素实现垂直居中;
            方法五. 主要针对于img
                        给子元素添加:vertical-align: middle; 给父级元素添加 line-height:height。
            方法六. 针对于单行文本
                        给父级元素添加 line-height:height。


              7.什么是盒子模型

              在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分。这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。 1)盒模型:内容(content)、填充(padding)、边界(margin)、边框(border); 2)有两种,IE 盒子模型、标准 W3C 盒子模型; IE 的 content 部分包含了 border 和 padding。也就是说IE盒模型的高度=2*margin+content.height,而W3C标准盒模型的高度=2*margin+2*border+2*padding+content.height。宽度也是一样的。


                8.行内元素有哪些?块级元素有哪些?空元素有哪些?

                行内元素:a、b、span、img、input、em、strong、button、select、label
                块级元素:div、ul、ol、li、dl、dt、dd、p、h1-h6、header、nav、section、footer
                空元素(没有内容的HTML元素):br、hr、input、img、meta、link


                  9.什么是CSS Hack?

                  欢迎使用,请输入内容...

                  CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
                  
                  简单的说,CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然,我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。


                    10. src和href的区别

                    href(Hypertext Reference的简写) 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,常用的有link、a。如:
                    <link rel="stylesheet" href="css/formStyle.css">
                    <a href="index.html"></a>
                    
                    src(source的简写)是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素,如:
                    <script src="jquery.min.js"></script>
                    <img src="1.jpg " />


                      11.sessionStorage、localStorage和cookie的区别

                      共同点:用于浏览器端存储的缓存数据
                      
                      不同点:
                      (1)、存储内容是否发送到服务器端:当设置了Cookie后,数据会发送到服务器端,造成一定的宽带浪费;web storage,会将数据保存到本地,不会造成宽带浪费;
                      (2)、数据存储大小不同:Cookie数据不能超过4K,适用于会话标识;web storage数据存储可以达到5M;
                      (3)、数据存储的有效期限不同:cookie只在设置了Cookid过期时间之前一直有效,即使关闭窗口或者浏览器;sessionStorage,仅在关闭浏览器之前有效;localStorage,数据存储永久有效;
                      (4)、作用域不同:cookie和localStorage是在同源同窗口中都是共享的;sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面。


                        12.简述同步和异步的区别

                        同步是阻塞模式,异步是非阻塞模式。
                        同步就是指发送一个请求,需要等待返回,然后才能够发送下一个请求,有个等待程;
                        异步是指发送一个请求,不需要等待返回,随时可以再发送下一个请求,即不需要等待。


                          13. css中让元素隐藏的方法

                          1)  opacity:0; //占位
                          2)  visibility:hidden; //占位
                          3)  display:none;  //不占位
                          4)  height:0;overflow:hidden; //不占位
                          5)  position: absolute;top: -9999px;left: -9999px; //将位置设到不可见区域。


                            14.css让超出文字省略的方法

                            //单行多出省略号
                            p{
                                word-wrap: normal; /* for IE */
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                overflow: hidden;
                            }
                             
                            //多行溢出省略号:
                            p{
                                overflow : hidden;
                                text-overflow: ellipsis;
                                display: -webkit-box;
                                -webkit-line-clamp: 2; // 这里修改为要显示的行数
                                -webkit-box-orient: vertical;
                            }


                              15.清除浮动的方法

                              1)使用CSS的overflow属性
                              2)使用带clear属性的空元素
                              3)使用CSS的:after伪元素


                                16.行内块元素之间空白缝隙的问题

                                1)  利用margin 负值,例如margin-left:-8px;
                                2)  把行内块写到一行上去。如<span>1</span><span>2</span>;
                                3)  给父盒子加:font-size:0;
                                4)  利用js来清除缝隙。