前端面试html、css部分

2019-01-06  本文已影响3人  冷小谦

HTML部分

Doctype作用？严格模式与混杂模式如何区分？它们有何意义?

DOCTYPE声明以何种模式渲染文档
严格模式 以浏览器支持的最高标准运行。
混杂模式向后兼容老的浏览器。
如果DOCTYPE不存在则浏览器使用混杂模式。

html标签分类及特性

页面导入样式时，link和@import有什么区别

都是外部引用css。

  1. link可以加载其他事物, @import只能加载css
  2. link引入css时，页面同时加载，@import要页面完全加载完之后加载。
  3. link无版本兼容问题，@import低版本不支持
  4. link方式的样式的权重高于@import的权重
  5. import在html使用时候需要<style type="text/css">标签

HTML5的离线储存怎么使用，工作原理？

h5离线存储 manifest

无网也能正常访问。更快的加载速度。
希望被缓存的页面会包含manifest属性，都会被加入application cache

<html manifest="demo.appcache">
manifest文件

同时配置manifest文件，告知浏览器被缓存的内容，
CACHE MANIFEST首次下载后进行缓存
NETWORK 与服务器连接，且不会被缓存
FALLBACK 当前页无法访问时回退页面

CACHE MANIFEST
# 2012-02-21 V 1.0.0
/theme.css
/log.gif
/main.js 
NETWORK:
login.app
FALLBACK:
/html5/ /404.html

上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。

更新机制

有三种方式更新manifest缓存：
1、用户清空浏览器缓存；
2、manifest文件被修改
3、由程序来更新

CSS部分

1.css盒子模型

box-sizing：content-box是标准模型
box-sizing：border-box是ie模型

2.BFC

CSS中，常用的定位方案有以下几种：

BFC是block formatting context即块级格式化上下文。有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
具有BFC的元素可以看做是隔离了的独立容器，容器里的元素不会再布局上影响外面的元素。

触发BFC
BFC原理：
  1. 内部的box会在垂直方向，一个接一个的放置。
  2. 同一个BFC下外边距会折叠,两个div处于同一个BFC(body下)，所以第一个div的下边距和第二个div的上边距重叠。
<head>
div{
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}
</head>
<body>
    <div></div>
    <div></div>
</body>
  1. 每个元素的margin的左边， 与包含块border的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  2. BFC区域不会与浮动元素重叠
  3. 计算BFC高度，浮动元素也参与计算
自适应两栏布局

两个div，设定父元素的宽度不设定高度，第一个div浮动，宽度百分比，高度，第二个元素设定高度，overflow：hidden。

<style>
  body{
    width:300px;
    position:relative
  }
  .aside{
    width:20%;
    height:150px;
    background:red;
    float:left;
  }
  .main{
    height:200px;
    background:skyblue;
    overflow:hidden
  }
</style>
<div class='aside'>
<div class='main'>

根据BFC布局规则

每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

因此，虽然存在浮动的元素aslide，但main的左边依然会与包含块的左边相接触。

BFC的区域不会与float box重叠。

通过通过触发main生成BFC， 来实现自适应两栏布局。

清除内部浮动

将内部有浮动元素的父级元素box，加overflow：hidden

<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
        overflow:hidden
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

计算BFC高度，浮动元素也参与计算

3.清除浮动

当子元素都是浮动、父元素没有设置高度时，父元素会高度坍塌，可能会影响父级元素的兄弟元素排版。

伪类after

如果子元素都浮动，那么父元素的样式

<style>
  .clearfloat:after{
    display:block;
    clear:both;
    content:'';
 }
.clearfloat{
  zoom:1
}
</style>
在结尾处添加空div标签clear:both

添加空div，clear:both清除浮动，让父级div能自动获取到高度

给父元素定义height

给父元素定义height可以直接撑起来父元素

父元素定义overflow:hidden或者overflow:auto或者浮动或者display

利用BFC

4.如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

position:absolute;
left:50%;
right:50%;
margin-left:-50px;
margin-top:-50px;

或者

position:absolute;
left:0;
right:0;
top:0;
bottom:0
margin:auto

+浮动配合相对定位水平居中
原理：浮动元素相对定位到父元素宽度50%的地方，此时并不居中，比居中位置向右多出自身一半的宽度，里面的子元素再一个相对定位，向左一半宽度

<style>
  .parent{width:300px;height:200px;}
  .wrapper{
    float:left;
    position:relative;
    left:50%;
    clear:both;
}
.child{
  position:relative;
  left:-50%;
}
</style>

对于position:relative的元素而言，百分比的计算是相对于其包含块的“内容”盒（框）的宽高的，
position:absolute按离其最近的有定位属性的祖先元素的（内容高+padding）值来计算的，不算border。
padding 和 margin 是根据包含块的宽度计算的
参见包含块

5.css3新增的伪元素
6. display有哪些值
6.圣杯布局

参见 圣杯布局
两边定宽，中间宽度自适应

上一篇 下一篇

猜你喜欢

热点阅读