多栏布局解决方案
-
圣杯布局
-
-
双飞翼布局
-
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.center {
width: 100%;
height: 400px;
background-color: gold;
float: left;
}
.left {
width: 200px;
height: 400px;
background-color: red;
float: left;
margin-left: -100%;
}
.right {
width: 300px;
height: 400px;
background-color: blue;
float: left;
margin-left: -300px;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
.inner {
margin: 0 300px 0 200px;
}
</style>
</head>
<body>
<!--
双飞翼布局实现：
1.一个大盒子，里面有三个小盒子，左右固定，中间自适应100%，中间部分一定要先解析
2.三个盒子加浮动，左侧部分设置margin-left:-100%;右侧部分设置margin-left:-自己本身宽度
3.中间部分内部嵌套一个标签，加左右的外边距
缺点：相对于圣杯布局，增加一层结构代码
-->
<div class="wrap clearfix">
<div class="center">
<div class="inner">
center
</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html> -
假等高
-
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
border: 5px solid #000;
width: 900px;
margin: 0 auto;
}
.box1 {
width: 300px;
background-color: red;
float: left;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.box2 {
width: 300px;
background-color: green;
float: left;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.box3 {
width: 300px;
background-color: blue;
float: left;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
.wrap {
overflow: hidden;
}
</style>
</head>
<body>
<!-- 内外边距相消法：内边距设置特别大，外边距设置特别小,父标签加溢出隐藏，overflow:hidden; -->
<div class="wrap clearfix">
<div class="box1">
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
</div>
<div class="box2">
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
</div>
<div class="box3">
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
</div>
</div>
</body>
</html> -
真等高
-
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a {
width: 900px;
background-color: blue;
border: 3px solid #000;
margin: 0 auto;
overflow: hidden;
}
.b {
width: 900px;
background-color: green;
margin-left: -300px;
}
.c {
width: 900px;
background-color: red;
margin-left: -300px;
}
.box1 {
width: 300px;
float: left;
position: relative;
left: 600px;
}
.box2 {
width: 300px;
float: left;
position: relative;
left: 600px;
}
.box3 {
width: 300px;
float: left;
position: relative;
left: 600px;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="a">
<div class="b">
<div class="c clearfix">
<div class="box1">
1先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
</div>
<div class="box2">
2先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
</div>
<div class="box3">
3先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
</div>
</div>
</div>
</div>
</body>
</html> -
图片优化
-
使用背景图
-
对于页面中与页面内容无关，起修饰作用的图片，使用背景图 background-image（如页面中小图标尤其多次重复出现的，纹理性的背景），与页面内容相关展示性的图片如（广告图、产品图）使用 img 标签。
-
-
图片品质
-
注意图片优化：在保证视觉效果的情况下，选择最小的图片格式与图片质量，以减少加载时间。
-
注：通常颜色丰富线条复杂的图片选择 .jpg，颜色单一的小图片使用 .gif，需要更好的显示细节或需要支持半透明的图片使用 .png 等。
-
-
使用精灵图
-
运用 CSS sprites 技术集中小的背景图或图标，减少页面 http 请求。
-
测试检查
1、做完的页面要与设计稿进行比对，保证对设计稿 95% 以上的还原度。
（1）页面模块的完整性，保证页面不出现模块丢失 ( 尤其是悬浮的侧边栏、弹窗、下拉菜单等）；
（2）字体、字号、文字颜色的一致性；
（3）背景图片与图片是否有丢失；
（4）模块间距的还原度（通常根据页面设计排版的复杂程度，最多允许 5-10px 以内的偏差）。
2、跨浏览器的兼容测试。
做完的页面，要根据需求进行跨浏览器的兼容测试，保证不同浏览器显示结果基本一致。Pc 端通常需要测试
的浏览器有 chrome、firefox、opera、IE（IE 低版本是否兼容与需求沟通确定）。
高频面试题（笔试题）
1、简述 <!doctype> 的作用？
2、常见的浏览器及其内核？
3、b 和 strong（i 和 em）标签的区别？
4、谈谈对语义化的理解？
5、CSS 引入方式有哪些？
6、CSS 基本选择器有哪些？
7、如何合并表格单元格？
8、thead、tbody、tfoot 有什么用？
9、常见表单元素有哪些？
10、请简述一下盒模型的组成？
11、CSS 复合选择器有哪些？
12、块级标签和行内标签的区别？
13、浮动产生的问题？清除浮动的方案？
14、伪元素如何创建 ?
15、如何实现盒子水平垂直居中？
16、图片下方空白间隙如何解决？
17、请简述 等高布局、圣杯布局、双飞翼布局的实现原理。
18、简述 CSS 精灵图原理，及优缺点？
19、简述 BFC 规则及解决的问题？
20、文本溢出显示省略号如何实现？
21、为什么要初始化 CSS 样式？哪些样式需要初始化？
保证浏览器的统一性，去掉标签自带的样式
22、display:none 和 visibility：hidden 的区别？
23、你能想出几种方法让元素在页面中消失？
24、标签应该如何合理嵌套？
25、简述网页中常见图片格式及特点？
26、说说你了解的浏览器兼容问题有哪些？
27、什么是 CSSHack 技术？
多栏布局解决方案
-
圣杯布局
-
-
双飞翼布局
-
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.center {
width: 100%;
height: 400px;
background-color: gold;
float: left;
}
.left {
width: 200px;
height: 400px;
background-color: red;
float: left;
margin-left: -100%;
}
.right {
width: 300px;
height: 400px;
background-color: blue;
float: left;
margin-left: -300px;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
.inner {
margin: 0 300px 0 200px;
}
</style>
</head>
<body>
<!--
双飞翼布局实现：
1.一个大盒子，里面有三个小盒子，左右固定，中间自适应100%，中间部分一定要先解析
2.三个盒子加浮动，左侧部分设置margin-left:-100%;右侧部分设置margin-left:-自己本身宽度
3.中间部分内部嵌套一个标签，加左右的外边距
缺点：相对于圣杯布局，增加一层结构代码
-->
<div class="wrap clearfix">
<div class="center">
<div class="inner">
center
</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html> -
假等高
-
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
border: 5px solid #000;
width: 900px;
margin: 0 auto;
}
.box1 {
width: 300px;
background-color: red;
float: left;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.box2 {
width: 300px;
background-color: green;
float: left;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.box3 {
width: 300px;
background-color: blue;
float: left;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
.wrap {
overflow: hidden;
}
</style>
</head>
<body>
<!-- 内外边距相消法：内边距设置特别大，外边距设置特别小,父标签加溢出隐藏，overflow:hidden; -->
<div class="wrap clearfix">
<div class="box1">
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
</div>
<div class="box2">
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
</div>
<div class="box3">
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
</div>
</div>
</body>
</html> -
真等高
-
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a {
width: 900px;
background-color: blue;
border: 3px solid #000;
margin: 0 auto;
overflow: hidden;
}
.b {
width: 900px;
background-color: green;
margin-left: -300px;
}
.c {
width: 900px;
background-color: red;
margin-left: -300px;
}
.box1 {
width: 300px;
float: left;
position: relative;
left: 600px;
}
.box2 {
width: 300px;
float: left;
position: relative;
left: 600px;
}
.box3 {
width: 300px;
float: left;
position: relative;
left: 600px;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="a">
<div class="b">
<div class="c clearfix">
<div class="box1">
1先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
</div>
<div class="box2">
2先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
</div>
<div class="box3">
3先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
</div>
</div>
</div>
</div>
</body>
</html> -
图片优化
-
使用背景图
-
对于页面中与页面内容无关，起修饰作用的图片，使用背景图 background-image（如页面中小图标尤其多次重复出现的，纹理性的背景），与页面内容相关展示性的图片如（广告图、产品图）使用 img 标签。
-
-
图片品质
-
注意图片优化：在保证视觉效果的情况下，选择最小的图片格式与图片质量，以减少加载时间。
-
注：通常颜色丰富线条复杂的图片选择 .jpg，颜色单一的小图片使用 .gif，需要更好的显示细节或需要支持半透明的图片使用 .png 等。
-
-
使用精灵图
-
运用 CSS sprites 技术集中小的背景图或图标，减少页面 http 请求。
-
测试检查
1、做完的页面要与设计稿进行比对，保证对设计稿 95% 以上的还原度。
（1）页面模块的完整性，保证页面不出现模块丢失 ( 尤其是悬浮的侧边栏、弹窗、下拉菜单等）；
（2）字体、字号、文字颜色的一致性；
（3）背景图片与图片是否有丢失；
（4）模块间距的还原度（通常根据页面设计排版的复杂程度，最多允许 5-10px 以内的偏差）。
2、跨浏览器的兼容测试。
做完的页面，要根据需求进行跨浏览器的兼容测试，保证不同浏览器显示结果基本一致。Pc 端通常需要测试
的浏览器有 chrome、firefox、opera、IE（IE 低版本是否兼容与需求沟通确定）。
高频面试题（笔试题）
1、简述 <!doctype> 的作用？
2、常见的浏览器及其内核？
3、b 和 strong（i 和 em）标签的区别？
4、谈谈对语义化的理解？
5、CSS 引入方式有哪些？
6、CSS 基本选择器有哪些？
7、如何合并表格单元格？
8、thead、tbody、tfoot 有什么用？
9、常见表单元素有哪些？
10、请简述一下盒模型的组成？
11、CSS 复合选择器有哪些？
12、块级标签和行内标签的区别？
13、浮动产生的问题？清除浮动的方案？
14、伪元素如何创建 ?
15、如何实现盒子水平垂直居中？
16、图片下方空白间隙如何解决？
17、请简述 等高布局、圣杯布局、双飞翼布局的实现原理。
18、简述 CSS 精灵图原理，及优缺点？
19、简述 BFC 规则及解决的问题？
20、文本溢出显示省略号如何实现？
21、为什么要初始化 CSS 样式？哪些样式需要初始化？
保证浏览器的统一性，去掉标签自带的样式
22、display:none 和 visibility：hidden 的区别？
23、你能想出几种方法让元素在页面中消失？
24、标签应该如何合理嵌套？
25、简述网页中常见图片格式及特点？
26、说说你了解的浏览器兼容问题有哪些？
27、什么是 CSSHack 技术？