前端主流布局系统进阶与实战笔记
前端主流布局系统进阶与实战
第1章 课程介绍(了解本课程必看)
采用传统开发模式采用流行框架
整体的前端井喷式的发展单一布局已经无法满足需求
精通现代布局四大核心技术
grid网格布局flex弹性布局响应式布局크
设计图相关概念PhotoShop切图详解与设计师配合标注工具：蓝湖、PxCook智能平台：imgCook
7个综合案例20+常见布局方案更多IT教程 www.ukoou.com实战经验1个综合项目特殊布局案例
CSS还原UI设计布局中的尺寸与位置grid网格布局flex弹性布局移动端适配布局响应式布局综合实战扩展布局方案Ant Design Pro管理系统
弹性网格浮动定位媒体查询响应式remVW50+核心知识点逻辑属性方法论命名规范display信息标注PxCookBFC
视觉差不定项居中均分列等高粘性页脚超大图两列与三列溢出项20+布局案例图文混排瀑布流组合排列叠加自适应行列多栏栅格
12图文教程
第2章 CSS还原UI设计
CSS发展史与CSS模块划分
HTML的诞生
移动端概念及UI设计稿尺寸
书写模式与逻辑属性
CSS方法论及样式规范
swiper轮播图7个知乎导航综合案例百度热词风云榜B站移动端首页小米商品导航菜单Ghost博客系统网易移动端首页
整体框架搭建侧边栏侧边栏及代码划分flex布局交互行为1个实战项目主体区域信息展示设置区域flex布局模块与元件grid布局Ant Design Pro管理系统设置区域信息展示导航菜单交互行为响应式布局响应式交互
Photoshop还原UI设计蓝湖App快速标注信息尺寸位置颜色文字imgcook设计稿智能平台PxCook自动标注工具
Photoshop还原UI设计版本要求：Photoshop CC 2019尺寸、文字、颜色等信息的获取
窗口-信息
切图操作：启动生成器，勾选图像资源
首选择-启动生成器 选择-生成-图像资源
选择图层 autocreate 图层前面+200%-2x 1x图
蓝湖App快速标注信息蓝湖是一款设计图的共享平台，帮助互联网团队更好地管理设计图。自动生成设计图标注，与团队共享设计图，展示页面之间的跳转关系。蓝湖支持从Sketch、Ps、Xd一键共享、在线讨更多IT教程论，蓝湖已经成为新一代产品设计的工作方式类似App：measure、zeplin等
切图标🐖
PxCook自动标注工具像素大厨是款适合设计师们使用的一款免费、交互流畅以及全平台支持的标注切图软件。功能多样化且非常实用，操作上也很是简单，它能够支持对Ps和Sketch设计元素尺寸、元素距离、文本样式与颜色的智能标注，并且还支持智能切图
ps+PxCook
imgcook设计稿智能平台imgcook专注以Sketch、PSD、静态图片等形式的视觉稿作为输入，通过智能化技术一键生成可维护的前端代码，包含视图代码、数据字段绑定、组件代码、部分业务逻辑代码等。目前此产品是阿里巴巴前端委员会智能化小组的服务化的内外落地产品
UI=>Code imgcook same free=AI flush + diy+div ++++
https://www.imgcook.com/editor#/?fileparse=sketch&spm=a212rn.12314920.getstart
-->simple-server-extend....+toolx lean core p pr
Web前端开发工程师如何跟UI设计师配合了解常见三种设计稿源文件，即：PSD、Sketch、Xd如何利用对应的软件进行U还原标注信息工具：蓝湖App、Pxcook
if error
智能代码生成平台：imgcook
tx mcu ulm
black/white box test
reverse crack....lc hc ....
think method ...
第3章 布局中的尺寸与位置
CSS盒模型的组成块级盒子与内联盒子尺寸自适应盒模型的特性标准盒模型与怪异盒模型
浮动样式详解浮动特性注意点位置定位样式详解定位特性注意点
point end endless
详解display属性（图文）书写模式与逻辑属性（图文)BFC块级格式化上下文（图文）标签默认样式及清除方案（图文)测试题与练习题
CSS盒模型的组成在CSS中，所有的元素都被一个个的“盒子（box)”包围着更多IT教程 w，理解这些“盒子”的基本原理，是我们使用CSS实现准确布局、处理元素排列的关键盒子的组成：content内容、padding 内填充、border边框、margin 外边距
padding不能为负值，而margin可以为负值
背景色会平铺到非margin的区域
margin-top传递的现象及解决方案
innerf+out+border/bfc
margin上下叠加的现象及解决方案pou. com
块级盒子与内联盒子在CSS中我们广泛地使用两种“盒子”——块级盒子（blockbox)和内联盒子(inline box)。这两种盒子会在页面中表现出不同的行为方式块级盒子：div、p、h1..内联盒子：span、a、strong…G
块级盒子的特性独占一行支持所有样式不写宽度的时候，跟父容器的宽度相同更多IT教程www.ukoou.com所占区域是一个矩形
内联盒子的特性更多IT教程 www.ukoou.com盒子不会产生换行有些样式不支持，例如：width、height等不写宽度的时候，宽度由内容决定所占的区域不一定是矩形 内联标签之间会有空隙
chid-nosetwidth + coomcale
标准盒模型与怪异盒模型在标准模型中，如果你给盒设置width和height，实际设置的是content box。padding和border再加上设置的宽高一起决定整个盒子的大小
在怪异模型中，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分
box-sizing属性content-box : width, height -> contentborder-box : width, height -> content + padding + borderトイ应用1：量取尺寸时不用再去计算一些值
box-sizing
应用2：解决一些需要设置百分比和盒模型值
浮动样式详解当元素被浮动时，会脱离文档流，根据float的值向左或向右移动，直到它的外边界碰到父元素的内边界或另一个浮动元素的外边界为止，是CSS布局中实现左右布局的一种方式文档流：文档流是元素在Web页面上的一种呈现方式，按照出现的先后顺序进行排列
float css order
清除浮动的方案clear属性BFC空标签.clearfix.after
浮动特性注意点
只会影响后面的元素
文本不会被浮动元素覆盖
浮动特性注意点只会影响后面的元素文本不会被浮动元素覆盖具备内联盒子特性：宽度由内容决定
具备块级盒子特性：支持所有样式
浮动放不下，会自动换行
中top,right,bottom 和left属性则决定了该元素的最终位置staticrelativefixed
相对定位及特性相对定位的元素是在文档中的正常位置偏移给定的值不影响其他元素布局
相对于自身进行偏移
绝对定位的元素脱离了文档流，绝对定位元素不占据空间
具备内联盒子特性：宽度由内容决定
绝对定位的元素脱离了文档流，绝对定位元素不占据空间具备内联盒子特性：宽度由内容决定具备块级盒子特性：支持所有样式
绝对定位元素相对于最近的非static祖先元素定位。当这样的祖先元素不存在时，则相对于可视区定位
固定定位与绝对定位相似，但是会固定在可视区中
固定定位及特性固定定位与绝对定位相似，但是会固定在可视区中具备内联盒子特性：宽度由内容决定具备块级盒子特性：支持所有样式固定定位元素不受祖先元素影响更多IT教程 www.uko
黏性定位及特性粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位
display属属性性的的作作用
外部值就是定义自身元素的外部表现，而不影响其内的子元素。
block：表示块级盒子像p、div等标签默认就是块级盒子。
inline：表示内联盒子 像span、i等默认就是内联盒子。
run-in：实验性质的属性，浏览器支持不好。
内部值就是定义子元素布局的。像flex、grid这些设置都会影响到子元素的布局形式，后面章节将详细的对
flex和grid进行讲解。
flow-root：一个BFC的块级盒子(注：BFC后面小节会讲解)。
table：带有内部表格布局的块级盒子。
flex：带有内部弹性布局的块级盒子。
grid：带有内部网格布局的块级盒子。
list-item属性值是生成一个容纳内容和单独的列表行内元素盒的块级盒子，目的是为了用div去代替
2
标签之类的，
元素默认就是list-item;
、display-internal(属属性性值值)
display-box(显显示示值值)
contents：只影响其内容的样式生效，比如：字体大小、文字颜色等；但是像背景色、边框是不会生效的。
none：从盒子树中移除，包括其所有后代元素。
display-legacy(混混合合值值)
inline-block：对外表现成内联盒子，对内表现成块级盒子
inline-table：对外表现成内联盒子，对子元素表现成表格盒子
inline-flex：对外表现成内联盒子，对子元素表现成弹性盒子
inline-grid：对外表现成内联盒子，对子元素表现成网格盒子
global(全全局局值值
inherit：继承父元素的display属性
initial：不管父元素怎么设定，恢复到浏览器最初始时的display属性
unset：unset混合了 inherit 和 initial。如果父元素设值了，就用父元素的设定，如果父元素没设值，就用浏览器的缺省设
定
书写模式即writing-mode属性，可以帮助以上下阅读的国家去展示网页内容。它定义了文本水平或垂直排布以及在块级元素中文本的行进方向。
可选值有：
horizontal-tb 水平方向自上而下的书写方式
vertical-rl垂直方向自右而左的书写方式
vertical-lr 垂直方向自左而右的书写方式
sideways-rl内容垂直方向从上到下排列
sideways-lr 内容垂直方向从下到上排列
extends i18n
BFC块块级级格格式式化化上上下下文文
一一、、BFC概概念念
BFC即Block FormattingContexts(块级格式化上下文)，它是W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，
并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通
容器所没有的一些特性。
通俗一点来讲，可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
二二、、BFC触触发发条条件件
满足以下条件之一，即可触发BFC：
float的值不是none
position的值不是static或者relative
display的值是inline-block、table-cell、flex、table-caption或者inline-flex
overflow的值不是visible
下面的box盒子就是一个BFC独立容器：
BFC还可以解决前面浮动遇到了父容器高度塌陷的问题，也就是不管里面子元素是否浮动，都不会因为脱离文档流对容器
高度造成影响。
在现代布局flex和grid中，是默认自带BFC规范的，所以可以解决非BFC盒子的一些问题，这就是为什么flex和grid能成为更
好的布局方式原因之一。
reset css
https://meyerweb.com/eric/tools/css/reset/
由于Reset CSS相对“暴力”，不管你有没有用，统统重置成一样的效果，且影响的范围很大，所以更加“平和”的一种方式Normalize CSS诞生了。
Normalize CSS可以看成是一种Reset CSS的替代方案。创造Normalize CSS有下面这几个目的：
保护有用的浏览器默认样式而不是完全去掉它们
一般化的样式：为大部分HTML元素提供
修复浏览器自身的bug并保证各浏览器的一致性
优化CSS可用性：用一些小技巧
解释代码：用注释和详细的文档来
第4章 flex弹性布局
flex弹性概念弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间
更多IT教程www.ukoou.com主轴与交叉轴换行与缩写Flex容器交叉轴对齐详解主轴对齐详解
不定项居中布局内联和块的上下左右居中布局容器布局均分列布局组合嵌套布局
flex-grow扩展比例flex-shrink收缩比例Flex子项flex-basis及flex缩写order与align-self
两列与三列布局等高布局子项布局Sticky Footer布局溢出项布局
flex-direction
flex-wrap
flex-flow
flex
justify-content
align-items
align-content
order
flex-grow
flex-shrink
flex7In
flex-basis
flex
align-self
. main div: nth-of-type(1){ margip-right: auto;
one一个 right全flex1
.wrap-flex>div*6
div: nth-of-type(2){ margip-right: auto;
div: nth-of-type(4){ margip-right: auto;
11 11 11
flex-grow默认值是0，表示不占用剩余的空白间隙扩展自己的宽度
当比例值大于等于1的时候，都会占满整个空间
等价 flex:1
多div 1 2 占满分成3分 1 2
默认的*//* flex-grow: 0;/*如果比例值为1，就占满剩余的所有空间*/T400 * 0.5 -> 200flex-grow: 0.5;
不溢出 写不写默认值是1，表示flex容器空间不足时，元素的收缩比例flex-shrink
0 不缩水
300 + 400 - 500 -> 200 *//*/* 300- 3/7200400 - 4/7200*//*300-6/10200400-4/10200＊/
默认值是auto，指定了flex元素在主轴 方向上的初始大小flex-basis
flex-basis 主轴 size direction
flex grow shrink basis
max-min-width
第5章 grid网格布局
grid网格概念CSS网格是一个用于web的二维布局系统。利用网格，你可以把内容按照行与列的格式进行排版。另外，网格还能非常轻松地实现一些复杂的布局
合并网格及网格命名定义网格及fr单位更多IT教程容器与子项网格间隙及简写网格对齐方式及简写
基于线的元素放置显式网格与隐式网格grid容器与子项repeat()与minmax()子项对齐方式
多种组合排列布局比定位更方便的叠加布局布局案例容器自适应行列布局栅格布局
grid容器justify-itemsalign-itemsgrid-template-rowsplace-itemsgrid-template-columnsjustify-contentgrid-template-areasgrid容器align-contentgrid-templateplace-contentgrid-row-gap grid-auto-flowgrid-column-gapgrid-auto-rowsgrid-gapgrid-auto-columns
grid子项grid-areajustify-selfalign-selfgrid-column-startgrid子项place-selfgrid-column-endgrid-row-startgrid-rowgrid-columngrid-row-end
grid-template-rowsgrid-template-columns基于网格行和列的维度，去定义网格线的名称和网格轨道的尺寸大小
px % auto
1fr =flex-grow=1 2fr=2
使用命名方式定义网格区域，需配合grid-area属性进行使用grid-template-areas
grid-template-rows, grid-template-grid-columns和grid-template-areas属性的缩写grid-template
<body>
<style>
.wrap{
width: 50vh;
height: 50vh;
/* border: solid 1px red; */
display: grid;
/* grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: 'a1 a1 a2' 'a1 a1 a2' 'a a a'; */
grid-template:'a1 a1 a2' 1fr 'a1 a1 a2' 1fr 'a a a' 1fr / 1fr 1fr 1fr;
}
.item{
border: 1px solid black;
box-sizing: border-box;
}
.item:nth-of-type(1){
grid-area: a1;
border: 1px solid green;
}
.item:nth-of-type(2){
grid-area: a2;
border: 1px solid yellow;
}
.item:nth-of-type(3){
grid-area: a;
border: 1px solid blue;
}
</style>
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
grid-row-gapgrid-column-gapgrid-gap
用来设置元素行列之间的间隙大小，推荐使用row-gap，column-gap、gap
<style>
.wrap{
width: 50vh;
height: 50vh;
/* border: solid 1px red; */
display: grid;
/* grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: 'a1 a1 a2' 'a1 a1 a2' 'a a a'; */
grid-template:'a1 a1 a2' 1fr 'a1 a1 a2' 1fr 'a a a' 1fr / 1fr 1fr 1fr;
/* grid-column-gap: 20px;
grid-row-gap: 20px; */
column-gap: 20px; /*也可以在flex布局中使用*/
row-gap: 20px; /*也可以在flex布局中使用*/
}
.item{
border: 1px solid black;
box-sizing: border-box;
}
.item:nth-of-type(1){
grid-area: a1;
border: 1px solid green;
}
.item:nth-of-type(2){
grid-area: a2;
border: 1px solid yellow;
}
.item:nth-of-type(3){
grid-area: a;
border: 1px solid blue;
}
</style>
网格对齐方式及简写justify-items align-items place-items
默认值stretch，指定了子项在网格中的对齐方式
justify-content默认值stretch，指定了所有网格在grid容器中的对齐方式align-content place-content
.wrap{
width: 50%;
height: 50%;
border: solid 1px red;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
/* justify-items: center;
align-items: center; */
/* place-items: end start; */
}
.item{
/* width: 50px;
height:50px; */
border: 1px solid black;
box-sizing: border-box;
}
<body>
<style>
.wrap{
width: 50vh;
height: 50vh;
border: solid 1px red;
display: grid;
grid-template-columns: 50px 50px 50px ;
grid-template-rows: 50px 50px 50px;
/* justify-content: end; */
/* align-content: end; */
place-content: center end;
}
.item{
border: 1px solid black;
box-sizing: border-box;
}
</style>
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
指定在显示网格之外的隐式网格，如何排列及尺寸大小
grid-auto-flow
grid-auto-rows
grid-auto-columns
超出是隐式网格
/*默认：row就是行产生隐式网格*/工grid-auto-flow: row;/*可以调节产生隐式网格的高度*/grid-auto-rows: 100px;
dense 紧密的grid-auto-flow: row dense;＊//*
grid-column-start: 2;
<body>
<style>
.wrap{
width: 50vh;
height: 50vh;
border: solid 1px red;
display: grid;
grid-template-columns: 50px 50px 50px;
grid-template-rows: 50px;
/* grid-auto-flow: row; */
grid-auto-flow: row dense;
grid-auto-rows: 50px;
/* reverse columns */
}
.item{
border: 1px solid black;
box-sizing: border-box;
}
.item:nth-of-type(1){
grid-column-start: 2;
}
</style>
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
基于线的元素放置grid-areajustify-selfgrid-column-startalign-selfgrid子项place-selfgrid-column-endgrid-rowgrid-row-startgrid-columngrid-row-end
grid-column-start表示grid子项所占据的区域的起始和终止位置，包括水平方向和垂直方向grid-column-endgrid-row-startgrid-row-end
默认值：auto
span 2 2f
基于线对应位置的缩写方式，通过/作为分割grid-rowgrid-column
grid-area
grid-row-start, grid-column-start, grid-row-end以及grid-column-end属性的缩写，以及额外支持grid-template-areas设置的网格名称
justify-selfalign-self跟place-item用法相同，只不过是操作指定的子项place-self
配合aero
<body>
<style>
.wrap{
width: 50vh;
height: 50vh;
border: solid 1px red;
display: grid;
grid-template-columns:[col1] 1fr[col2] 1fr [col3] 1fr [col4];
grid-template-rows:[row1] 1fr [row2] 1fr [row3] 1fr [row4];
}
.item{
width: 50px;
height: 50px;
border: 1px solid black;
box-sizing: border-box;
/* grid-column-start: col1; */
/* grid-column-end: col4; */
/* grid-column-start:span 2; */
/* grid-column-start: 2; */
/* grid-column-end: 3; */
/* grid-column: 2 / 3; */
/* grid-row-start: 2; */
/* grid-row-end: 4; */
/* grid-row: 2 / 4; */
grid-area: 2/2/4/3;
}
.item:nth-of-type(1){
/* justify-self: center; */
/* align-self: center; */
place-self: center center;
}
</style>
<div class="wrap">
<div class="item"></div>
</div>
</body>
repeat()方法及auto-fill 可选值，指定可重复的数值
minmax
<style>
.wrap{
width: 50vw;
height: 50vw;
border: solid 1px red;
display: grid;
grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
grid-template-rows:repeat(auto-fill,minmax(100px,1fr));
}
.item{
border: 1px solid black;
box-sizing: border-box;
}
.item:nth-of-type(1){
}
</style>
2item comm grid-area:1/1/1/1 同postiton stack
row-start/col-start/row-end/col-end
栅格布局
<body>
<style>
.row{
width: 80vw;
height: 50vw;
border: solid 1px red;
display: grid;
grid-template-columns:repeat(12,1fr);
grid-template-rows:50px;
grid-auto-flow: row;
grid-auto-rows: 50px;
}
.col{
border: solid 1px blue;
}
.col-1{
grid-area: auto/auto/auto/span 1;
}
.col-6{
grid-area: auto/auto/auto/span 6;
}
</style>
<div class="row">
<div class="col col-1"></div>
<div class="col col-6"></div>
</div>
</body>
容器自适应行列布局
inline-grid
<style>
.row{
/* position: absolute; */
/* width: 80vw; */
border: solid 1px red;
display: inline-grid;
grid-template-columns:repeat(3,1fr);
grid-auto-flow: row;
grid-auto-rows: 50px;
gap: 10px;
}
.col{
border: solid 1px blue;
}
</style>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
</div>
ul>li>ui>li
第6章 移动端适配布局
移动端适配概念随着移动互联网的发展，移动端布局显得非常的重要。移动端布局并不复杂，主要是现实各种设备的等比适配，让所有移动端设备看起来是相同的
动态计算font-size移动端rem布局原理解析rem布局方案测量rem数值及插件使用rem综合案例：网易移动端
vw综合案例：B站移动端移动端vw布局及插件使用VW布局方案
移动端概念及UI设计稿尺寸（图文）测试题更多IT教程 其他练习题
移移动动端端概概念念及及UI设设计计稿稿尺尺寸寸
一一、、逻逻辑辑像像素素与与物物理理像像素素
逻辑像素，也叫“设备独立像素”，对于前端来说就是css中的像素，举例：iphone6下的逻辑像素为375px。
物理像素，即设备屏幕实际拥有的像素点，一个设备生产出来，他们的像素就已经确定了，举例：iphone6下的物理像素为
750px。
可以发现iphone6下，其物理像素是逻辑像素的2倍，可用“设备像素比”来表示这个比值（即物理像素除以逻辑像素的
值），可通过JavaScript代码window.devicePixelRatio来获取设备像素比。
那究竟逻辑像素与物理像素的关系是什么呢？这里首先先确定什么是相对单位，什么又是绝对单位。像m这种绝对单位，
定义是什么：米的长度等于氪－86原子的2P10和5d1能级之间跃迁的辐射在真空中波长的1650763.73倍。查到的m的定义如上，
也就是说在现实世界中，m是一个固定的长度。
px全称为pixel，像素长度，像素长度，那么就请问了，一个超大屏幕的像素和你笔记本或者手机屏幕的像素大小相同吗？
也就是说1px在你手机屏幕上显示出来的长度可能为0.1mm，在露天演出的电子屏幕上长度为5cm，那么0.1mm和5cm相等吗？
感觉px好像是一个相对单位，但是如果放在网页或者设计人眼中，可能就不一定了，上面举得那个例子是物理像素，在物
理像素的背景下，px确实是一个相对单位，但是在逻辑像素上就不同了，css中1px指的是逻辑像素，浏览器会将你的逻辑像素
转化成物理像素，每个设备之间虽然物理像素点大小不一样，但是用例逻辑像素的单位后，显示的长度就会一样了。
在开发网页的时候，写了10px，在你的设备上，逻辑1px为真实的1.2个像素大小，实际看上去为10cm，没问题，换一个设
备，逻辑1px为真实的2.4个像素大小，也就是说另外一个设备像素大小是你的设备一半，那么对于他来说10px就是24个像素
了，但是实际大小仍然为10cm，所以说，在有逻辑像素的概念的前提下，px是一个绝对长度单位。(引自：知乎)
总结如下：
- 逻逻辑辑像像素素：：CSS中中的的像像素素，，绝绝对对单单位位，，保保证证不不同同设设备备下下元元素素的的尺尺寸寸是是相相同同的的。
- 物物理理像像素素：：设设备备屏屏幕幕实实际际拥拥有有的的像像素素点点，，相相对对单单位位，，不不同同设设备备下下物物理理像像素素大大小小不不同同。
viewport视视口口
一般移动设备的浏览器都默认设置了一个viewport元标签，定义一个虚拟的布局视口（layout viewport），用于解决早期的
页面在手机上显示的问题。iOS, Android 基本都将这个视口分辨率设置为 980px，所以PC上的网页基本能在手机上呈现，只不
过元素看上去很小，一般默认可以通过手动缩放网页。
为了解决这个问题，
可通过meta标签来修改视口的尺寸大小（vsCode工具初始创建HTML代码时，自动添加）。
width=device-width表示视口宽度为设备的宽，也就是逻辑像素的大小。initial-scale=1.0表示初始缩放比例为1，即
正常大小。下面是设置了viewport视口后的样子。
viewport可选的值有：
属属性性
值
描描述述
width
正整数或devive-width定义视口的宽度，单位为像素
height
正整数
定义视口的高度，单位为像素，不常用
initial-scale
比例值
定义初始缩放值
minimum-scale 比例值
定义缩小最小比例
maximum-scale 比例值
定义放大最大比例
user-scalable
yes/on
定义是否允许用户手动缩放页面，默认值yes
总结如下：
- 在在移移动动端端布布局局中中，，一一定定要要提提前前设设置置好好视视口口大大小小，，即即vsCode默默认认添添加加形形式式，，<meta name="viewport"
content="width=device-width, initial-scale=1.0">，，这这样样可可以以保保证证CSS逻逻辑辑像像素素不不会会受受到到缩缩放放处处理理。。
总结如下：
- 移移动动端端UI设设计计稿稿尺尺寸寸大大小小为为750px，，即即设设备备的的物物理理像像素素，，可可使使效效果果展展示示更更加加清清晰晰。。
- 移移动动端端需需要要实实现现像像素素换换算算和和设设备备适适配配，，以以及及页页面面元元素素等等比比缩缩放放布布局局等等。。
动态计算font-sizeJS动态计算，flexible.js库利用vw相对单位，动态换算font-size
html>font-size:100vw;
body>font-szie:16px/0.16rem; reset
100vw*elementuipx/deviceswidth=rootfontsizevw
100vw*100px/375px
vsCode工具中的px to rem插件 simple-dome
webpack-postcss-to-rem/vw uni-repleace
利用蓝湖、PxCook，获取rem数值
max-min-width-height 100% calc flex girl ....auto
dup branch api
移动端vw布局及插件使用
vsCode工具中的px-to-vw 插件
px to rem & rpx & vw (cssrem)
了解移动端概念：逻辑像素与物理像素、viewport视口掌握设计图尺寸大小，通过PS、蓝湖、PxCook等工具测量数值掌握rem布局原理及插件使用掌握vw布局原理及插件使用更多IT教程w移动端综合案例：网易rem布局、B站vw布局
第7章 响应式布局
响应式布局概念指网页能自动识别屏幕宽度、并做出相应调整的网页设计。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验
媒体查询的编写位置及顺序媒体查询语法详解响应式布局相关语法响应式栅格系统响应断点（阈值）的设定
响应式交互实现响应式框架bootstrap(图文）其他测试题与练习题响应式综合案例：Ghost博客
媒体类型媒体特性媒体查询逻辑操作符link标签方式
媒体类型
（Media types）描述设备的一般类别
all：适用于所有设备
print：适用于在打印预览模式
screen：主要用于屏幕
speech：主要用于语音合成器
max-width
min-width
orientation:portrail / landscape
逻辑操作符(logical operators)not,and,和only可用于联合构造复杂的媒体查询and:用于将多个媒体查询规则组合成单条媒体查询not：用于否定媒体查询，如果不满足这个条件则返回trve,，否则返回falseonly：用于旧版浏览器识别媒体类型使用逗号：用于将多个媒体查询合并为一个规则
« link rel="stylesheet"href="./a. css"media="(orientation: portrait)"》
媒体查询的编写位置及顺序
添加到样式表的底部，对CSS进行优先级的覆盖
移动端->PC端的适配原则：min-width从小到大 --css-postioin-order
PC端->移动端的适配原则：max-width从达到小
响应断点（阈值）的设定
1024+
1023-768
767-320
响应断点(阈值)设定
Extra small < 576px
Small ≥ 576px,-sm
Medium 2768px, -md
Large ≥ 992px, -lg
X-Large ≥1200px, -xl
XX-Large ≥1400px, -xxl
响应式栅格系统
栅格布局+断点设定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<style>
.row {
width: 80vw;
height: 50vw;
border: solid 1px red;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 50px;
grid-auto-flow: row;
grid-auto-rows: 50px;
}
.col {
border: solid 1px blue;
}
@media (min-width: 768px) {
.col-md-1 {
grid-area: auto/auto/auto/span 1;
}
.col-md-6 {
grid-area: auto/auto/auto/span 6;
}
}
@media (min-width: 768px) {
.col-lg-1 {
grid-area: auto/auto/auto/span 1;
}
.col-lg-6 {
grid-area: auto/auto/auto/span 6;
}
}
</style>
<div class="row">
<div class="col col-lg-1 col-md-1">1</div>
<div class="col col-lg-6 col-md-6">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
</div>
</body>
</html>
具体看boosrtap
响应式交互实现利用：checked 伪类利用JavaScript脚本
1.关系选择器1：父子关系选择，运算符：>
2.关系选择器2：祖先后代关系选择器，运算符：空
3.关系选择器3：兄弟关系选择器（只选择一个兄弟元素），运算符：+
4.关系选择器4：兄弟关系选择器（选择所有的兄弟元素），运算符：~
[class*='col'] * ^ $...
var
<style>
ul{
display: none;
}
@media (max-width: 768px) {
ul {
display: block;
}
label {
display: none;
}
}
label:has(input:checked) + ul {
display: block !important;
}
</style>
<label for="c">
<span>collapse</span>
<input type="checkbox" id="c">
</label>
<ul>
<li>i</li>
<li>i</li>
<li>i</li>
</ul>
响响应应式式框框架架Bootstrap
pc+rem-apater+viewport
mobile+rem+apater+sizepx
pc+mobile+reponse-apater+viewport flex gird vw vh 100% maxmin ...栅格系统 ...
...
掌握媒体查询语法：类型、特性、运算符、标签等掌握媒体查询编写位置及多查询语句的编写顺序响应式相关功能：响应式断点、栅格系统、交互实现等响应式综合案例：Ghost博客，适配不同设备
第8章 综合实战 Ant Design Pro 管理系统
CSS文文件件划划分分及及功功能能分分类类
一一、、CSS文文件件划划分分
在中大型项目中，一般会对CSS进行文件划分，根据文件的性质与用途，大概会分成：
公公共共型型样样式式
特特殊殊型型样样式式
皮皮肤肤型型样样式式
公共型样式可命名为global.css或common.css等名字，主要包括网站通用样式编写，例如：重置默认样式reset、网站通用布
局、通用模块和元件、通用响应式系统等。
/* 重置样式 */
省略css代码...
/* 网站通用布局 */
省略css代码...
/* 通用模块 */
省略css代码...
/* 通用元件 */
省略css代码...
/* 通用响应式系统 */
省略css代码...
特殊型样式主要是根据当前页面来决定的文件，只针对当前页面做出特殊处理的样式，例如只在首页中用到的样式可放置
到index.css中，在登录页中用到的样式可放置到login.css中。
皮肤型样式是针对网站需要皮肤功能时，把颜色、背景等抽离出来放到文件中的形式，例如theme-pink.css、theme
skyblue.css等。
CSS文件的引入顺序如下：
二二、、CSS功功能能分分类类
上面提到了公共型样式，在文件中具体包括哪些常见的功能呢？大概可分为如下几类：
重重置置样样式式
网网站站通通用用布布局局
通通用用模模块块
通通用用元元件件
通通用用响响应应式式系系统统
重置样式在前面章节中有介绍过，主要是去除默认样式和统一不同设备下的表现形态。通常为Reset CSS代码和Normalize
CSS代码的结合版本。在本套课程中已经把二者结合成为了一个reset.css文件，并在多个综合案例中进行使用过。
网站通用布局主要指的是对网站中出现的大块结构进行排版。如：PC端中的菜单、内容的左右布局方案；移动端中的头
部、列表、尾部的上中下布局方案等。
1菜单、内容的左右布局
头部、列表、尾部的上中下布局
通用模块指的是网页中可以重复使用的较大的整体，比如导航、登录、注册、各种列表、评论、搜索等。
通用原件指的是不可再分的较为小巧的个体，通常被重复用于各种模块中，比如按钮、输入框、loading、图标等。
通用响应式系统指的是在不同设备下要实现响应式布局，当满足了某个断点设定后调用的相应变化样式，比如浮动添加、
2栅格生效、显示隐藏、版心宽度等。
3
CSS方方法法论论及及样样式式规规范范
一一、、CSS方方法法论论
方法论是一个哲学术语，会对一系列具体的方法进行分析研究、系统总结并最终提出较为一般性的原则。CSS方法论是一
种面向CSS、由个人和组织设计、已被诸多项目检验且公认有效的最佳实践。这些方法论都会涉及结构化的命名约定，并且在
组织CSS时可提供相应的指南，从而提升代码的性能、可读性以及可维护性。(引自：前端躬行记)
常见的CSS方法论有：
OOCSS
BEM
SMACSS
Atomic CSS
我们的实战项目主要采用 BEM+ SMACSS 这两种方法论的结合命名约定，所以下面对这两种方法论进行简单介绍。
BEM（Block Element Modifier）是指块级元素修饰符，BEM分为三部分：
\1. 块（Block）是一个独立实体，最高级抽象，例如菜单、文本框等。
\2. 元素（Element）是块的组成部分，被包含在块中，无法自成一体，例如菜单项、标题等。
\3. 修饰符（Modifier）是块或元素的状态，可更改它们的外观或行为，例如高亮、选中等。
BEM中的块、元素和修饰符需要全部小写，名称中的单词用连字符（-）分隔，元素由双下划线（__）分隔，修饰符由双
连字符（–）分隔。注意，块和元素都既不能是HTML元素名或ID，也不依赖其它块或元素。
.setting-menu{}
.setting-menu--open{}
.setting-menu__head{}
.setting-menu__head--fixed{}
.setting-menu__content{}
上面代码中，.setting-menu表示一个独立实体，.setting-menu__head、.setting-menu__content{}表示独立实体的组成
部分，.setting-menu--open{}是对配置菜单展开状态的一种行为描述，.setting-menu__head--fixed{}是对配置菜单头部固
定状态的一种行为描述。
SMACSS（Scalableand Modular Architecturefor CSS）是指可伸缩及模块化的CSS架构，由Jonathan Snook在2011年雅虎工作
时提出。他在OOCSS和BEM的基础上添加了五种类别的组件的处理规则，具体如下所列。
\1. 基础（Base）是为HTML元素定义默认样式，可以包含属性、伪类等选择器。
\2. 布局（Layout）会将页面分为几部分，可作为高级容器包含一个或多个模块，例如左右分栏、栅格系统等。
\3. 模块（Module）又名对象或块，是可重用的模块化部分，例如导航栏、产品列表等。
\4. 状态（State）描述的是任一模块或布局在特定状态下的外观，例如隐藏、激活等。
\5. 主题（Theme）也就是换肤，描述了页面的外观，它可修改前面四个类别的样式，例如链接颜色、布局方式等。
通过相应的命名前缀来完成对类别的表示，l-用作布局的前缀，例如.l-inline、.layout-grid等；m-模块命名前缀，例如.m
profile、.field等；is-用作状态的前缀，例如.is-collapsed、.is-active等；theme-用作主题的前缀，例如.theme-a-background、.theme
l-grid等。
在实际工作中，不需要局限于某一个CSS方法论，很多时候可以结合使用，共享模块化CSS的规则。例如遵循BEM的命名
约定，以及SMACSS的分类前缀，具体如下所列。
.m-setting-menu{}
.m-setting-menu--open{}
.m-setting-menu__head{}
.m-setting-menu__head--fixed{}
.m-setting-menu__content{}
任何软件设计都存在不完美的地方，CSS方法论也是一样。比如：命名过长不易维护；HTML不够简洁等。但是它带来的
巨大优势也是非常明显的，比如：样式不容易冲突，尤其是复杂的样式结构；清晰的CSS架构，对大型CSS项目管理维护非常
重要等。
二二、、样样式式规规范范
\1. 使用类选择器，放弃ID选择器：ID在一个页面中的唯一性导致了如果以ID为选择器来写CSS，就无法重用。
\2. 命名应简约而不失语义：反对过长命名和没有语义的命名，如：.m-navigation、.m-abc，推荐.m-nav。
\3. 相同语义的不同类命名：直接加数字或字母区分即可（如：.m-list、.m-list2、.m-list3等，都是列表模块，但是是完
1全不一样的模块）。
\4. 防止污染和被污染：为了防止后代选择器污染，尽量采用 > 方式，例如：-m-nav>li，而不是-m-nav li。
\5. 最后一个值也以分号结尾：通常在大括号结束前的值可以省略分号，但是这样做会对修改、添加和维护工作带来不必要
的失误和麻烦。
\6. 省略值为0时的单位：为节省不必要的字节同时也使阅读方便，我们将0px、0em、0%等值缩写为0。
\7. 根据属性的重要性按顺序书写：先显示定位布局类属性，后盒模型等自身属性，最后是文本类及修饰类属性。例如：.m
box{position:relative;width:600px;margin:0 auto 10px;text-align:center;color:#000;}。
\8. CSS需要进行格式化和对齐处理：推荐vsCode插件：formate: CSS/LESS/SCSS formatter。
2
https://gitee.com/mumixiaoyu/css_course
basecode+frameuse
掌握CSS文件如何划分及样式命名规范51 xue如何划分样式，使得样式更加健壮综合运用：flex、grid、@media等知识点配合简单的JavaScript完成交互实现
jux
通用元件...u-
响应式系统
通用方法 :root .show
通用布局g-
.g-ant_sider--closed 全局/模块-名字__功能--行为
ui 模块 页面模板 style psd
var(--theme)
css module
merge important it Code imgcook gird reponse-id-system cssmethodname
浙公网安备 33010602011771号