本课程为网易云课堂 - - 前端开发工程师 - - 《页面架构》学习总结
居中布局
问题一：水平列表的底部对齐
如图所示，一个水平排列的列表，每项高度都未知，但要求底部对齐，有哪些方法可以解决呢？
解决方案：
- 方法一：子元素设置：display：inline-block + vertical-align:bottom
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平列表的底部对齐</title>
<style type="text/css">
.parent{
height:500px;
width:800px;
border:1px solid #CCC;
text-align:center;
}
.child{
display:inline-block;
vertical-align:bottom;
}
.child_a{
width:150px;
height:100%;
background:red;
}
.child_b{
width:150px;
height:75%;
background:green;
}
.child_c{
width:150px;
height:50%;
background:black;
}
.child_d{
width:150px;
height:25%;
background:yellow;
}
</style>
</head>
<body>
<div class="parent">
<div class="child child_a">我是最左边的</div>
<div class="child child_b">我是老二，嘿嘿</div>
<div class="child child_c">我是倒数第二！能看到我吗？</div>
<div class="child child_d">我是倒数第一吆~</div>
</div>
</body>
</html>- 方法二：position:relative + 子元素：position:absolute + bottom：0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平列表的底部对齐</title>
<style type="text/css">
.parent{
height:500px;
width:800px;
border:1px solid #CCC;
text-align:center;
position:relative;
}
.child{
position:absolute;
bottom:0;
}
.child_a{
width:150px;
height:100%;
left:15px;
background:red;
}
.child_b{
width:150px;
left:180px;
height:75%;
background:green;
}
.child_c{
width:150px;
left:345px;
height:50%;
background:black;
}
.child_d{
width:150px;
left:510px;
height:25%;
background:yellow;
}
</style>
</head>
<body>
<div class="parent">
<div class="child child_a">我是最左边的</div>
<div class="child child_b">我是老二，嘿嘿</div>
<div class="child child_c">我是倒数第二！能看到我吗？</div>
<div class="child child_d">我是倒数第一吆~</div>
</div>
</body>
</html>- 方法三：父元素：dispaly:flex + align-items:flex-end
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平列表的底部对齐</title>
<style type="text/css">
.parent{
height:500px;
width:800px;
border:1px solid #CCC;
text-align:center;
display:flex;
align-items:flex-end;
}
.child{
margin-left:15px;
}
.child_a{
width:150px;
height:100%;
background:red;
}
.child_b{
width:150px;
height:75%;
background:green;
}
.child_c{
width:150px;
height:50%;
background:black;
}
.child_d{
width:150px;
height:25%;
background:yellow;
}
</style>
</head>
<body>
<div class="parent">
<div class="child child_a">我是最左边的</div>
<div class="child child_b">我是老二，嘿嘿</div>
<div class="child child_c">我是倒数第二！能看到我吗？</div>
<div class="child child_d">我是倒数第一吆~</div>
</div>
</body>
</html>- 方法四：弹性盒模型
相关重点文章推荐：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平列表的底部对齐</title>
<style type="text/css">
.parent{
height:500px;
width:800px;
border:1px solid #CCC;
display:box; // 设置为盒子显示
display:-moz-box;
display:-webkit-box;
orient:horizontal; // 定义父元素内子元素的流动
-mozbox-orient:horizontal;
-webkit-orient:horizontal;
box-align:end;
-moz-box-align:end;
-webkit-box-align:end;
}
.child{
}
.child_a{
width:200px;
height:500px;
background:red;
}
.child_b{
background:green;
width:200px;
height:350px;
}
.child_c{
background:black;
height:250px;
width:200px;
}
.child_d{
width:200px;
height:150px;
background:yellow;
}
</style>
</head>
<body>
<div class="parent">
<div class="child child_a">我是最左边的</div>
<div class="child child_b">我是老二，嘿嘿</div>
<div class="child child_c">我是倒数第二！能看到我吗？</div>
<div class="child child_d">我是倒数第一吆~</div>
</div>
</body>
</html>问题二：实现一个幻灯布局
一个幻灯片效果如图：
已知结构如下：
<div class="slide">
<!-- 图片省略 -->
<!-- 以下是指示器 -->
<div class="pointer"><i></i><i></i><i></i></div>
</div>要求如下：幻灯（slide）宽高未知，指示器（pointer）在底部且水平居中，距离底部10px，指示器中的圆直径为10px，个数未知，背景为黑色，间距为5px，请完成CSS。
解答：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>幻灯图</title>
<style type="text/css">
.slide{
width:600px;
height:300px;
background:#9dc3e6;
position:relative;
}
.pointer{
position:absolute;
left:50%;
transform:translate(-50%);
bottom:10px;
}
.pointer i{
display:block;
float:left;
margin-right:5px;
width:10px;
height:10px;
border-radius:50%;
background-color:black;
}
.pointer i:last-child{
margin-right:0;
}
</style>
</head>
<body>
<div class="slide">
<!-- 图片省略 -->
<!-- 以下是指示器 -->
<div class="pointer">
<i></i>
<i></i>
<i></i>
</div>
</div>
</body>
</html>多列布局
问题一：一个全等四宫格的实现
一个未知宽高的容器，要被均分为四个相同大小格子（即四个容器），且格子间有10px间距（即十字型空隙），有哪些方法可以解决呢？
方法一：（效果不好，Firefox浏览器效果基本可以，需要css微调）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一个全等四宫格的实现</title>
<style type="text/css">
*{margin:0;padding:0;}
.parent{
border:1px solid #CCC;
margin:0 auto;
width:420px;
height:420px;
}
.box{
background:#009999;
height:200px;
width:200px;
display:inline-block;
}
.box:nth-child(1){
margin:0 17px 0 0;
}
.box:nth-child(even){
margin:0 0 0 -2px;
}
.box:nth-child(3){
margin:17px 17px 0 0;
}
</style>
</head>
<body>
<div class="parent">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
</div>
</body>
</html>方法二： （display：flex）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一个全等四宫格的实现</title>
<style type="text/css">
.parent{
width:410px;
height:410px;
border: 1px solid #CCC;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:space-between;
}
.box{
width:200px;
height:200px;
background:#009999;
}
.box3{
align-self:flex-end;
}
.box4{
align-self:flex-end;
}
</style>
</head>
<body>
<div class="parent">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
</div>
</body>
</html>方法三：box-sizing:border-box; background-clip:content-box;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一个全等四宫格的实现</title>
<style type="text/css">
html,body{height:100%;}
.parent{
width:50%;
height:50%;
border: 1px solid #CCC;
}
.box{
background:#009999;
float:left;
width:50%;
height:50%;
box-sizing:border-box;
background-clip:content-box;
}
.box1{
padding-right:10px;
padding-bottom:10px;
}
.box2{
padding-bottom:10px;
}
.box3{
padding-right:10px;
}
</style>
</head>
<body>
<div class="parent">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
</div>
</body>
</html>全屏布局
问题：已知HTML结构和效果图如下：
<div class="a">
<div class="b">Hello World</div>
</div>假设以上父元素称为A，子元素称为B
请写出CSS以实现以下弹窗需求：弹窗（B）固定在浏览器窗口中间，弹窗背景色为白色，弹窗宽高由其内容决定，弹窗四周为黑色半透明（0.5透明度）遮罩。
HTML代码：
<div class="a">
<div class="b">
<!-- 测试弹窗高度由内容决定
<p>Hello World</p>
<p>Hello World</p>
-->
Hello World
</div>
</div>CSS代码：
.a {
position: fixed;
height: 100%;
width: 100%;
background-color: #000;
opacity: 0.5;
filter: alpha(opacity=50);
}
.b {
background-color: #fff;
display: inline-block;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}响应式
高清屏的背景图片适配
当我们把一个图标做成CSS中的背景图，在视网膜屏上预览时会发现图标是模糊的，所以我们会同时准备一个2倍大小的图标给高清屏，那么问题来了，怎么实现在普通屏下是普通背景图，而在高清屏下是用的高清图呢？
解答：
方法一：<img> 标签引用的图片
通过js做自动适配
<img class="photo" src="./photo.jpg" style="width:300px;height:200px;" />
<script type="text/javascript">$(document).ready(function () {
if (window.devicePixelRatio > 1) {
var images = $("img.photo");
images.each(function(i) {
var x1 = $(this).attr('src');
var x2 = x1.replace(/(.*)(\.\w+)/, "$1@2x$2");
$(this).attr('src', x2);
});
}
});</script>Retina.js 提供了更加完善的解决方案，自动匹配屏幕分辨率的同时，还可以检测服务器上是否存有当前图片的 @2X 版本，以决定是否替换。
优点：
操作简单
普通屏幕下不会加载 @2X 的大尺寸图片，节约带宽
缺点：
Retina 屏幕下，标准图片和高清的图片都会被加载
图片在显示过程中会被重绘
有些老版本浏览器下存在兼容问题（一些老版本浏览器如 IE6、7 会显示得非常失真）
方法二：CSS的media标签
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5), /* 注意这里的写法比较特殊 */
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
#logo {
background-image: url(./logo@2x.png);
background-size: 100px auto;
}}
优点：
只会加载匹配当前设备的最适图片
跨浏览器兼容
缺点：
如果背景图片很多的话，需要编写非常冗长的代码
方法三：css的image-set方法
background-image: -webkit-image-set(url(./logo.png) 1x, url(./logo@2x.png) 2x); **优点：**css中编写，图片集中，代码量少
缺点：存在兼容性问题，仅支持background-image属性，而不能使用在“”标签中，是css4的草案。
问题：完成响应式布局的实现
已知一个自适应布局的HTML结构如下：
<div class="parent">
<div class="side"></div>
<div class="main"></div>
</div>请完成以下响应式要求：
- 默认情况，PC电脑（假设视窗都大于等于1000px）访问：两列布局，.parent宽960px且水平居中，左列.side宽300px，右列.main宽650px，列间距10px。
- 当用平板（假设视窗都大于400px且小于1000px）访问：两列布局，.parent宽度撑满，右列.main自适应剩余宽度，两列间距仍旧为10px。
- 当用手机（假设视窗都小于等于400px）访问：上下两行布局，.parent宽度撑满，.side和.main宽度也撑满，行间距为10px。
解答
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>完成响应式布局的实现</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
background-color: lightgray;
}
/* 默认情况：两列布局，.parent宽960px且水平居中，左列.side宽300px，右列.main宽650px，列间距10px*/
.parent {
width: 960px;
height: 100%;
margin: 0 auto;
}
.side {
float: left;
background-color: lightblue;
width: 300px;
height: 100%;
}
.main {
background-color: red;
width: 650px;
margin-left: 310px;
height: 100%;
}
/* 当用平板（假设视窗都大于400px且小于1000px）访问：两列布局，.parent宽度撑满，右列.main自适应剩余宽度，两列间距仍旧为10px。 */
@media screen and (min-width: 400px) and (max-width: 1000px) {
.parent {
width: 100%;
}
.main {
width: auto;
}
}
/* 当用手机（假设视窗都小于等于400px）访问：上下两行布局，.parent宽度撑满，.side和.main宽度也撑满，行间距为10px。 */
@media screen and (max-width: 400px) {
.parent {
width: 100%;
}
.side {
width: 100%;
float: none;
}
.main {
width: 100%;
margin-left: 0;
margin-top: 10px;
}
}
</style>
</head>
<body>
<div class="parent">
<div class="side"></div>
<div class="main"></div>
</div>
</body>
</html>页面优化
问题：页面优化的方法
减少请求。
减少文件大小。
提升页面性能。
提升可读性，维护性。
减少请求
- 图片合并（62%的内容是图片）
1）选择合适的图片格式（PNG，JPG）。
2）压缩图片（imageOptim,imageAlpha,JPEGmini）
- CSS合并
1）多个CSS文件合并为一个。
2）少量CSS样式内联
3）避免使用import（同步的单线程请求）的方式引入CSS文件。
4）值缩写。（margin,padding,border,border-radius,font,background）
5）省略值为0的单位。（0px,0%,0.5）
6）颜色值最短表示（red,rgb(255,255,0),rgba,#333）
7）选择器合并(.m-logo,.m-var)
8）文件压缩（上线前，去空格）
页面性能优化
加载顺序（CSS放上面，JS放下面）
减少标签数量
选择器长度
耗性能属性（expression）
图片设置宽高
所有表现用CSS实现
可读性，可维护性
规范
语义化
尽量避免HACK
模块化
注释
问题：代码优化
请对以下CSS进行优化:
h1{font-weight: bold;}
h2{font-weight: bold;}
h3{font-weight: bold;width:100px;}
.g-bd{
border-top: 1px solid #000;
border-right: 1px solid #f00;
border-bottom: 1px solid #f00;
border-left: 1px solid #000;
color: #bbff22;
}
.m-tab{
margin-top: 10px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 10px;
color: rgb(255,0,0);
}
.m-tab li a{
display: block;
padding: 0px 10px;
font-family: "Microsoft YaHei", simsun;
font-size: 20px;
line-height: 1.5;
}
.m-side{
width: 200px;
background-image: url(bg.png);
background-repeat: repeat-y;
background-color: #ccc;
}解答：
h1,h2,h3{font-weight: bold;}
h3{width:100px;}
.g-bd{border: 1px solid #000;border-color: #000 #f00 #f00 #000;color: #bf2;}
.m-tab{margin:10px 10px 20px;color: red;}
.m-tab li a{display: block;padding: 0 10px;font: 20px/1.5 "Microsoft YaHei", simsun;}
.m-side{width: 200px;background: #ccc url(bg.png) repeat-y;}规范
####问题：制订一份CSS规范
解答：
一、文件规范
1.文件按照通用类和业务类进行归档
2.文件使用外联引入，其他一些样式使用内联引入
3.文件名采用小写字母，可适当加中划线，然后使用数字来表示版本
4.编码采用utf-8格式
二、注释规范
1.块状注释：统一缩进，在被注释对象之上
2.单行注释：文字两端空格，在被注释对象之上
3.行内注释：文字两端空格，分号之后
三、命名规范
1.采用分类命名，布局类以g-开头，实际内容以m-开头
2.命名具有可读性且长度适中，适当缩写
3.语义化命名方式
四、书写规范
1.多行书写，便于阅读
2.默认缩进为两个空格
3.css规则内一个空格
4.需要保留最后一个属性值的分号
5.属性书写顺序按照：位置属性——自身盒模型相关属性——显示属性 的顺序来书写
6.尽量少使用Hack，ie6采用_开头，ie67采用*开头，先写ie67的，再写ie6的
7.color命名采用十六进制，且尽量缩写
8.url()文件格式不加引号
五、其他规范
1.<!DOCTYPE html> 顶格开始文档声明
2.闭合标签均闭合，自闭合标签也需要闭合
3.属性采用单引号，readonly、checked等属性可以直接写，不用=""
4.采用缩进体现层级，正确嵌套，但不宜太深，影响性能
5.注释：<!-- A --> xxx <!-- /A -->
6.标签属性均小写
7.文件语义化命名，且不能过长
8.保留源文件
9.使用sprite技术来合并图片
10.图片按照模块、业务、页面来划分
模块化
问题：页面模块化优点
解答：
利于多人协同开发
便于扩展和重用
可读性，可维护性好
灵活，快速，高效.不会出现样式污染
7265
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
