本文详细阐述了前端开发中的关键概念，包括HTML语义化的理解，DOCTYPE的作用，HTML5的新特性，以及CSS中的display:none与visibility:hidden的区别，伪元素与伪类，BFC的定义、特性和应用。此外，还讨论了CSS布局技巧如两栏、三栏布局，居中方法，以及如何使用Webpack处理CSS。
目录
17.什么是BFC？BFC有什么特性？如何创建BFC？BFC有什么作用？
1.对HTML语义化的理解
HTML语义化就是说在css加载失败或者没有css的情况下，页面也能呈现出清晰的结构。
同时HTML5也出了很多新的语义化标签，例如header,nav,footer,main。
2.DOCTYPE(⽂档类型) 的作⽤
DOCTYPE是为了告诉浏览器应该以什么类型（html,xhtml）去解析文档，从而更好的展现页面
3.HTML5有哪些更新
(1)新增了一些语义化标签
header,nav,aside,footer
(2)新增了音频audio,视频video标签
(3)新增存储属性localStorge,sessionStorge
4.行内元素有哪些？块级元素有哪些？
(1)行内元素：不独占一行，不可以设置宽高 span img a
(2)块级元素：独占一行，可以设置宽高 div p h1-h5
5.display:none与visibility:hidden的区别
display隐藏，元素不占据位置
visibility隐藏，元素占据位置
6.伪元素和伪类的区别和作用
(1)伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成 ，他们只是在外部显示可见，并不能在文档的源码中找到他们：：
p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}(2)伪类是为了给元素添加一些特殊的效果， 用于已有元素处于某种状态时（滑动、点击等）为其添加对应的样式，不会产生新的元素
他是例如鼠标经过或者已有元素上添加类别的，不会产生新的元素
a:hover {color: #FF00FF}
p:first-child {color: red}7.标准盒子和怪异盒子（IE盒子）
标准盒子的宽度和高度只包括content,标准盒子box-sizeing:content-box
怪异盒子的宽度和高度包括content,padding,border，怪异盒子box-sizeing:border-box
8.对精灵图CSS Sprites 的理解
CSSSprites（精灵图），将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background-repeat，background-position属性的组合进行背景定位。
9.单行、多行文本溢出隐藏
单行文本溢出
overflow:hidder;//溢出隐藏
text-overflow:ellipsis;//溢出用省略号显示
white-space:nowrap;//规定段落中的文本不进行换行多行文本溢出
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
display:-webkit-box; // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3; // 显示的行数10.如何用 Webpack 实现对 CSS 的处理
Webpack 中操作 CSS 需要使用的两个关键的 loader：css-loader 和 style-loader
注意，答出“用什么”有时候可能还不够，面试官会怀疑你是不是在背答案，所以你还需要了解每个 loader 都做了什么事情：
-
css-loader：导入 CSS 模块，对 CSS 代码进行编译处理；
-
style-loader：创建style标签，把 CSS 内容写入标签。
11.两栏布局的实现
一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应，两栏布局的具体实现：
-
利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为100%（默认为auto，撑满整个父元素）。
.left {
float: left;
width: 200px;
background-color: aqua;
}
.right {
width: 100%;
margin-left: 200px;
background-color: bisque;
}
定位方法：给父级盒子添加position：relative，固定一侧的盒子position：absolute，另一侧宽度100%，但是要给右侧盒子添加margin-left：左侧盒子宽度，不然就会右侧盒子的宽度为整个浏览器的宽度
<div class="fater">
<div class="left1">leftleftleftlefleftlef</div>
<div class="right1">right</div>
</div>
.fater {
position: relative;
}
.fater .left1 {
width: 200px;
height: 200px;
position: absolute;
background-color: blue;
}
.fater .right1 {
margin-left: 200px;
height: 200px;
width: 100%;
background-color: rgb(189, 189, 223);
}12.三栏布局的实现
-
利用绝对定位，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。
<div class="outer">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
.outer {
position: relative;
height: 100px;
}
.left {
position: absolute;
width: 200px;
height: 100px;
background: tomato;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 100px;
background: gold;
}
.center {
margin-left: 200px;
margin-right: 200px;
height: 100px;
background: lightgreen;
}-
利用flex布局，左右两栏设置固定大小，中间一栏设置为flex:1
<div class="outer"> <div class="left">left</div> <div class="center">center</div> <div class="right">right</div> </div> .outer { display: flex; height: 100px; } .left { width: 100px; background: tomato; } .right { width: 100px; background: gold; } .center { flex: 1; background: lightgreen; }
13.水平垂直居中的实现
-
利用绝对定位，父元素设置relative,子元素设置top50%,left50%,同时设置绝对定位absolute,还要通过 transform(转换): (位移)translate(-50%,-50%);}
.fater {
position: relative;
height: 200px;
background-color: aqua;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="fater">
<div class="child">child</div>
</div>使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。该方法要考虑兼容的问题，该方法在移动端用的较多：
.fater {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: aqua;
}
<div class="fater">
<div class="child">child</div>
</div>
14.实现一个三角形
CSS绘制三角形主要用到的是border属性，也就是边框。
平时在给盒子设置边框时，往往都设置很窄，就可能误以为边框是由矩形组成的。实际上，border属性是右三角形组成的，下面看一个例子：
div {
width: 0;
height: 0;
border: 100px solid;
border-color: orange blue red green;
}将元素的长宽都设置为0，显示出来的效果是这样的：
所以可以根据border这个特性来绘制三角形
（1）三角1
div { width: 0;
height: 0;
border-top: 50px solid red;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}
（2）三角2
div {
width: 0;
height: 0;
border-bottom: 50px solid red;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}
（3）三角3
div {
width: 0;
height: 0;
border-left: 50px solid red;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
（4）三角4
div {
width: 0;
height: 0;
border-right: 50px solid red;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
还有很多，就不一一实现了，总体的原则就是通过上下左右边框来控制三角形的方向，用边框的宽度比来控制三角形的角度。
（5）总结
三角形的底边朝哪边那边的border就有颜色
15. 居中布局
-
水平居中
-
行内元素:
text-align: center -
块级元素:
margin: 0 auto -
absolute + transform -
flex + justify-content: center
-
-
垂直居中
-
line-height: height -
absolute + transform -
flex + align-items: center -
table
-
-
水平垂直居中
-
absolute + transform -
flex + justify-content + align-items
-
16.去除浮动影响，防止父级高度塌陷
-
通过增加伪元素清除浮动
:after / : clear: both -
创建父级 BFC
-
父级设置高度
17.什么是BFC？BFC有什么特性？如何创建BFC？BFC有什么作用？
（1）什么是BFC?
BFC全称是Block Formatting Context，意思就是块级格式化上下文。你可以把BFC看做一个容器，容器里边的元素不会影响到容器外部的元素。
（2）BFC有什么特性？
BFC是一个块级元素，块级元素在垂直方向上依次排列。
BFC是一个独立的容器，内部元素不会影响容器外部的元素。
属于同一个BFC的两个盒子，外边距margin会发生重叠，并且取最大外边距。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.continer{
width: 200px;
height: 400px;
background-color: green;
overflow: hidden;
}
.continer .box1 {
width: 100px;
height: 100px;
margin-bottom: 20px;
background-color: red;
}
.continer .box2 {
width: 100px;
height: 100px;
margin-top: 40px;
background-color: red;
}
</style>
</head>
<body>
<div class="continer">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
</body>
</html>
计算BFC高度时，浮动元素也要参与计算。
（3）如何创建BFC?
给父级元素添加以下任意样式
-
overflow: hidden;
-
display: flex;
-
display: inline-flex;
-
display: inline-block;
-
position: absolute;
-
position: fixed; Tip：记住这几个常用的就可以了。
（4）BFC有什么作用？
解决当父级元素没有高度时，子级元素浮动会使父级元素高度塌陷的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.continer{
width: 900px;
background: black;
}
.box1{
height: 300px;
width: 300px;
background: red;
float: left;
}
.box2{
height: 300px;
width: 300px;
background: blue;
float: left;
}
</style>
</head>
<body>
<div class="continer">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
解决后代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.continer{
width: 900px;
background: black;
overflow: hidden;
}
.box1{
height: 300px;
width: 300px;
background: red;
float: left;
}
.box2{
height: 300px;
width: 300px;
background: blue;
float: left;
}
</style>
</head>
<body>
<div class="continer">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
解决子级元素外边距会使父级元素塌陷的问题
解决前源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.continer{
width: 100px;
height: 200px;
background: green;
}
.box{
//原本这里要实现子元素相对父元素的内边距
margin-top: 20px;
height: 50px;
width: 50px;
background: red;
}
</style>
</head>
<body>
<div class="continer">
<div class="box"></div>
</div>
</body>
</html>
解决后源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.continer{
width: 100px;
height: 200px;
background: green;
//区别
overflow: hidden;
}
.box{
margin-top: 20px;
height: 50px;
width: 50px;
background: red;
}
</style>
</head>
<body>
<div class="continer">
<div class="box"></div>
</div>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
