屯一波面试题

最新推荐文章于 2022-02-27 00:34:28 发布

徐行莫停

最新推荐文章于 2022-02-27 00:34:28 发布

阅读量241

点赞数

分类专栏：面试题文章标签：前端面试小汇

本文链接：https://blog.csdn.net/qq_35765126/article/details/79313716

版权

面试题专栏收录该内容

10 篇文章 0 订阅

订阅专栏

修改了垂直居中通用方法，父元素需要添加height;
都是同学，我面试碰到的题，都总结一下，万一哪次让我碰到了呢，
后面内容太多，这篇就提一下有什么，具体内容我会另外写篇博文，不然写在一起看起来很费事儿~

1.SEO

seo（Search Engine Optimization）:搜索引擎的优化，具体是指通过网站结构调整、网站内容建设、网站代码优化、以及站外优化等使网站满足搜索引擎的收录排名需求，提高网站前端对于SEO的贡献。（百度）SEO包含站外SEO和站内SEO两方面；SEO是指为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，使网站更适合搜索引擎的索引原则的行为；使网站更适合搜索引擎的索引原则又被称为对搜索引擎优化，对搜索引擎优化不仅能够提高SEO的效果，还会使搜索引擎中显示的网站相关信息对用户来说更具有吸引力。
具体要注意的几点：

合理的title、description、keywords:搜索引擎对于三项的权重逐个减小，
title要强调重点,重要关键词出现不要超过两次而且要靠前，不同的页面要使用不同的title;
description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同的页面要使用不同的description;
keywords列举出重要关键词即可;
(description\keywords属于的属性);
重要的内容一定不要使用js输出：爬虫不会执行js获取内容；
如果图片不是单纯的装饰图片那必须添加alt;
重要内容的HTML房在前面：搜索引擎抓取HTML的顺序是从上而下，而且有的搜索引擎对搜索长度是由限制的；为了避免重要内容被忽略，一定要往前放；
语义化HTML代码，符合W3C标准规范，可以让搜索引擎更加容易理解网页；
提高网站速度：网站加载速度是搜索引擎排序的重要指标；
尽量不要使用iframe标签：搜索引擎抓取不到

CSS布局问题

常用的水平居中、垂直居中，双向居中，多列布局（传统盒模型布局和flex布局）

水平居中

子元素是行内元素 text-align：center；
子元素是定宽块状元素：margin：auto；
通用：父元素设置display：flex；justify-content：center；

垂直居中：

父元素一定，子元素是行内元素（单行），设置父元素line-height和height相等
父元素一定，子元素行内元素（多行）/子元素是块状元素，设置父元素display：table-cell；vertical-align：middle；
通用：给父元素设置height，display：flex；align-items：center;

水平垂直都居中

父元素定宽高、子元素定不定宽高都可以，给父元素设置display：flex；align-items：cnter，子元素设置margin：auto；

        .container {
            width: 300px;
            height: 500px;
            display: flex;
            align-items: center;
            border: 1px solid red;
}
.container div{
    margin: auto;
    border: 1px solid red;
}


</style>
</head>
<body>
</body>
<div class="container">
    <div>1d</div>
    <div>dd</div>
    <div>d</div>


</div>

这里写图片描述
父元素定高不定宽，子元素可以都不定

双向居中2
.container {
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            border:1px solid red ;
}
.container div{
    border: 1px solid red;
}

<div class="container">
    <div>1ddssssssssssddddd</div>
    <div>ddddttttttttttttttttttttttddd</div>
    <div>dddduuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu</div>


</div>

这里写图片描述


垂直居中第二种情况
<style>
        .parent,.child{
            border: 1px solid red;
        }
        .parent{
            width: 600px;
            height: 300px;
            display: table-cell;
            vertical-align: middle;
        }
    </style>
    <div class="parent">
        <span class="child">3333</span>
        <span class="child">3333</span>
        <span class="child">3333</span>
        <span class="child">3333</span>
        <span class="child">3333</span>
        <span class="child">3333</span>
        <span class="child">3333</span>
        <span class="child">3333</span>
        <span class="child">3333</span>
        <span class="child">3333</span>
    </div>

这里写图片描述

多列布局,（双飞翼布局，圣杯布局）

三列布局，float+margin：给左边元素设置float：left，右边float：right；且左右元素需要设置宽度，然后给中间的元素设置margin：0 右边盒子宽度 0 左边盒子宽度；
觉得挺好用的就是宽度用百分数表示，父元素也无需定宽（百分数表示都可以），给子元素均设置float：left；然后子元素的宽度加起来是100%就好啦，（这里要注意如果你有设置边框之类的记得设置子元素box-sizing：border-box；）
用position+float+margin也可以实现

在CSS3中引入了box-sizing属性,
- content-box：标准盒模型，CSS定义的宽高只包含content的宽高
- border-box：IE盒模型，CSS定义的宽高包括了content，padding和border
- ## position的三个属性值 ##
- relative：相对于自身原本位置进行偏移，仍然处在标准文档流中，可以设置z-index属性
- static：默认值；
- fixed：相对于浏览器视口，处于固定状态，即使滑动滚轮还是在原来位置，脱离文档流
- absolute：相对于已定位父元素/祖先元素来说，如果没有则相对于body，脱离文档流，可设置z-index

BFC块级格式化上下文

详细内容我另外开了一篇博文~ ，每一个都试了一下。
特性：

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

怎样才会触发？如下：

float 除了none以外的值
overflow 除了visible 以外的值（hidden，auto，scroll ）
display (table-cell，table-caption，inline-block, flex, inline-flex)
position值为（absolute，fixed）
fieldset元素
绝对定位元素(position:absolute 或fixed)
行内块inline-block(元素的display:inline-block)
表格单元格(元素的display:table-ceil,HTML表格默认属性)
弹性盒flex boxes(元素地display:flex或inline-flex)
下面的内容我都重新开一篇博文写，写在一起太长了，

双向绑定

事件委托

拖拽

es6

数组去重

new做了什么

响应式布局

移动端

rem

深拷贝，浅拷贝

继承

promise

border三角形

.one{
        width: 0px;
        height: 0px;
        border-top: 200px solid red;
        border-right: 200px solid transparent;
        border-bottom: 20px solid transparent;
        border-left: 200px solid transparent;
    }
<div class="one"></div>

可以通过改变各边border的宽度，颜色来做各种图形
这里写图片描述

.one{
    width: 0px;
    height: 0px;
    border-top: 100px solid red;
    border-right: 100px solid yellow;
    border-bottom: 100px solid blue;
    border-left: 100px solid purple;
}

这里写图片描述

梯形

.one{
            width: 200px;
            height: 0px;
            border-top: 200px solid red;
            border-right: 200px solid transparent;
            border-bottom: 20px solid transparent;
            border-left: 200px solid transparent;

        }

这里写图片描述
应用，哇不学不知道 css真的好厉害，下面这个图，圆角和直角三角形组成的这个图形就是用上面的border实现的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border</title>
    <style>
        .one{
            width: 500px;
            height: 60px;
            background-color: pink;
                text-align: center;
                line-height: 60px;
        }
        .top{

                width: 480px;
    border-top: 20px solid transparent;
    border-right: 10px solid  transparent;
    border-bottom: 2px solid pink;
    border-left: 10px solid transparent;
        }
        .bottom{
                    width: 480px;
    border-top: 2px solid #ffc0cb;
    border-right: 10px solid transparent;
    border-bottom: 2px solid transparent;
    border-left: 10px solid transparent;
        }
        .triangle{
                width: 30px;
                    margin-left: 30px;
    margin-top: -5px;
    /* height: 20px; */
    border-top: 15px solid pink;
    border-right: 20px solid #ff000005;
    border-bottom: 20px solid transparent;
    border-left: 30px solid pink;
    box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="one">冒泡~~~~</div>
    <div class="bottom"></div><div class="triangle"></div>
</body>
</html>

徐行莫停

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
屯一波面试题

修改了垂直居中通用方法，父元素需要添加height; 都是同学，我面试碰到的题，都总结一下，万一哪次让我碰到了呢，后面内容太多，这篇就提一下有什么，具体内容我会另外写篇博文，不然写在一起看起来很费事儿~1.SEOseo（Search Engine Optimization）:搜索引擎的优化，具体是指通过网站结构调整、网站内容建设、网站代码优化、以及站外优化等使网站满足搜索引擎的收录排...
复制链接

扫一扫

专栏目录