前端开发工程师 - 04.页面架构 - CSS Reset & 布局解决方案 & 响应式 & 页面优化 &规范与模块化

如图所示，一个水平排列的列表，每项高度都未知，但要求底部对齐，有哪些方法能够解决呢？html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平列表的底部对齐</title>
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
        }
        .parent {
            display: flex;
            align-items:flex-end;
            height: 30%;
            width: 50%;
            margin: auto;
        }
        .children {
            float: left;
            width: 25%;
            margin-bottom: 10px;
        }
        #item_1 {
            height: 50%;
            background-color: #006899;
        }
        #item_2 {
            height: 33%;
            background-color: #9f0000;
        }
        #item_3 {
            height: 17%;
            background-color: #00970a;
        }
        #item_4 {
            height: 40%;
            background-color: #009999;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="children" id="item_1"></div>
        <div class="children" id="item_2"></div>
        <div class="children" id="item_3"></div>
        <div class="children" id="item_4"></div>
    </div>
</body>
</html>

实现一个幻灯布局

一个幻灯片效果如图：css3

已知结构以下：express

<div class="slide">浏览器

架构

编辑器

<div class="pointer"><i></i><i></i><i></i></div>ide

</div>模块化

要求以下：幻灯（slide）宽高未知，指示器（pointer）在底部且水平居中，距离底部10px，指示器中的圆直径为10px，个数未知，背景为黑色，间距为5px，请完成CSS。工具

.slide {
    display: flex;
    align-items:flex-end;
    height: 200px;
    width: 400px;
    margin: auto;
    margin-top: 200px;
    background-color: #9dc3e6;
}
.pointer {
    margin-left: 50%;
    transform: translateX(-50%);
    text-align: center;
    margin-bottom: 10px;
}
.pointer i {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 5px;
    border-style: solid;
    background-color: black;
    border-radius: 50%;
}

多列布局

全屏布局

第3章--响应式

浏览网页使用的设备屏幕大小迥异，如何保证页面在不一样设备上都正常显示呢？

优势：无需为不一样设备编写对应的页面 --> 下降开发成本、维护成本

缺点：页面中某些部分在某些设备上会被隐藏（资源加载了，可是只是用CSS隐藏了）

initial-scale为0时，初始化不会进行等比缩小
user-scalable为no时，用户没法手动缩放

1. 最基本要求：少用定宽属性，使用自适应（都是定宽则会出现水平滚动条）

2. 若是左边的菜单是定宽，右边的主内容为自适应，在电脑和pad端均可行，可是在手机端会出现主内容宽度过窄

想要实现菜单和主内容在手机端布局成上下排列（即布局方式改变了）-- 媒体查询 @media

使用@media媒体查询resolution的方式，设定图片不一样分辨率的url便可

已知一个自适应布局的HTML结构以下：

</div>

请完成如下响应式要求：

一、默认状况，PC电脑（假设视窗都大于等于1000px）访问：两列布局，.parent宽960px且水平居中，左列.side宽300px，右列.main宽650px，列间距10px。

二、当用平板（假设视窗都大于400px且小于1000px）访问：两列布局，.parent宽度撑满，右列.main自适应剩余宽度，两列间距仍旧为10px。

三、当用手机（假设视窗都小于等于400px）访问：上下两行布局，.parent宽度撑满，.side和.main宽度也撑满，行间距为10px。

响应式的单元测验

第4章--页面优化

避免使用import方式引入css文件（每一个import都会产生一个请求，且这些请求是串行的）

选择合适的图片格式：半透明的小图标：PNG；色彩绚丽尺寸比较大：JPG

将css文件放在<head>中，在head中找到css文件进行下载并解析；当在body中遇到相应元素时，就能够直接将解析好的对应css样式应用到元素上；这样用户看到的页面就很顺畅

若是将css文件放到底部的话，极可能第一次渲染的时候没有将这些样式应用到元素上

将js文件放在<body>的底部，由于js的加载和执行会阻塞其余资源的加载和页面的执行和渲染，并且js的不少逻辑也是等到页面加载完成后才开始处理的

减小标签数量：标签数量不少，当js遍历页面的DOM时会对性能产生影响；对可读性也有提高

好比expression的计算量较大、filter、border-radius、box-shadow、gradients等

img标签中的图片尽可能不要进行缩放，尽可能直接使用原图大小

由于：浏览器在解析html代码时，有可能在图片下载完成前就对页面的布局进行了定位，若是没有给图片设置固定宽高或原图宽高与设置宽高不一样，浏览器在图片下载完成后，须要进行回流和重绘，将图片从新渲染一遍。

能用css实现的尽可能都用css来实现，好比选中状态的样式能够经过css或js实现，尽可能使用css

语义化：对搜索引擎和屏幕阅读器友好，也能增长可读性和可维护性

尽可能避免hack：有的时候为了兼容不一样浏览器会进行一些hack，须要想一下是否有别的方式代替hack，若是没有办法或代价比较大的时候才用hack的方式；hack的方式也要统一，好比对IE6就用*号、对IE7就用_号。

模块化：把页面中一系列相关的部分作成一个模块，好比导航模块、列表模块等

1. h1, h2, h3中font-weight属性重复
2. .g-bd中border属性可简写
3. .g-bd中color属性可缩短表示
4. .m-tab中margin属性可简写
5. .m-tab中color属性可缩短表示
6. .m-tab li a 选择器可省略中间的li (甚至.m-tab也能够省略)
7. .m-tab li a中padding的0px的单位可省略
7. .m-tab li a中的font属性可简写
8. .m-side中background属性可简写

第5章--规范与模块化

每一个工程师都有本身的规范，人员的更替，使得后期维护成本提升

规范

行内样式：不推荐--表现与内容分离（可是某些时候必须用到）

好比对于布局类样式，可使用"g-"做为前缀等等自定义命名规则

单行与多行：单行：节省空间、编辑器可能造成水平滚动条；多行：文件可能须要竖直滚动条

空格与分号：缩进：2个或4个空格；规则内空格，好比key-value之间的空格等；须要保留最后一个属性的分号（为了不没必要要的错误）

文本属性和其余修饰：font, text-align, text-decoration, vertical-align, white-space, color, background等

值格式：统一属性值格式，好比颜色（通常选择#xxx的形式）；无引号/单引号/双引号

属性：选择双引号仍是单引号；某些属性是否写属性值，好比: <input readonly>仍是<input readonly="readonly">

层级：用缩进体现层级，提升可读性；标签正确嵌套(好比<ul>下嵌套<li>)，且不要太深--性能问题

注释：好比使用什么格式？如注释头注释尾  ......

图片合并：尽量使用sprite技术，指定划分方式，如按模块、按业务等

模块化

在学完了本课程后，推荐你们学习网易内部的CSS规范以及模块化方案——NEC：

用模块化的思想实现下图所示导航（写出html和css代码，CSS只需写出选择器）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模块化实现</title>
    <style type="text/css">
        .m-nav {}
        .m-nav .m-elem {}
        .m-nav .selected {}
    </style>
</head>
<body>
    <ul class="m-nav">
        <li class="m-elem seleted">分类方法</li>
        <li class="m-elem">命名规则</li>
        <li class="m-elem">代码格式</li>
        <li class="m-elem">优化方案</li>
        <li class="m-elem">最佳实践</li>
        <li class="m-elem">典型错误</li>
    </ul>
</body>
</html>

前端开发工程师 - 04.页面架构 - CSS Reset & 布局解决方案 & 响应式 & 页面优化 &规范与模块化

04.页面架构

第1章--CSS Reset

第2章--布局解决方案

居中布局

水平列表的底部对齐