css前端面试题（二）

原理是：动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入

由于同源策略的限制，xmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务器输出JSON数据并执行回调函数，从而解决了跨域的数据请求

优点是兼容性好，简单易用，支持浏览器与服务器双向通信。缺点是只支持GET请求

1.2CORS

服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问

1.3通过修改docunment.damain来跨子域

将子域和主域的document.domain设为同一个主域。前提条件：这两个域名必须属于同一个基础域名，而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域

主域相同的使用document.domain

1.4使用window.name来进行跨域

window对象有个name属性，该属性有个特征：即在一个窗口（window）的生命周期内，窗口载入的所有页面都是共享一个window.name的，每个页面对window.name都有读写权限，window.name是持久存在一个窗口载入过的所有页面中的

二、前端如何优化网站性能？

2.1减少HTTP请求数量

在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。

精灵图

将多张图片合并成一张图片达到减少HTTP请求的一种解决方案，可以通过CSS的background属性来访问图片内容。这种方案同时还可以减少图片总字节数。

合并css和js文件

现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 HTTP 请求数量，可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。

懒加载（lazyLoad）

可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。

2.2控制资源文件加载优先级

浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将CSS提前加载，不要受 JS 加载影响。

一般情况下都是css在头部，js在底部

2.3利用浏览器缓存

浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。

2.4减少DOM操作（vue这种减少操作DOM）

2.5图标使用IconFont替换image标签

三、说一下你对css盒子模型的理解

图中最内部的框是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距padding，其次是边框（border），然后最外层是外边距（margin），整个构成了盒模型。

通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距margin是透明的，不会遮挡周边的其他元素。

元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；

元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值＋ border的上下宽度。

box-sizing:border-box;和box-sizing:content-box;的区别

box-sizing:content-box 属性下的内容，假设,设置固定的宽高 100px 时候，这是内容还有border：5px padding：10px 这是这个内容就占据了 100px+10px+5px 的空间内容

使用 box-sizing:border-box 的时候，内容设置固定的宽高100px时，border边框 padding 内边距设置数值是，内容所占据的空间还是100px

与IE盒子模型的不同点

元素宽度计算方式不一样

在标准盒模型中，元素宽度 = width + padding + border + margin。
怪异(IE)盒模型中，元素宽度 = width + margin

标准浏览器通过设置 css3 的 box-sizing: border-box 属性，触发“怪异模式”解析计算宽高

四、解释一下css sprites原理，优缺点

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中

利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

优点：

减少网页的http请求

缺点：

在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂

CSS Sprites在开发的时候，要通过photoshop或其他工具测量计算每一个背景单元的精确位置

在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片

五、css盒子的margin中的合并和塌陷问题如何解决？

外边距塌陷:

当嵌套的两个块元素,给子盒子加向上的外边距时,
父盒子会跟着掉下来,此时就是外边距塌陷.
解决方案:
1.给父盒子加padding
2.给父盒子加上边框
3.给父元素加overflow:hidden 属性

嵌套盒子垂直外边距合并方案:

给父亲上边框
border: 1px solid transparent
给父亲内边距
padding-top: 1px;
给父元素添加 overflow: hidden
子元素添加 position:absolute/relative 或 float

六、如何用css绘制一个实心三角？

.triangle {
    width : 0;
    height: 0;
    border : 100px solid transparent;
    border-top : 100px solid blue; /*这里可以设置border的top、bottom、left、 right四个方向的三角*/
}

七、css3新增属性

圆角（border-radius）
边框图像（border-image ）
背景图片（background-image）
背景尺寸（background-size）
背景图像的位置（background-origin）
线性渐变（linear-gradient）
径向渐变（radial-gradient）
文字阴影（text-shadow）
盒子阴影（box-shadow）
文字溢出（text-overflow）
文字换行（word-wrap）
2D转换（transform）
3D转换（transform）

7.1圆角（border-radius）

border-radius 属性实际上是以下属性的简写属性：

border-top-left-radius 左上
border-top-right-radius 右上
border-bottom-right-radius 右下
border-bottom-left-radius 右上

border-radius 属性可以接受一到四个值。规则如下：

四个值 - border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角）：

三个值 - border-radius: 15px 50px 30px;（第一个值用于左上角，第二个值用于右上角和左下角，第三个用于右下角）：

两个值 - border-radius: 15px 50px;（第一个值用于左上角和右下角，第二个值用于右上角和左下角）：

一个值 - border-radius: 15px;（该值用于所有四个角，圆角都是一样的）：

7.2边框图像（border-image ）

border-image 属性允许您指定要使用的图像，而不是包围普通边框。

该属性有三部分：

用作边框的图像
在哪里裁切图像
定义中间部分应重复还是拉伸

属性	描述
border-image	用于设置所有border-image属性的简写属性
border-image-source	规定用作边框的图像的路径
border-image-slice	规定如何裁切边框图像
border-image-width	规定边框图像的宽度
border-image-outset	规定边框图像区域超出边框盒的量
border-image-repeat	规定边框图像应重复、圆角、还是拉伸

7.3背景

css多重背景（background-image）

不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者。

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

简写：

#example1 {
  background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

css背景尺寸（background-size）

可以通过长度、百分比或使用以下两个关键字之一来指定背景图像的大小：contain 或 cover

contain 关键字将背景图像缩放为尽可能大的尺寸（但其宽度和高度都必须适合内容区域）。这样，取决于背景图像和背景定位区域的比例，可能存在一些未被背景图像覆盖的背景区域。

cover 关键字会缩放背景图像，以使内容区域完全被背景图像覆盖（其宽度和高度均等于或超过内容区域）。这样，背景图像的某些部分可能在背景定位区域中不可见。

定义多个背景图像的尺寸

在处理多重背景时，background-size 属性还可以接受多个设置背景尺寸的值（使用逗号分隔的列表）。

三幅图像：

#example1 {
  background: url(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat, 
  	url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

全尺寸背景图像

网站上的背景图像始终覆盖整个浏览器窗口

用图像填充整个页面（无空白）
根据需要缩放图像
在页面上居中图像
不引发滚动条

html {
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

指定背景图像的位置（background-origin）

该属性接受三个不同的值：

border-box - 背景图片从边框的左上角开始
padding-box -背景图像从内边距边缘的左上角开始（默认）
content-box - 背景图片从内容的左上角开始

7.4渐变

CSS 渐变使您可以显示两种或多种指定颜色之间的平滑过渡。

线性渐变（linear-gradient）（向下/向上/向左/向右/对角线）

定义至少两个色标。色标是您要呈现平滑过渡的颜色。您还可以设置起点和方向（或角度）以及渐变效果。

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

默认是从上到下

#grad {
  background-image: linear-gradient(red, yellow);
}

to……去

从左到右：

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

从左上到右下：

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

使用角度：

对渐变角度做更多的控制

定义一个角度，来取代预定义的方向（向下、向上、向右、向左、向右下等等）。值 0deg 等于向上（to top）。值 90deg 等于向右（to right）。值 180deg 等于向下（to bottom）。

#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

使用多个色标：

彩虹色

#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}

使用透明度：

添加透明度，我们使用 rgba() 函数来定义色标。 rgba() 函数中的最后一个参数可以是 0 到 1 的值，它定义颜色的透明度：0 表示全透明，1 表示全彩色（无透明）。

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

重复线性渐变repeating-linear-gradient()：

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

径向渐变（radial-gradient）（由其中心定义）

shape 为椭圆形，size 为最远角，position 为中心

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

默认为均匀间隔的色标

#grad {
  background-image: radial-gradient(red, yellow, green);
}

不同间距的色标

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

设置形状：

shape 参数定义形状。它可接受 circle 或 ellipse 值。默认值为 ellipse（椭圆）。

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

大小不同的关键字：

size 参数定义渐变的大小。它可接受四个值：

closest-side
farthest-side
closest-corner
farthest-corner

重复径向渐变repeating-radial-gradient()：

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

7.5阴影

文字阴影（text-shadow）

用法：text-shadow:水平阴影px,垂直阴影px,模糊效果px,阴影颜色

在文本周围创建纯边框（无阴影）：
h1 {
  color: yellow;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

盒子阴影（box-shadow）

用法：box-shadow:水平阴影px,垂直阴影px,模糊效果px,阴影颜色

7.6文本效果

文字溢出（text-overflow）

可以被裁剪

p.test1 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip; 
}

可以呈现为省略号

p.test2 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis; 
}

鼠标悬停显示溢出内容

div.test:hover {
  overflow: visible;
}

文字换行（word-wrap）

//允许长单词被打断并换行到下一行：
p {
  word-wrap: break-word;
}

换行规则（word-brank）

//此行将连字符打断：
p.test1 {
  word-break: keep-all;
}

//这些行将在任何字符处中断：
p.test2 {
  word-break: break-all;
}

7.7 2D转换（transform）

translate() 方法

平移，从之前的位置平移

向右50px,向下100px

div {
  transform: translate(50px, 100px);
}

rotate() 方法

旋转，根据给定的角度进行顺时针或逆时针旋转

//顺时针用正值
div {
  transform: rotate(20deg);
}
//逆时针用负值
div {
  transform: rotate(-20deg);
}

scale() 方法

缩放，增加或减少元素的大小

//增加宽度为原始2倍，高度为3倍
div {
  transform: scale(2, 3);
}
//减少为原始高度和宽度的一半
div {
  transform: scale(0.5, 0.5);
}

scaleX() 方法

改变宽度

//改变为原来宽度的2倍
div {
  transform: scaleX(2);
}
//改变为原来宽度的一半
div {
  transform: scaleX(0.5);
}

scaleY() 方法

改变高度

//改变为原来高度的3倍
div {
  transform: scaleY(3);
}
//改变为原来宽度的一半
div {
  transform: scaleY(0.5);
}

skewX() 方法

倾斜，沿着X轴倾斜

div {
  transform: skewX(20deg);
}

skewY() 方法

倾斜，沿着Y轴倾斜

div {
  transform: skewY(20deg);
}

skew() 方法

倾斜，根据X轴Y轴给定的值倾斜

div {
  transform: skew(20deg, 10deg);
}

matrix() 方法

把所有 2D 变换方法组合为一个

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

matrix(改变宽度，改变高度，沿X轴倾斜，沿Y轴倾斜，沿X轴平移，沿Y轴平移)

7.8 3D转换（transform）

rotateX() 方法

使元素绕其 X 轴旋转给定角度

#myDiv {
  transform: rotateX(150deg);
}

rotateY() 方法

使元素绕其 Y 轴旋转给定角度

#myDiv {
  transform: rotateY(130deg);
}

rotateZ() 方法

使元素绕其 Z 轴旋转给定角度

#myDiv {
  transform: rotateZ(90deg);
}

八、px，em，rem的区别？

px:相对长度单位。像素px是相对于显示器屏幕分辨率而言的

特点：IE无法调整那些使用px作为单位的字体大小

em:是相对长度单位，是像对于当前对象内文本的字体尺寸，如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸

任意浏览器的默认字体高都是16px，所有未经调整的浏览器都符合1em=16px为了简化fomt-size的换算，需要在css中的body选择器中声明font-size=62.5%

这就使em的值变为16px*62.5%=10px，这样12px=1.2em，10px=1em ，也就是说只需要将你原来的px数值除以10，然后换上em为单位就行了

em特点：

1.em的值不是固定的

2.em会继承父级元素的字体大小

注意：

1.body选择器中声明font-size=62.5%，将你原来的px数值除以10，然后换上em为单位就行了

2.避免字体大小重复声明

rem是css3新增的一个相对单位

rem是相对html根元素，可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有的字体大小，又可以避免字体大小逐层复合的连锁反应

目前出来IE8及更早版本外，所有浏览器都支持rem

对于不支持的浏览器就多写一个绝对单位的声明，这些浏览器就会忽略用rem设定的字体大小

九、display：inline-block什么时候会出现间隙？及解决办法。

元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。

*{
   margin: 0;
   padding: 0;
}        
.small{
   width: 100px;
   height: 100px;
   background-color: aqua;
   display: inline-block;
}

<div class="big">
        <div class="small">small1</div>
        <div class="small">small2</div>
    </div>

解决办法:

1.解决元素之间的空白元素

//将所有子元素写在同一行
<div class="big">
     <div class="small">small1</div><div class="small">small2</div>
</div>

2.为父元素设置font-size：0，在子元素上重新设置font-size

        *{
            margin: 0;
            padding: 0;
        }
        .big{
            font-size: 0;
        }
        .small{
            width: 100px;
            height: 100px;
            background-color: aqua;
            display: inline-block;
            font-size: 16px;
        }

3.为inline-block元素添加float：left

缺点：float布局会有高度塌陷的问题

4.设置子元素margin-left值为负数

缺点：元素之间间距的大小与上下文字体大小相关；并且同一大小的字体，元素之间的间距在不同浏览器下是不一样的，所以不同浏览器下margin-left的负值是不一样的，因此这个方法不通用

5.设置父元素，display:table和word-spacing

        .big{
            display: table;
            word-spacing: -1em;
        }

十、css3的伸缩盒子

display：flex给父元素设置这个属性，子元素都会成为伸缩项

主轴：justify-content

flex-start（默认）弹性盒子向起始位置对齐

flex-end弹性盒子向结束位置对齐

center弹性盒子居中

space-around环绕对齐

space-between两端对齐

侧轴： align-items

flex-start(默认)靠上对齐

flex-end靠下对齐

center居中

stretch拉伸填满整个侧轴

换行：flex-wrap

nowrap（默认）不换行

warp换行

元素的排列方向:flex-direction

row(默认)横向为主轴竖向为侧轴

column横向为侧轴竖向为主轴

剩余元素空间占比：flex-grow

0（默认）元素不会去占用剩余空间

ʚ浅初.ɞ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css前端面试题（二）

1.如何解决跨域问题2.前端如何优化网站性能3.对css盒模型的理解4.css sprites原理以及优缺点5.css盒子的margin中的合并和塌陷问题6.css绘制实心三角形7.css3新增属性8.px，em，rem的区别？9.display：inline-block什么时候会出现间隙？及解决办法。10.css3的伸缩盒子
复制链接

扫一扫