前端知识体系1.CSS

本文目录

• 1.什么是 BFC机制？
• 2.讲一讲用css绘制三角形的实现过程
• 3.link 与 @import 的区别
• 4.display、visibility、overflow的联系和区别
• 5.px、em、rem三者的联系和区别
• 6.如何快速实现自适应的分割线
• 7.请实现下面这个需求：屏幕中的div垂直居中，左右外边距10px，高度始终为宽度一半
• 8.css预处理语言用过吗？Sass？Less？Stylus？说一下都拥有哪些特性
• 9.举例几个常用的at规则
• 10.如何防止CSS阻塞渲染
• 11.有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度。
• 12.解释一下”层叠上下文“
• 13.position 有哪些属性？position: sticky 用过没，有什么效果
• 14.双飞翼布局（圣杯布局，三栏自适应）
• 15.两栏自适应（左边定宽，右边自适应）
• 16.img 标签空白间隙产生原因以及解决方法？
• 17.详细说一下flex布局
• 18.说一说常见的居中布局方式

1.什么是 BFC机制？

BFC(Block Formatting Context)，块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
触发条件 (以下任意一条)

• 1、浮动元素，float 除 none 以外的值；
• 2、定位元素，position（absolute，fixed）；
• 3、display 为以下其中之一的值 inline-block，table-cell，table-caption；
• 4、overflow 除了 visible 以外的值（hidden，auto，scroll）；

在IE下, Layout,可通过zoom:1 触发
触发了BFC的布局规则:
1.浮动的元素会被父级计算高度(父级元素触发了BFC)
2.非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC)
3.margin不会传递给父级(父级触发BFC)
而不触发BFC情况下的布局规则：
1.普通文档流布局: 浮动的元素是不会被父级计算高度
2.非浮动元素会覆盖浮动元素的位置
3.margin会传递给父级元素
开发中的应用

• 阻止margin重叠
• 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个 div都位于同一个 BFC 区域之中)
• 自适应两栏布局
• 可以阻止元素被浮动元素覆盖

2.讲一讲用css绘制三角形的实现过程

(1)写一个div，并添加上类名box

.box{
    width:100px;
    height:100px;
    border: 3px solid;
    border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}

(2)接下来,我们将border值增大,在增大盒子的基础上把盒子的宽和高变为0

.box{
    width:0px;
    height:0px;
    border: 50px solid;
    border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}

这时候呈现的效果如下图

示意图.png

(3)设置透明, 隐藏其中三个三角形

 .box{
    width:0px;
    height:0px;
    border: 50px solid;
    border-color:transparent transparent transparent #ef4848;
}

三角形这样就出来了, 当然我们也可以采用逆向思维来写这个效果, 就是先将所有边框设为透明, 然后需要哪边再对其设置颜色, 效果是一样的

.box{
    width:0px;
    height:0px;
    border: 50px solid transparent;
    border-left:50px solid #ef4848;
}

3.link 与 @import 的区别

(1)从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 type、rel 连接属性等，<link rel="stylesheet" type="text/css" href="demo.css" />
(2)加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
(3)兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
(4)DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于DOM方法是基于文档的，所以无法使用@import的方式插入样式。

@import的使用分两种情况，一种是在html中在style标签中使用，如：
<style type="text/css">@import url("../css/demo1.css");</style>
这样使用方式会让该css文件在页面加载完毕后才被加载，同时多个css文件的加载方式为同步加载，所以应该杜绝在html中使用@import
另外一种方式是在css文件中通过@import "demo2.css";这种类型的代码来实现引入别的css文件，这种形式有利于样式表的修改和拓展，但因为渲染效率的问题，在开发中也很少用到。

4.display、visibility、overflow的联系和区别

在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display 、visibility 和 overflow。
他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。 最常见的是网站广告，当我们点击之后就关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫。

display 显示

display 设置或检索对象是否及如何显示。
display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。
特点： 隐藏之后，不再保留位置。

visibility 可见性

设置或检索是否显示对象。
visible : 　对象可视
hidden : 　对象隐藏
特点： 隐藏之后，继续保留原有位置。（停职留薪）

overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible : 　默认配置，不剪切内容也不添加滚动条。
auto : 　 超出自动显示滚动条，不超出不显示滚动条
hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll : 　不管超出内容否，总是显示滚动条

5.px、em、rem三者的联系和区别

px、em、rem都是计量单位，都能表示尺寸，但是又有所不同，而且其各有各的优缺点。

px

px表示“绝对尺寸”（并非真正的绝对），实际上就是css中定义的像素（此像素与设备的物理像素有一定的区别），利用px设置字体大小及元素宽高等比较稳定和精确。px的缺点是其不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。

em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 em会继承父级元素的字体大小。使用em可以较好的适应设备屏幕尺寸的变化，但是在进行元素设置时都需要知道父元素文本的font-size及当前对象内文本的font-size，如有遗漏可能会导致错误。
注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

rem

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：
p {font-size:14px; font-size:.875rem;}

6.如何快速实现自适应的分割线

方法一：伪元素+transform:translateX(-100%);
主要原理是设置文本居中text-align: center;，然后给定两个伪元素，分别绝对定位，那么此时伪元素也是跟随着水平居中的，设置足够的宽度，然后把左边的往左位移100%就可以了，父级记得超出隐藏。
html结构

<div class="title">我是分割线</div>

css样式代码

.title{
    position: relative;
    text-align: center;
    overflow: hidden;
    font-size: 14px;
    color: #999;
}
.title::before,.title::after{
    content: '';
    display: inline-block;
    width: 100%;
    height: 1px;
    position: absolute;
    background: #ccc;
    top: 50%;
}
.title::before{
    margin-left: -10px;
    transform: translateX(-100%);
}
.title::after{
    margin-left: 10px;
}

方法二：伪元素+flex
设置display:flex，然后两个伪元素分别铺满剩余空间。
html结构

<div class="title">我是分割线</div>

css样式

.title{
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #999;
}
.title::before,.title::after{
    content: '';
    flex: 1;
    height: 1px;
    background: #ccc;
}
.title::before{
    margin-right: 10px;
}
.title::after{
    margin-left: 10px;
}

7.请实现下面这个需求：屏幕中的div垂直居中，左右外边距10px，高度始终为宽度一半

问题描述: 实现一个div垂直居中, 其距离屏幕左右两边各10px, 其高度始终是宽度的50%。同时div中有一个文字A，文字需要水平垂直居中。

思路一：利用height:0; padding-bottom: 50%;

HTML结构如下：

<div class="outer_wrapper">
    <div class="inner_wrapper">
        <div class="box">A</div>
    </div>
</div>

CSS样式代码如下

* {
    margin: 0;
    padding: 0;
}
html,
body {
    height: 100%;
    width: 100%;
}
.outer_wrapper {
    margin: 0 10px;
    height: 100%;
    /* flex布局让块垂直居中 */
    display: flex;
    align-items: center;
}
.inner_wrapper {
    background: red;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 50%;/* important Code */
}
.box {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

强调两点:
padding-bottom究竟是相对于谁的？
答案是相对于 父元素的width值。
那么对于这个outwrapper的用意就很好理解了。CSS呈流式布局，div默认宽度填满，即100%大小，给outwrapper设置margin: 0 10px;相当于让左右分别减少了10px。
父元素相对定位，那绝对定位下的子元素宽高若设为百分比，是相对谁而言的？
相对于父元素的(content + padding)值, 注意不含border

引申问题：元素竖向的百分比设定是相对于父容器的高度吗？
如果是height的话，是相对于父容器的高度。
如果是padding或者margin竖直方向的属性则是相对于父容器的宽度。

思路二: 利用calc和vw

HTML结构如下：

<div class="wrapper">
    <div class="box">A</div>
</div>

CSS样式代码如下

* {
    margin: 0;
    padding: 0;
}
html,
body {
    height: 100%;
    width: 100%;
}
.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}
.box {
    margin-left: 10px;
    /* vw是视口的宽度， 1vw代表1%的视口宽度 */
    width: calc(100vw - 20px);
    /* 宽度的一半 */
    height: calc(50vw - 10px);
    position: absolute;
    background: red;
    /* 下面两行让块垂直居中 */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

18.css预处理语言用过吗？Sass？Less？Stylus？说一下都拥有哪些特性

详细内容见文集《CSS3》=>《横向对比Sass、Less和Stylus的共同特性》

9.举例几个常用的at规则

• @charset 定义字符集 @charset "utf-8"
• @import 导入css文件 @import "base.css"
• @font-face 自定义字体 @font-face {}
• @keyframes 声明CSS3 animation动画 @keyframes fadeIn {}
• @media 媒体查询 @media{}

10.如何防止CSS阻塞渲染

默认情况下，CSS 被视为阻塞渲染的资源，这意味着浏览器将不会渲染任何已处理的内容，直至 CSSOM 构建完毕。请务必精简项目的CSS，并利用媒体类型和查询来减少对渲染的阻塞。
我们可以通过 CSS“媒体类型”和“媒体查询”来解决这类用例：

<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">

媒体查询由媒体类型以及零个或多个检查特定媒体特征状况的表达式组成。
例如，上面的第一个样式表声明未提供任何媒体类型或查询，因此它适用于所有情况，也就是说，它始终会阻塞渲染。
第二个样式表则不然，它只在打印内容时适用---或许您想重新安排布局、更改字体等等，因此在网页首次加载时，该样式表不需要阻塞渲染。
最后一个样式表声明提供由浏览器执行的“媒体查询”：符合条件时，浏览器将阻塞渲染，直至样式表下载并处理完毕。

11.有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度。

（1）外层div使用position：relative；第一个div定高，第二个div添加以下样式

position: absolute;
top: 100px;
bottom: 0;
left: 0;
right: 0;

（2）使用flex布局，设置主轴为竖轴，第一个div定高，第二个div的flex-grow为1（设置flex属性为1效果也是一样的）。

12.解释一下”层叠上下文“

在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的x轴，y轴以及表示层叠的z轴。层叠上下文即元素在某个层级上z轴方向的排列关系。

层叠上下文.png

需要特别注意的是：inline-blcok 的 stacking level 比 float 高。

13.position 有哪些属性？position: sticky 用过没，有什么效果

position: relative;相对定位
position: absolute;绝对定位
position: fixed;固定定位
position:static：默认值
position: inherit规定应该从父元素继承 position 属性的值
position: initial把position属性设置为默认值，也就是重置position属性static
position: sticky 粘性定位
单词sticky的中文意思是“粘性的”，position:sticky表现也符合这个粘性的表现。基本上，可以看出是position:relative和position:fixed的结合体——当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。
sticky这个属性值兼容性目前比较差，safari需要添加-webkit-私有属性进行支持。
添加了position: sticky;后top，bottom，left，right四个阈值必须而且只能添加一个，同时父元素的overflow属性只能为默认的visible
position:sticky最基本的表现特别适合做导航的跟随定位效果，同时可以实现更富有层次的滚动交互。
比如下面这段样式代码的场景：一篇新闻稿里有多篇带有标题的段落，同时footer为每个段落下的网友评论，通过sticky属性值实现了新闻标题依次推上去，网友评论也会在距离页面底部50%的时候很从背后钻出来。

article {
    max-width: 600px;
    margin: 1em auto;
}
article h4, 
article footer {
    position: -webkit-sticky;  /* for Safari */
    position: sticky;
}
article h4 {
    margin: 2em 0 0;
    background-color: #333;
    color: #fff;
    padding: 10px;
    top: 0;
    z-index: 1;
}
article content {
    display: block;
    background-color: #ffffe0;
    position: relative;
    padding: 1px 10px;
}
article footer {
    background-color: #f0f3f9;
    padding: 10px;
    bottom: 50vh;
    z-index: -1;
}

当页面刚开始滚动时h4元素并无特殊的表现（相当于relative定位），当滚动到特殊位置（top: 0）时出现粘性定位效果（相当于fixed定位），继续滚动页面发现h4元素并不是一直定位在顶部，当其父元素不在视窗内时h4元素失去粘性效果。这一点与fixed的表现不同。fixed定位元素是相对于整个视窗定位。

14.双飞翼布局（圣杯布局，三栏自适应）

• 两侧宽度高度固定，中间宽度100%，但是根据两侧的宽度设置padding-left和padding-right

15.两栏自适应（左边定宽，右边自适应）

实现方案一：
flex 布局给父元素设置 display:flex，左边的子元素给个 width:100px，右边的子元素 flex:1 就可以了
在display:flex弹性盒模型中，有两个项目，左边项目定宽，右边项目 flex-grow: 1;width: 0;实现自适应。或者是右边项目flex: 1;width: 0;也可以实现。width:0这个属性不加也可以实现效果，但是加上这个属性可以防止右边项目过大时挤压左边项目的空间。
实现方案二 ：
两个盒子1和2，先让1float:left;，然后让2overflow:hidden;从而触发BFC绝对绝缘，不让其他浮动影响自己，也不让自己的浮动影响别人。
盒子1需要把宽度固定死，盒子2不用设置宽度，会自动填满剩余父盒子的剩余空间，从而达到自适应。但是需要注意这种方案下，子盒子需要设置height: 100%;才可以占满父盒子的全部高度。

16.img 标签空白间隙产生原因以及解决方法？

产生原因：内联元素的默认基线对齐方式导致空节点出现（vertical-align:baseline;）
解决方法见文集《CSS3》=>《css界面问题处理技巧总结》第11条

17.详细说一下flex布局

详细内容见文集《CSS3》=>《css3-flex布局详解》

18.说一说常见的居中布局方式

详细内容见文集《CSS3》=>《css水平垂直居中的n种方法》