首页 👨‍💻计算机,💂H5-css3

html5-css3

1、前端页面有哪三层构成,分别是什么?作用是什么?

1、结构层:由 HTML 标记语言负责创建,仅负责语义的表达。解决了页面“内容是什么”的问题。

2、表示层:由CSS负责创建,解决了页面“如何显示内容”的问题。

3、行为层:由脚本(js)负责。解决了页面上“内容应该如何对事件作出反应”的问题

2、主流的浏览器分别是什么内核?

Trident[ˈtraɪdnt]内核:(国产的绝大部分浏览器)IE,360,搜狗

Gecko[ˈɡekoʊ]内核:火狐

Presto[ˈprestoʊ]内核:Opera7[ˈɑːprə]
及以上(欧朋)

Webkit内核:(国产大部分双核浏览器其中一核)Safari[səˈfɑːri]
(苹果),Chrome[kroʊm]

3、如何居中一个浮动元素?

父元素和子元素同时左浮动,然后父元素相对左移动50%,再然后子元素相对右移动50%,或者子元素相对左移动-50%也就可以了。
 <style type="text/css">
        .p{
            position:relative;
            left:50%;
            float:left;
        }
        .c{
            position:relative;
            float:left;
            right:50%;
        }
    </style>
</head>
<body>
    <div class="p">
        <h1 class="c">Test Float Element Center</h1>
    </div>
</body>

4、行内元素有哪些?块级元素有哪些?空元素(void)有哪些?

1、行内元素:a,b,span,img,input,strong,label,button,select,textarea,em

2、块级元素:div,ul(无序列表),ol,li,dl(自定义列表),dt(自定义列表项),dd(自定义列表项的定义),p,h1-h6,blockquote(块引用)

3、空元素(void):即没有内容的HTML元素。br(换行),hr(水平分割线),meta,link,input,img

5、BFC(Block Formatting Context,块级格式化上下文)

1、是什么:决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。简言之,就是一个特殊的块,内部的元素和外部的元素不会相互影响。BFC内的盒子会在垂直方向上一个接一个地放置,垂直方向上也会发生外边距重叠。

2、应用场景:自适应布局(BFC不与float box重叠)、清除浮动(计算BFC的高度时,内部的浮动元素也被计算在内)、防止外边距重叠

3、如何触发BFC:float属性(不为none)、overflow属性(不为visible)、position属性(absolute,fixed)、display属性(inline-block,table-cell,table-caption,flex,inline-flex)

6、CSS选择器的优先级

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 

7、初始化CSS样式的意义

1、为什么要初始化CSS样式:因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没有对CSS初始化往往会出现浏览器之间的页面显示差异。

8、HTML5新特性

1. 语义化标签: header nav section article aside footer
2. 多媒体标签: video audio
3. input类型: number search email tel date file time  url
4. 本地离线存储 localStorage 长期存储数据,改变浏览器数据不会丢失
              sessionStorage 浏览器关闭数据会丢失
5. 自定义属性 data-*
6. 画布 Canvas
7. webscoket 双向通信协议

9、CSS3新特性

1. 圆角 border-radius
2. 盒子模型 box-sizing
3. 阴影 box-shadow 盒子阴影  text-shadow 文字阴影
4. 过渡 transition
5. 2D转换transform  translate(平移) scale(缩放)  skew(斜切) rotate(旋转) transform-origin 控制转换中心点
6. 3D转换 perspective(透视距)  transform-style(3D控件效果)
7. 渐变 linear-gradient radial-gradient
8. 弹性布局 flex
9. 媒体查询 @media screen and () {...}
10. 边框图片 border-image
11. 自定义动画 @keyframes    animation
12. 颜色 新增RGBA HSLA模式
13. 背景 background-size   background-origin   background-clip

10、对HTML语义化的理解

1、用正确的标签做正确的事情

2、HTML语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析

3、即使在没有样式CSS情况下也以一种文档格式显示,并且是易于阅读的

4、搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO

5、使阅读源代码的人更容易将网站分块,便于阅读维护理解

11、CSS的盒子模型

1、有两种, IE 盒子模型、W3C 盒子模型;
2、盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border);
3、区 别: IE的content部分把 border 和 padding计算了进去;

12、如何居中div

1、 水平居中:给div设置一个宽度,然后添加margin:0 auto属性
 
        div{
            width:200px;
            margin:0 auto;}
2、让绝对定位的div居中
 
        div {
            position: absolute;
            width: 300px;
            height: 300px;
            margin: auto;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: pink; } 
 3、水平垂直居中一
 
        确定容器的宽高 宽500 高 300 的层
        设置层的外边距
 
        div {
            position: relative;        /* 相对定位或绝对定位均可 */
            width:500px;
            height:300px;
            top: 50%;
            left: 50%;
            margin: -150px 0 0 -250px;         /* 外边距为自身宽高的一半 */
            background-color: pink;         /* 方便看效果 */
 
         }
 4、水平垂直居中二
 
        未知容器的宽高,利用 `transform` 属性
 
        div {
            position: absolute;        /* 相对定位或绝对定位均可 */
            width:500px;
            height:300px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: pink;         /* 方便看效果 */
 
        }

5、水平垂直居中三
 
        利用 flex 布局
        实际使用时应考虑兼容性
 
        .container {
            display: flex;
            align-items: center;         /* 垂直居中 */
            justify-content: center;    /* 水平居中 */
 
        }
        .container div {
            width: 100px;
            height: 100px;
            background-color: pink;        /* 方便看效果 */
        }  

13、什么是重绘和重排

1、重排: 当DOM元素影响了元素的几何属性(例如宽和高),浏览器需要重新计算元素的几何属性,同样其它元素的几何属性也会和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树。这个过程称为“重排”。
2、重绘: 完成重排后,浏览器会重新绘制受影响的部分到屏幕上中,该过程称为“重绘”。
    
    当我们改变DOM的大小,增加删除都会导致重排,当给DOM元素改变颜色的时候,会导致重绘,重排一定会重绘,重绘不会重排。重排会影响性能,所以我们尽快能的减少重排的操作

14、px/em/rem有什么区别

1、px 是固定的像素,一旦设置了就无法因为适应页面大小而改变
2、em 和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局
3、em 相对自身font-size,没有则相对于父元素,rem相对于根元素的font-size

15、rem布局的原理

1、rem 是css的相对单位,rem缩放是相对根元素字体大小.
2、rem 布局的本质是等比缩放,一般是基于宽度。
3、rem 会配合媒体查询(或js动态获取屏幕宽度)来一起使用,来实现屏幕的适配。

JS部分

1、盒子塌陷的原因?解决方式

原因: 1. 浮动导致的塌陷,浮动会脱落标准流
         2. 嵌套的两个盒子,子盒子设置margin-top会导致父盒子一下下移
解决方法:第一种情况 1 清除浮动;  2 给父盒子加高度;  3 给父元素添加overflow:hidden
        第二种情况 1 给父元素加上边框; 2 给父元素添加overflow:hidden

2、不定宽高的div水平垂直居中

答: 1、父元素添加 position: relative
        div{
            position:absolute;
            top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
        }
    2、div {
       display: flex;
       justify-content:center; //子元素水平居中
       align-items:center; //子元素垂直居中
     }
      
    3、#box {
        width: 100px;
        height: 100px;
        position: relative;
    }

    #content {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }

3、css写一个三角形

答: div {
      width: 0;
      height: 0;
      border: 20px solid transparent;
      border-width: 40px 20px 0 0;
      border-right-color: #f99;
    }

4、css选择器的优先级

答: !important>行内样式>id选择器>类/属性/伪类选择器>伪元素/标签选择器>通配符选择器*

5、px、em和rem的区别

答: px 是固定单位,  
    em 是相对单位,相当于当前文字的大小,如果没有就找父元素
    rem 也是相对单位,相对于html的fontsize的大小

6、什么是重绘和重排

答:
    重排: 当DOM元素影响了元素的几何属性(例如宽和高),浏览器需要重新计算元素的几何属性,同样其它元素的几何属性也会和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树。这个过程称为“重排”。
    重绘: 完成重排后,浏览器会重新绘制受影响的部分到屏幕上中,该过程称为“重绘”。
    
    当我们改变DOM的大小,增加删除都会导致重排,当给DOM元素改变颜色的时候,会导致重绘,重排一定会重绘,重绘不会重排。重排会影响性能,所以我们尽快能的减少重排的操作

7、flex常用的容器属性

答:
1. flex-direction: 设置容器中的主轴方向
2. flex-wrap: 项目在主轴方向上是否换行显示
3. justify-content: 设置容器中的项目在主轴上的对齐方式
4. align-items: 单行项目在侧轴上的排列方式
5. align-content: 多行项目侧轴上的对齐方式
6. flex-flow: 是flex-direction和flex-wrap的合写, 默认值为row nowrap

8、如何设置比12px更小的字体

答:
   p {
        font-size:12px;
        -webkit-transform:scale(0.8);
    }

9、H5新增了那些特性

答: 
1. 语义化标签: header nav section article aside footer
2. 多媒体标签: video audio
3. 表单控件: number search email tel date file time  url
4. 本地离线存储 localStorage 长期存储数据,改变浏览器数据不会丢失
              sessionStorage 浏览器关闭数据会丢失
5. 自定义属性 data-*
6. 画布 Canvas
7. 拖拽释放 (Drap and Drap) API ondrop
8. 新的技术文本 webworker
9. 地理位置 (Geolocation) API

10、C3新增了那些特性

答:
1. 圆角 border-radius
2. 盒子模型 box-sizing
3. 阴影 box-shadow 盒子阴影  text-shadow 文字阴影
4. 过渡 transition
5. 2D转换transform  translate(平移) scale(缩放)  skew(斜切) rotate(旋转) transform-origin 控制转换中心点
6. 3D转换 perspective(透视距)  transform-style(3D控件效果)
7. 渐变 linear-gradient radial-gradient
8. 弹性布局 flex
9. 媒体查询 @media screen and () {...}
10. 边框图片 border-image
11. 自定义动画 @keyframes    animation
12. 颜色 新增RGBA HSLA模式
13. 背景 background-size   background-origin   background-clip

11、js的数据类型有哪些

答: 简单数据类型: number string boolean undefined   null
    复制数据类型: object  function  array

12、typeof返回的数据类型

答: number string boolean undefined  object  function 
   特殊情况:
   typeof null -->object
   typeof array -->object
   typeof typeof 任何类型  -->string

13、返回false的情况有哪些

答: 0  ""   null  false  NaN  undefined  不成立的表达式

14、对this的理解

答: this是个关键字,它的指向和函数的调用方式有关
1. 函数调用模式, this指向window
2. 构造函数调用模式, this指向新创建的实例对象
3. 方法调用模式, this指向调用方法的对象
4. 上下文调用模式, call和apply方法中, this指向方法内的第一个参数
                  bind方法中, bind创建的新函数的this绑定为bind方法中新的函数
5. 在事件处理函数中,this指向触发事件的当前元素
6. 定时器中,this指向window
7. 箭头函数中没有this指向问题,它的this和外层作用域的this保持一致
8. 匿名函数中的this总是指向window

15、==和===的区别

答:== 表示是相等,只比较内容
   === 表示是全等,不仅比较内容,也比较类型

16、null和undefined的区别

答:null 表示空值 没有获取到。typeof null 返回"object"
   undefined 表示未定义,声明没有值。typeof undefined 返回"undefined"

17、localStorage、sessionStorage和cookie的区别

答: 共同点: 都可以用来存储数据。
    区别: 
    1. 请求不同: 
        cookie 数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。
        sessionStorage 和 localStorage不会自动把数据发给服务器,仅在本地保存。
    2. 存储大小限制也不同: 
        cookie 数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。
        sessionStorage 和 localStorage虽然也有存储大小的限制,但比cookie大得多,sessionStorage和localStorage约5M 。
    3. 数据有效期不同: 
         sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持; 
         localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;
         cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。 

18、js的运行机制是什么

答:js是单线程执行的,页面加载时,会自上而下执行主线程上的同步任务,当主线程代码执行完毕时,才开始执行在任务队列中的异步任务。具体如下  
    1.所有同步任务都在主线程上执行,形成一个执行栈。
    2.主线程之外,还存在一个"任务队列(eventloop队列或者消息队列)"。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。
    3.一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。哪些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
    4.主线程不断重复上面的第三步。

19、怎么理解面向对象

答:1、面向对象是一种软件开发的思想和面向过程是相对应的,就是把程序看作一个对象,将属性和方法封装其中,以提高代码的灵活性、复用性、可扩展性。
  2、面向对象有三大特性:封装、继承、多态。
       封装:把相关的信息(无论数据或方法)存储在对象中的能力
       继承:由另一个类(或多个类)得来类的属性和方法的能力
       多态:编写能以多种方法运行的函数或方法的能力
   3、js中对象是一个无序的数据集合或者也可以说是属性和方法的集合,可以动态的添加属性可方法。
   4、js是基于对象,但是也使用了嵌入了面向对象的思想,可以实现继承和封装,这样也可以提供代码的灵活性和复用性。

20、伪数组和真数组的区别

伪数组:
1、拥有length属性
2、不具有数组的方法
3、伪数组是一个Object,真数组是Array
4、伪数组的长度不可变,真数组的长度是可变的

21、那些情况会得到伪数组

1、参数 arguments,
2、DOM 对象列表(比如通过 document.getElementsByTags 得到的列表)、childNodes也是伪数组
3、jQuery 对象(比如 $("div"))

22、let、const、var的区别

1、var声明变量存在提升(提升当前作用域最顶端),let和const是不存在变量提升的情况
2、var没有块级作用,let和const存在块级作用域
3、var允许重复声明,let和const在同一作用域不允许重复声明
4、var和let声明变量可以修改,const是常量不能改变

23、怎么理解事件循环机制

    1、JavaScript 是一门单线程语言.单线程可能会出现阻塞的情况,所js分了同步任务和异步任务。
    2、同步和异步任务分别进入不同的执行环境,同步的进入主线程,即主执行栈,异步的进入 Event Queue(事件队列) 。主线程内的任务执行完毕为空,会去 Event Queue 读取对应的任务,推入主线程执行。 上述过程的不断重复就是我们说的 Event Loop (事件循环)。

24、什么是作用域链

    1、作用域:分全局作用域和局部作用域
    2、在访问一个变量时,首先在当前作用域中找,如果找不到再到外层作用域中找,这样一层一层的查找,就形成了作用域链。

25、for in 和 for of 的区别

1、for…in是遍历数组、对象的key
2、for…of是遍历数组的value
例如:
let arr = ["a","b"];
  1)for (let key in arr) {
  console.log(key);  //0 1
  }
  2)for (let value of arr) {
  console.log(value);  //a b
  }



文章评论

目录