高频面试题之CSS篇_瀑布流布局笔试题-优快云博客

本文链接：https://blog.youkuaiyun.com/ChristineAS/article/details/98997675

1 浮动元素居中

(1) 没有宽度
父子元素都float:left;position:relative.父元素left:50%,子元素left:-50%

<meta charset="utf-8">
<style>
  .box {
    border: 2px solid green;
    float: left;
    position: relative;
    left: 50%;
    /*move to right 50% of the window width*/

  }

  p {
    border: 2px solid red;
    float: left;
    position: relative;
    left: -50%;
    /*move to left 50% of the box width*/

  }
</style>
<div class="box">
  <p>我是浮动的</p>
</div>

(2) 有宽度
margin-left:50%;position:relative;left:-100px;不能是-50%，否则就不是自身一半，而是body的一半。

<meta charset="utf-8">
<style>
  .box {
    border: 2px solid green;
    width: 200px;
    float：left;
    margin-left: 50%;
    position: relative;
    left: -100px;
    text-align: center;
  }
</style>
<div class="box">hhh</div>

2 display:none和visibility:hidden区别

(1) display:none会让元素从渲染树上消失，不占据空间。
visibility:hidden不会让元素从渲染树上消失，有空间没内容。
(2) display:none具有株连性，子孙元素都不可见。
visibility:hidden子元素设置visible可以显示。

3 link与@import的区别

(1) link属于html标签，@import是CSS提供的。
(2) 页面被加载时，link会被同时加载，@import引用的CSS会等到页面被加载完再加载。
(3) link无兼容问题，@import只在IE5以上才能被识别。
(4) link样式的权重高于@import的权重。

4 清除/闭合浮动的方法

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。
(1) 在浮动元素末尾添加一个空标签，比如div，并设置clear:both。clear取值一共三种，left,right,both，分别表示不允许左侧/右侧/两侧有浮动元素。
缺点：添加了无意义标签。
(2) 父元素添加overflow:hidden/auto/scroll触发BFC。
缺点：内容增多时候容易造成不自动换行从而内容被隐藏掉，无法显示需要溢出的元素。
(3) 父元素添加after伪元素清除浮动。

.clearfix:after{
  content:'.';
  height:0;
  display:block;
  clear:both;
  visibility:hidden;
}
.clearfix{
  *zoom:1;//IE6-7兼容
}

(4) before和after双伪元素清除浮动。

.clearfix:before,.clearfix:after{
  content:'.';
  display:table;
}
.clearfix:after{
  clear:both;
}
.clearfix{
  *zoom:1;
}

5 标签显示模式

一般分为块级元素和行内元素。
block元素：
(1) 总是从新行开始
(2) 高度、行高、内外边距都可以控制
(3) 宽度默认是容器的100%
(4) 可以容纳内联元素和其他块元素
举例：div、p、ul、ol、li、h1-h6，其中p、h1-h6都是文字类块级标签，里面不能放其他块级元素。

inline元素：
(1) 和相邻行内元素在一行上
(2) 只有水平的内外边距有效，高宽、垂直边距都无效
(3) 默认宽度就是本身内容的宽度
(4) 行内元素只能容纳文本或者其他行内元素
举例：a、span、strong、del，其中链接里面不能再放链接

inline-block元素：在行内元素中有几个特殊标签img、input、td，可以设置宽高和对齐
(1) 和相邻行内元素在一行上，但之间会有空白缝隙。可以通过设置父元素font-size:0解决。
(2) 默认宽度就是本身内容宽度
(3) 高度、行高、内外边距都可以控制

6 优雅降级和渐进增强

优雅降级：Web站点在所有新式浏览器中都能正常工作，为无法支持功能的浏览器提供候选方案，降低体验但不至于完全失效。
渐进增强：从被所有浏览器支持的基本功能开始，逐步添加只有新式浏览器才支持的功能。

7 em与rem

都是相对文本长度单位。em:相对当前对象内/父元素 rem:相对根元素html,所有浏览器默认16px。

8 box-sizing属性

content-box：标准模式盒模型，高宽不包括border和padding。
border-box：怪异模式盒模型，高宽包括border和padding。
对HTML文件来说，浏览器使用文件开头的 DOCTYPE 来决定用怪异模式处理或标准模式处理。为了确保你的页面使用标准模式，请确认你的页面拥有 DOCTYPE。怪异模式按照浏览器自己的方式执行。在盒模型计算方式、图片对齐方式、行内元素设置宽高等方面都有差别。

9 定位

定位属性=定位模式+边偏移
定位总结

10 BFC和IFC

BFC
(1) 哪些元素或者属性会产生BFC

根元素html
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
(2) BFC布局规则特性：
1.在BFC中，盒子从顶端开始垂直地一个接一个地排列.
2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。
BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。
计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。
(3) 用于清除内部元素浮动、外边距合并、自适应布局等

IFC
(1) 框会从包含块的顶部开始，一个接一个地水平摆放。
(2) 摆放这些框时，它们在水平方向的内外边距+边框所占用的空间都会被考虑；在垂直方向上，这些框可能会以不同形式来对齐：水平的margin、padding、border有效，垂直无效。不能指定宽高;
(3) 行框的宽度是由包含块和存在的浮动来决定; 行框的高度由行高来决定

11 页面布局方式

圣杯/双飞翼布局、弹性布局、多栏布局、响应式布局、瀑布流布局
(1) 圣杯/双飞翼布局
参考 https://github.com/zwwill/blog/issues/11
之前写的一篇圣杯布局https://blog.youkuaiyun.com/ChristineAS/article/details/87868374
之前写的一篇双飞翼布局https://blog.youkuaiyun.com/ChristineAS/article/details/87869012
总结如下：
圣杯布局

<template>
<header>header</header>
<section class="wrapper">
    <section class="col main">main</section>
    <aside class="col left">left</aside>
    <aside class="col right">right</aside>
</section>
<footer>footer</footer>
</template>

<style>
/* 以下为简码，仅保留关键部分 */
header,footer {height: 50px;}
.wrapper {padding: 0 100px 0 100px; overflow:hidden;}
.col {position: relative; float: left;}
.main {width: 100%;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;left: -100px;}
.right {width: 100px; height: 200px; margin-left: -100px; right: -100px;}
</style>

一句话概括：使用了relative布局、float和负margin，包裹left、main、right的wrapper采用padding，left和right还加了偏移值。
缺点：当 main 部分的宽小于 left 部分时就会发生布局混乱。

双飞翼布局

<template>
<header>header</header>
<section class="wrapper">
    <section class="col main">
        <section class="main-wrap">main</section>
    </section>
    <aside class="col left">left</aside>
    <aside class="col right">right</aside>
</section>
<footer>footer</footer>
</template>

<style>
/* 以下为简码，仅保留关键部分 */
header,footer {height: 50px;}
.wrapper {padding: 0; overflow:hidden;}
.col {float: left;}
.main {width: 100%;}
.main-wrap {margin: 0 100px 0 100px;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;}
.right {width: 100px; height: 200px; margin-left: -100px;}
</style>

一句话概括：同样使用了float和负margin，但是并未使用relative，而是给main增加了一个dom层。是圣杯布局的优化版本。
绝对定位

<template>
<header>header</header>
<section class="wrapper">
    <section class="col main">main</section>
    <aside class="col left">left</aside>
    <aside class="col right">right</aside>
</section>
<footer>footer</footer>
</template>

<style>
/* 以下为简码，仅保留关键部分 */
header,footer { height: 50px;}
.wrapper { position: relative;}
.main { height: 200px; margin:0 100px;}
.left, .right{ width: 100px; height: 200px; position: absolute; top: 0;}
.left{ left: 0;}
.right{ right: 0;}
</style>

布局1
(2) 弹性布局 flex
参考 https://www.cnblogs.com/qcloud1001/p/9848619.html 这一篇就够了
(3) 多栏布局
参考 https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_multi-column_layouts
主要是columns:column-count|column-width，单独写也不会产生歧义。
布局2
(4) 响应式布局
参考 http://www.alloyteam.com/2014/01/responsive-design/
不修改dom前提下调整布局

float流布局
根据不同分辨率设置CSS
@media only screen and (max-width:320px){//表示屏幕宽度小于等于320像素时生效}
添加viewport的meta标签否则手机端可能会自动缩放
(5) 瀑布流布局
参考 https://segmentfault.com/a/1190000016255824
可以使用flex或者多栏布局