(H5+CSS3一些非常基础的基础面试题)
1 块级元素:
div、p、h1~h6、ul/ol-li、
特点:独占一行
宽度100% 如果没有父元素,宽度相对视口区而言,如有父元素,相对父元素而言。高度则有内部元素决定。可有css直接设置宽高
块级可嵌套行内,行内嵌套行内,不可以嵌套跨级
2 行内元素:
(img 、input特殊行内,可以直接设置宽高)
a、 img 、 span、 strong 、 em 、i
特点:与各种元素同一行
宽高由自身元素内容化决定
行内无法嵌套块级,可以嵌套行内
3 块级和行内的区别:(面试题高频考题)
1 块级无法直接设置宽高,行内由自身元素决定(行内可以由css得display属性取值为:inline-block/block)
span{
display:inline-block;
width:
hight:
}
2 块级独占一行,行内与其他元素共占一行
3 块级可以嵌套行内,行内无法嵌套块级。
3.5 title与h1的区别、b与strong的区别、i与em的区别?
title属性没有明确意义只表示是个标题,H1则表示层次明确的标题,对页面信息的抓取也有很大的影响;
strong是标明重点内容,有语气加强的含义,使用阅读设备阅读网络时:
strong会重读,而B是展示强调内容。
i内容展示为斜体,me表示强调的文本;
Physical Style Elements – 自然样式标签
b, i, u, s, pre
Semantic Style Elements – 语义样式标签
strong, em, ins, del, code
应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。
4 BFC的布局规则:
- 内部的Box会在垂直方向一个接着一个地放置。
- Box垂直方向上的距离由margin决定。属于同一个BFC的两个相邻的Box的margin会发生重叠。
- 每个盒子的左外边框紧挨着包含块的左边框,即使浮动元素也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。
- 计算BFC的高度时,浮动子元素也参与计算。
5 -解决高度塌陷
1.所以在开发中一定要避免出现高度塌陷的问题,我们可以将父元素的高度写死,以避免塌陷的问题出现,但是一旦高度写死,父元素的高度将不能自动适应子元素的高度,所以这种方案是不推荐使用的。
2.可以直接在高度塌陷的父元素的最后,添加一个空白的div,由于这个div并没有浮动,所以他是可以撑开父元素的高度的,然后在对其进行清除浮动,这样可以通过这个空白的div来撑开父元素的高度基本没有副作用。
使用这种方式虽然可以解决问题,但是会在页面中添加多余的结构。
clear属性取值:
none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)
left: 不要找前面的左浮动元素
right: 不要找前面的右浮动元素
both: 不要找前面的左浮动元素和右浮动元素:
3.通过after伪类
可以通过after伪类向元素的最后添加一个空白的块元素,然后对其清除浮动,这样做和添加一个div的原理一样,可以达到一个相同的效果,而且不会在页面中添加多余的div,这是我们最推荐使用的方式,几乎没有副作用。
.clearfix::after{
/添加一个内容/
content: “”;
/转换为一个块元素/
display: block;
/清除两侧的浮动/
clear: both;
}
6 兄弟级清除浮动:
常采用添加空白元素的方法(添加的空白元素为块级元素)
overflow:hidden;
父子级元素清除浮动:
常采用的方法:
1)给父级元素添加overflow:hidden
2)给父级元素添加一个伪元素 ::after
7 水平居中的方法
1 给父元素中的内容进行:text-align: center
2 块级元素中的: margin: 0 auto
3 没给宽度默认子宽度和父元素同等后设置子元素为display:inline-block或者display:inline
或者给父元素设置 text-align:center
4 使用定位:margin-left: -元素宽度的一般 或者 transform:translateX(-50%)
5 使用flexbox布局:给父容器添加display:flex justify-content:center;
**
8 垂直居中的方法:**
1 line-height = 元素行高
2 多行行内元素使用给父元素设置display:table-cell;和vertical-align: middle;即可
3 flex布局中的垂直居中 align-items: center
CSS样式的特点:
1 继承性、
2 层叠性
3 优先级
9 css选择器以及css的排序算法。
css选择器有:
Id选择器、类选择器、标签选择器、伪类选择器、元素选择器、后代选择器、子选择器、通配符选择器、属性选择器、相邻选择器。
CSS优先级算法如何计算?
优先级就近原则,同权重情况下样式定义最近者为准;
载入样式以最后载入的定位为准;
优先级为:
同权重: 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。
!important > id > class > tag
important 比 内联优先级高
-优先级之!important**
作用: 用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升 为最高
注意点:
1.!important只能用于直接选中, 不能用于间接选中
2.通配符选择器选中的标签也是直接选中的
3.!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升
4.!important必须写在属性值的后面,分号前面
5.!important前面的感叹号不能省略
6.但是一般建议不使用"!important",因为它会改变级联的工作方式,使得调试变得困难。
- 优先级权重
作用: 当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高
-权重的计算规则
内联样式,如: style="…",权值为1000。
ID选择器,如:#content,权值为0100。
类,伪类、属性选择器,如.content,权值为0010。
标签选择器、伪元素选择器,如div p,权值为0001。
通配符、复合选择器(+、>、~等)、否定伪类(:not)没有影响,权值为0000。
继承的样式没有权值
-首先先计算选择器中有多少个id, id多的选择器优先级最高
-如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高
-如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高
-如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写 在后面听谁的
也就是说优先级如果一样, 那么谁写在后面听谁的
注意点:
1.只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的
9 .5 css样式的一些基础属性。
块级:div/h1-h6/from/ul/ol/li
行内: span/p/a/b/em/i/br/select/input/strong
html的协议:
10 css盒子模型的基础属性
(1)有两种, IE 盒子模型、W3C 盒子模型;
(2)盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border);
(3)区 别: IE的content部分把 border 和 padding计算了进去;(都没有margin的)
11 flex布局的核心概念、规则、技巧
核心概念:主轴、交叉轴、伸缩盒容器、伸缩盒元素
常用规则:
伸缩盒容器相关规则:display、flex-wrap、flex-direction、align-items、 justify-content
伸缩盒元素相关规则: flex-basic、flex-grow、flex-shrink、flex
使用技巧:
伸缩盒容器常用于列级布局,与浮动布局类似可以将多个块元素在一行 中显示,伸缩盒更简单一些,只需要为容器盒子添加display:flex属性,这个 容器盒子就变成了伸缩盒容器,其子元素伸缩盒元素就会沿着主轴来排列,
默认主轴是x轴,可以通过flex-direction来改变主轴。
12 px.em.rem的关系
px是像素长度单位;em/rem是长度单位,em默认文字大小;rem是根元素大小的单位。
在浏览器中的 1em = 16 px
7 css中可继承的样式:
Font-size/ font-family /color/ text-indent
13 css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
垂直方向:line-height
水平方向:letter-spacing
14 关于 letter-spacing 的妙用知道有哪些么?
答案:可以用于消除 inline-block 元素间的换行符空格间隙问题。
15 display:none 与 visibility:hidden 的区别是什么?
display 隐藏对应的元素但不挤占该元素原来的空间。
visibility: 隐藏对应的元素并且挤占该元素原来的空间。
16 三列布局(中间固定两边自适应宽度)
-
采用浮动布局(左边左浮动,右边右浮动,中间margin:0 宽度值)
-
绝对定位方式(左右绝对定位,左边left0右边right0,中间上同)
-
圣杯布局与双飞翼布局(这个尚未研究 后期追加。)
17 position的值
-
absolute :生成绝对定位的元素, 相对于最近一级的 定位不是 static 的父元素来进行定位;如果没有定位父级,则参照初始包含块进行定位。
-
fixed生成绝对定位的元素,通常相对于浏览器窗口。
-
relative 生成相对定位的元素,相对于其在普通流中的位置进行定位。
-
static 默认值基本的静态定位。没有定位,元素出现在正常的流中
18 li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
行框的排列会受到中间空白(回车\空格)等的影响,因为空格也属于字符,这些空白也会被应用样式,占据空间,所以会有间隔,把字符大小设为0,就没有空格了
19 为什么要初始化CSS样式
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
最简单的初始化方法: * {padding: 0; margin: 0;}
20 css3中animation与transition表示什么意思?
animation表示动画:animation-xxx
transition表示过渡:transition-xxx
21 css中verticle-align规则有什么作用
设置行内元素的垂直对齐方式。
默认取值为baseline,即行内元素默认按照基线来进行排列
22 相对定位、绝对定位、固定定位、粘滞定位、静态定位有什么区别?
从相对点、是否脱离文档流来回答
脱离文档流的是:绝对定位、固定定位、粘滞定位
没有定位属性与效果:静态定位
参考点不同:
相对定位:相对原先自己的位置
绝对定位:相对具有定位属性的上层元素
固定定位:相对浏览器窗口定位
粘滞定位:相对定位+固定定位组合,有临界值
23 什么是响应式网页?如何实现一个响应式网页
响应式网页可以根据用户的访问设备不同而发生自适应变化。
可以通过@media来进行媒体选择,不同的设备尺寸执行不同的css代码。也可以使用bootstrap第三方库来完成响应式布局
24 、em 与rem的区别?
em:相对于当前元素上的字体大小
rem:相对于html元素上声明的字体大小
25 请写出让元素垂直居中的多种布局方法?
通过margin、padding挤压
通过相对定位、绝对定位
通过flex布局display:flex align-items:center
26 在js的面向对象中继承方式有哪几种,分别进行描述?
原型链
借用构造函数
原型链与借用构造函数组合
27 如何实现一个对象的深拷贝?
方法1:使用JSON, var copy = JSON.parse(JSON.stringify(obj));
方法2:第三方库lodash 的cloneDeep
方法3:jQuery 自带的 extend 方法可以用来实现对象的复制
var a = {v1:1, v2:2};
var b = {};
$.extend(b,a);
方法4:自己封装实现
方法5:使用递归函数实现
方法6:Object.assign()方法实现
28 什么是闭包?如何解决闭包打来的内存泄露问题?
闭包是能够访问另一个函数作用域中的变量的函数,闭包的创建方式,就是在一个函数内部创建另外一个函数。
内存泄露问题:主动释放内存空间,在退出函数之前,不用的变量全部删除,赋值为null
29 如何实现浏览器标签页之间的通信
通过本地存储和cookie等存储方式实现。
30 有那些存储,它们区别有那些:
存储方式有三种:
localstorage(本地存储) 、seesionstorage、cookie存储。
Localstorage:长期存储,在浏览器中关闭后不会被丢失。
Seesionstorage:关闭浏览器时会删除掉数据。
Cookie:能够在浏览器中暂时存储一段时间后自动删除。
31 CSS伪类用于向某些选择器添加特殊的效果。
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时,向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
32 HTTP协议的报文格式
http协议有两种报文,一种是请求报文,一种是响应报文。
请求报文格式:分为三段,分别为请求行、请求头、空行、请求尾(其中空行是头和尾之间的隔行 必不可少)。
响应报文格式:状态行、响应头、空行、响应体。
33 浏览器为什么会产生跨域,如何处理跨域问题:
跨域是因为 如果通过qqq.com网站访问kkk.com网站时候,不同域名所造成的,或者是,前后台都在同一域名下所产生的。跨域是浏览器所产生的,这样的设置是为了访问得安全性。
也可以为浏览器访问时不同源所产生跨域,同源是指:域名、协议、端口相同。
处理方法:
CORS(跨域资源共享)
CORS(Cross-origin resource sharing,跨域资源共享)是一个 W3C 标准,定义了在必须访问跨域资源时,浏览器与服务器应该如何沟通。CORS 背后的基本思想,就是使用自定义的 HTTP 头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功,还是应该失败。
JSONP 跨域
由于 script 标签不受浏览器同源策略的影响,允许跨域引用资源。因此可以通过动态创建 script 标签,然后利用 src 属性进行跨域,这也就是 JSONP 跨域的基本原理。
图像 Ping 跨域
由于 img 标签不受浏览器同源策略的影响,允许跨域引用资源。因此可以通过 img 标签的 src 属性进行跨域,这也就是图像 Ping 跨域的基本原理。
document.domain 跨域
对于主域名相同,而子域名不同的情况,可以使用 document.domain 来跨域。这种方式非常适用于 iframe 跨域的情况。
nginx解决跨域问题
使用Nginx转发请求。把跨域的接口写成调本域的接口,然后将这些接口转发到真正的请求地址。
34 什么是同源 你对同源有哪些了解
所谓同源策略,指的是浏览器对不同源的脚本或者文本的访问方式进行的限制。比如源a的js不能读取或设置引入的源b的元素属性。那么先定义下什么是同源,所谓同源,就是指两个页面具有相同的协议,主机(也常说域名),端口,三个要素缺一不可。
同源策略限制的不同源之间的交互主要针对的是js中的XMLHttpRequest等请求,写代码的时候也常常会引用其他域名的js文件,样式文件,图片文件什么的,这些则不会收到限制。
URL1 URL2 说明 是否允许通信
http://www.foo.com/js/a.js http://www.foo.com/js/b.js 协议、域名、端口都相同 允许
http://www.foo.com/js/a.js http://www.foo.com:8888/js/b.js 协议、域名相同、端口不同 不允许
https://www.foo.com/js/a.js http://www.foo.com/js/b.js 域名相同、端口相同、协议不同 不允许
http://www.foo.com/js/a.js http://www.bar.com/js/b.js 协议、端口相同、域名不同 不允许
本文总结了H5和CSS3的基础面试题,包括块级元素和行内元素的区别、BFC布局规则、解决高度塌陷的方法、水平与垂直居中的多种方法、CSS选择器及优先级权重、以及盒子模型、flex布局等关键知识点。同时,探讨了跨域问题的处理方式,如CORS、JSONP等。
1919

被折叠的 条评论
为什么被折叠?



