前端面试题整理—

如何理解语义化：

对应的内容是用相应意思的标签，增加开发者和机器爬虫对代码的可读性。

块状元素和内联元素：

块状元素有：display:block/table；有div h1 h2 table ul ol p等，这些元素特点是独占一行。

内联元素：display:inline/inline-block；有span img input button等，内联元素不会独占一行，会挨着往后排，直到浏览器的边缘换行为止。

盒模型宽度计算：

#div{

        width:100px;

        padding:10px;

        border:1px solid #000;

        margin:10px;

}

offsetWidth = （内容宽度+内边距+边框），无外边距，因此#div的宽度是122px。

如果让offsetWidth等于100px，该如何做？

加一个：box-sizing:border-box;

CSS3中的盒模型有两种：标准盒模型、IE（替代）盒模型

两种盒子模型都是由 content+padding+border+margin构成，其大小都是由 content+padding+border决定的，

但是盒子内容宽/高度（即width/height）的计算范围根据盒模型的不同有所不同：

　　标准盒模型：只包含content

　　IE（替代）盒模型：content+padding+border

可以通过box-sizing来改变元素的盒模型：

　　box-sizing:content-box;标准盒模型（默认值）

　　box-sizing:border-box;IE（替代）盒模型

margin纵向重叠问题：

p{

            font-size:16px;

            line-height:1;

            margin-top:10px;

            margin-bottom:15px;

}

相邻元素的margin-top和margin-bottom会发生重叠

空内容的<p></p>也会重叠，会被忽略掉

所以AAA和BBB之间的距离是15px

margin负值问题：

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>margin负值问题</title>

    <style>

        .box1{

            width: 500px;

            height:100px;

            border:1px solid #000;

            padding:10px;

        }

        .left{

            width: 50px;

            height:50px;

            float:left;

            border:1px solid red;

            margin-left:-10px;

            margin-right:-20px;

        }

        .right{

            width: 50px;

            height:50px;

            float:left;

            border:1px solid blue;

        }

        .box2{

            width: 500px;

            height:200px;

            border:1px solid #000;

            padding:10px;

        }

        .top{

            width: 50px;

            height:50px;

            border:1px solid red;

            margin-top:-10px;

            margin-bottom:-20px;

        }

        .bottom{

            width: 50px;

            height:50px;

            border:1px solid blue;

        }

    </style>

</head>

<body>

<h2>测试 margin-left、margin-right为负值</h2>

<div class="box1">

   <div class="left"></div>

   <div class="right"></div>

</div>

<h2>测试 margin-top、margin-bottom为负值</h2>

<div class="box2">

    <div class="top"></div>

    <div class="bottom"></div>

</div>

</body>

</html>

margin-top 和 margin-left 负值，元素向上、向左移动

margin-right 负值，右侧元素左移，自身不受影响

margin-bottom 负值，下方元素上移，自身不受影响

BFC理解与应用：

<style>

        .left{

            float:left;

        }

        .bfc{

            overflow: hidden;

        }

</style>

<div class="bfc">

    <img class="left" src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">

    <p class="bfc">文字文字文字文字文字文字文字文字</p>

</div>

什么是BFC？如何应用

BFC全称是 Block format context，块级格式化上下文。BFC是CSS布局的一个概念，是一个独立的渲染区域。

BFC是一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素。

其中比较重要的布局规则有内部box垂直放置，计算BFC高度的时候浮动元素也参与计算。

BFC具有一些特性：

　　1.块级元素会在垂直方向一个接一个的排列，和文档流的排列方式一致。

　　2.在BFC中上下相邻的两个容器的margin会重叠，创建新BFC可以避免外边距重叠。

　　3.计算BFC的高度时，需要计算浮动元素的高度。

　　4.BFC区域不会与浮动的容器发生重叠。

　　5.BFC是独立的容器，容器内部元素不会影响外部元素。

　　6.每个元素的左margin值和容器的左border相接触。

形成BFC的常见条件：

根元素，即HTML元素

float不是none。设置元素为float，该元素就有了BFC

position 是 absolute 或 fixed

overflow 不是 visible

display 是 flex、inline-block、table-cel、table-caption等

BFC的常见应用：

清除浮动（让父元素的高度包含子浮动元素）

去除边距重叠现象

避免某元素被浮动元素覆盖

避免多列布局由于宽度计算四舍五入而自动换行

手写clearfix：

/*手写clearfix*/

.clearfix:after{

            content:'';

            display: block;

            clear:both;

}

/*

*zoom:1;兼容IE低版本

*/

圣杯布局和双飞翼布局：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>float布局</title>

    <style>

        .box1{

            padding:0;

            margin:0;

        }

        .box1 header,.box1 footer{

            height:20px;

            background:#ccc;

            text-align:center;

        }

        .box1 .main{

            padding-left:100px;

            padding-right:200px;

        }

        .box1 .content{

            height:50px;

            background:#666;

            float:left;

            width: 100%;

            margin-right:-100%;

        }

        .box1 .left{

            height:20px;

            background:yellow;

            width: 100px;

            float:left;

            margin-left:-100px;

        }

        .box1 .right{

            width:200px;

            height:20px;

            background: aquamarine;

            float:left;

            margin-left:100%;

        }

        /*手写clearfix*/

        .clearfix:after{

            content:'';

            display: block;

            clear:both;

        }

        /*

        *zoom:1;兼容IE低版本

        */

    </style>

</head>

<body>

<!--圣杯布局-->

<div class="box1">

    <header>header</header>

    <div class="main clearfix">

        <div class="content">content</div>

        <div class="left">left</div>

        <div class="right">right</div>

    </div>

    <footer>footer</footer>

</div>

<!--双飞翼布局-->

<style>

    .box2{

        padding:0;

        margin:0;

    }

    .box2 #main{

        width: 100%;

        height:200px;

        background:#ccc;

    }

    .box2 #main-wrap{

        margin:0 200px 0 100px;

    }

    .box2 #left{

        width:100px;

        height:100px;

        background:#0000FF;

        margin-left:-100%;

    }

    .box2 #right{

        width:200px;

        height:100px;

        background:red;

        margin-left:-200px;

    }

    .col{

        float:left;

    }

</style>

<div class="box2">

    <div id="main" class="col">

        <div id="main-wrap">main</div>

    </div>

    <div id="left" class="col">

        left

    </div>

    <div id="right" class="col">

        right

    </div>

</div>

</body>

</html>

圣杯布局和双飞翼布局的目的

三栏布局，中间一栏优先加载和渲染（内容最重要）

两侧内容固定，中间内容随着宽度自适应

一般用于PC页面

圣杯布局和双飞翼布局的技术总结

使用float布局

两侧使用margin负值，以便和中间内容横向重叠

防止中间内容被两侧覆盖，一个用padding一个用margin

flex布局实现一个三点色子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>flex布局</title>

    <style>

        .box{

            width: 100px;

            height:100px;

            border:1px solid #000;

            display: flex;

            justify-content: space-around;

            align-items:flex-start;

        }

        .item{

            width: 20px;

            height:20px;

            background:#000;

            border-radius:50%;

        }

        .item:nth-child(2){

            align-self:center;

        }

        .item:nth-child(3){

            align-self:flex-end;

        }

    </style>

</head>

<body>

<div class="box">

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

</div>

</body>

</html>

常规使用属性：

flex-direction：主轴方向
justify-content：主轴对齐方式
align-items：交叉轴对齐方式
flex-wrap：是否换行
align-self：子元素在交叉轴对齐方式

absolute和relative定位：

relative根据自身定位

absolute依据最近一层的定位元素定位，定位元素有：absolute、relative、fixed、body

居中对齐的实现方式：

水平居中

inline元素：text-align:center

block元素：margin:auto

absolute元素：left:50% 加 margin-left：负值

垂直居中

inline元素：line-height的值等于height值

absolute元素：top:50% 加 margin-top:负值这个方法需要知道元素的宽高

absolute元素：top:50%;left:50%;transform:translate(-50%,-50%)

absolute元素：top,left,bottom.right都设置为0 加 margin:auto

line-height如何继承：

写具体数值，如30px，则继承该值（比较好理解）如下代码，答案是30px

body{

            font-size:20px;

            line-height:30px;

}

p{

            font-size:16px;

}

写比例，如2或1.5，则继承该比例（比较好理解）如下代码如果是2，答案是32px

body{

            font-size:20px;

            line-height:2;

}

p{

            font-size:16px;

}

写百分比，如200%，则继承计算出来的值（考点）如下代码如果是200%，答案是40px

body{

            font-size:20px;

            line-height:200%;

}

p{

            font-size:16px;

}

网页视口尺寸：

window.screen.height 屏幕高度

window.innerHeight 网页视口高度

document.body.clientHeight body高度

前端面试题整理——HTML/CSS的更多相关文章

前端面试题整理（css）
1.介绍所知道的CSS hack技巧(如:_, *, +, \9, !important 之类). CSS hack的原理: 由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样,以及CSS优 ...
最近面试前端面试题整理（css部分）
对最近面试的面试题坐下总结: 一,css部分 1,html元素的垂直居中答案: <div id="box"> <div> 测试 </div> ...
前端面试题整理—HTML/CSS篇
1.简述一下你对HTML语义化的理解 1)用正确的标签做正确的事情 2)html语义化让页面的内容结构化,结构更清晰,便于对浏览器.搜索引擎解析 3)即使在没有样式CSS情况下也以一种文档格式显示,并 ...
【web前端面试题整理02】前端面试题第二弹袭来，接招！
前言今天本来准备先了解下node.js的,但是,看看我们一个小时前与一个小时后的差距: 既然如此,我们继续来搜集我们的前端面试题大业吧!!! 特别感谢玉面小肥鱼提供哟,@玉面小飞鱼题目一览 Jav ...
常见前端面试题之HTML/CSS部分
转自http://www.cnblogs.com/jscode/archive/2012/07/10/2583856.html Doctype是什么?如何触发严格模式与混杂模式模式?区分它们有何意义? ...
前端面试题（HTML/CSS）
(前端面试题大全,持续更新) 常用的块级元素和行内元素有哪些?说说他们的特点? 浮动产生的原因?清除浮动? 说说一下盒模型 float和position一起用是什么效果 rem用过吗?做不同手机的适配 ...
【web前端面试题整理06】成都第一弹，邂逅聚美优品
前言上周四回了成都,休息了一下下,工作问题还是需要解决的,于是今天去面试了一下,现在面试回来了,我感觉还是可以整理一下心得. 这个面试题整理系列是为了以后前端方面的兄弟面试时候可以得到一点点帮助,因 ...
2019届校招前端面试题整理——HTML、CSS篇
前言 2019届校招陆陆续续开始了,整理了一些高频的面试题. HTML部分 1. 什么是<!DOCTYPE>? DOCTYPE是html5标准网页声明,且必须声明在HTML文档的第一行.来 ...
【web前端面试题整理03】来看一点CSS相关的吧
前言昨天我们整理了14到js的题,今天我们再来整理14到CSS相关的题目,昨天整理时候时间有点晚了我便有点心浮气躁,里面的一些题需要再次解答,好了看看今天有些什么吧. PS:我这里挑一点来做就好了, ...

随机推荐

JZ-010-矩形覆盖
矩形覆盖题目描述我们可以用21的小矩形横着或者竖着去覆盖更大的矩形.请问用n个21的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? 题目链接: 矩形覆盖代码 /** * 标题:矩形覆盖 ...
git-切换远程仓库
1. 查看远程仓库地址 git remote -v 2. 切换远程仓库地址 (1)直接切换 git remote set-url origin URL //URL为新地址 (2)先删除后添加 git ...
CDN网络科普小文（小说版）
引言作为公司 cdn 小组的一名小码仔,我为写一篇 cdn 的科普文章准备了好一段时间(大概有一个多月没有更新我的社交账号了). 在我刚进入公司,培训完,进入小组,了解到我们做的是 cdn 相关的工 ...
Map 集合
<零基础学Java > Map 集合在程序中需要存储具有映射关系就需要使用Map集合了. Map集合由Map接口.Map接口的实现类组成. Map 接口 Map接口没有Collectio ...
tensorflow源码解析之framework-allocator
目录什么是allocator 内存分配器的管理内存分配追踪其它结构关系图涉及的文件迭代记录 1. 什么是allocator Allocator是所有内存分配器的基类,它定义了内存分配器需要 ...
vue项目部署到阿里云服务器(windows)，Nginx代理！
项目构成: 前端:vue+vant-ui, 数据库:mysql, 后端:node.js 部署方式:nginx代理: 一,首先要拥有自己的服务器,阿里,腾讯都可以,我用的是阿里的: 如果只是做个人项目的 ...
CSS自定义属性与前端页面的主题切换
基于级联变量的CSS自定义属性,已经出来很多年了. 虽然有less.sass等预处理器大行其道,但是自定义属性也有它的特点和用处,诸如在js中读写.作用域设置等等,在处理UI主题切换等功能上也发挥着很 ...
Java安全第一篇｜反射看这一篇就够了
什么是反射? Java安全可以从反序列化漏洞说起,反序列化漏洞又可以从反射说起.反射是⼤多数语⾔⾥都必不可少的组成部分,对象可以通过反射获取他的类,类可以通过反射拿到所有⽅法(包括私有),拿到的⽅法可 ...
Nacos+OpenFegin正确调用服务的姿势！
Nacos 支持两种 HTTP 服务请求,一个是 REST Template,另一个是 Feign Client.之前的文章咱们介绍过 Rest Template 的调用方式,主要是通过 Ribbon ...
phpcms 2008 变量覆盖漏洞
一. 启动环境 1.双击运行桌面phpstudy.exe软件 2.点击启动按钮,启动服务器环境二.代码审计 1．双击启动桌面Seay源代码审计系统软件 3．点击新建项目按钮,弹出对画框中选择(C:\ ...

前端面试题整理——HTML/CSS

前端面试题整理——HTML/CSS的更多相关文章

随机推荐

热门专题