小白WEB前端学习（七）
续：小白WEB前端学习（六）
继续学习CSS（五）
8.响应式布局：
响应式布局意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式
1.响应式布局介绍：
优点:
-
面对不同分辨率设备灵活性强
-
能够快捷解决多设备显示适应问题
缺点:
-
兼容各种设备工作量大，效率低下
-
代码累赘，会出现隐藏无用的元素，加载时间加长
手机:<768
平板:>768<992
小屏幕:>992 <1240
大屏幕: >1248
2.media媒体查询
HTML标签字号手机屏幕大小不同，分辨率不同如何设置不同的html标签字号媒体查询能够检测视口的宽度然后编笔差异化的 CSS 群式当某个条件成立,执行对应的CSS样式
主要用来做响应式布局的
1.设置meta标签
使用设备的宽度作为视图宽度并禁止初始的缩放。在标签里加入这个meta标签。
//直接把这个内容复制就好了
参数解释
-
width = device-width宽度等于当前设备的宽度 -
initial-scale初始的缩放比例（默认设置为1.0） -
maximum-scale允许用户缩放到的最大比例（默认设置为1.0） -
user-scalable用户是否可以手动缩放（默认设置为no）
2.媒体查询语法
案例：大于为min小于为max
@media(媒体特性){
选择器{
CSS属性}} //可以根据页面的宽度和高度进行不同的设置
@media screen and (max-width: 768px) {
body{
background-color: red; //当页面为<768时候页面为红色
}
}
@media screen and (max-width: 992px) and (min-width: 768px) {
body{
background-color: pink; //当页面>=768时候<992时候页面为粉色
}
}
@media screen and (min-width: 992px) {
body{
background-color: green; //当页面为<=992时候页面为绿色
}
}
3.Bootstrap栅格系统
Bootstrap是基于HTML,CSS和JavaScrpit 的，它简洁灵活，使得web开发更加快捷。目前了解即可。
-
中文官网：Bootstrap中文网 铂特优选
-
官网：Bootstrap · The most popular HTML, CSS, and JS library in the world.
1. 什么是栅格
栅格和网格的英文都以“Grid”来表示，其本质是为了给版面提供一个基本设计框架，这也是为实现有组织的设计其中方法之一，在平面设计中称之为“网格”，而在网页/移动端中更多称为“栅格”。
2.栅格系统的组成
主要由网格、列、水槽、边距、总宽、容器盒子等组成，只要清楚它们之间的相互关系以及定义即可
1. 网格（Gird）
网格（Gird）是由基本单位「单元格」构成，也被称为最小单元格，而栅格则是由一系列规律的网格组成，通常情况下，我们会使用 8 作为作为栅格中的最小单位，以此进行增量。
2. 列（Column）
列（Column）指的是栅格数量，如 12 栅格有 12 个列、24 栅格就是 24 个列，主要用来对齐内容。
3. 水槽（Gutter）
水槽（Gutter）是指列与列之间的间距
4. 边距（Margin）
边距（Margin）是指界面内容到屏幕边缘的距离，主要用来控制核心内容的展示边界。
5. 栅格总宽（Container）
栅格总宽（Container）是指所有列加所有水槽再加上两侧边距的总和，即整个栅格系统的总宽度。
6. 容器盒子（Col-n）
容器盒子（Col-n）是指布局信息的版面区域
9.column多列：
1.创建多列
column-count 属性指定了需要分割的列数
column-count: 3;！！！
2.列与列之间的间隙
column-gap 属性指定了列与列间的间隙
column-gap: 40px;
列边框
column-rule-style 属性指定了列与列间的边框样式
column-rule-style: solid;
column-rule-width 属性指定了两列的边框厚度
column-rule-width: 1px;
column-rule-color 属性指定了两列的边框颜色
column-rule-color: lightblue;
column-rule 属性是 column-rule-*所有属性的简写
column-rule: 1px solid lightblue;
PS:和border边框属性值一样
10.grid网格布局：
网格布局（Grid）是最强大的 CSS 布局方案。
它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。
1.基本了解：
容器和项目
采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）
行和列
容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）
单元格
行和列的交叉区域，称为"单元格"（cell）。
正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格
网格线
划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。
正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线
2.实验：
1.小结：
display: grid指定一个容器采用网格布局
也可以设置为行内元素display:inline-grid
.a {
display: inline-grid;
grid-template-columns: 50px 50px 50px; //有三列，每列的宽度都是 50 像素
grid-template-rows: 50px 50px 50px; //有三行，每行的宽度都是 50 像素
}
2.小结：
repeat()
有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数，简化重复的值
.a {
display: grid;
grid-template-columns: repeat(3, 300px);
grid-template-rows: repeat(3, 300px);
}
auto-fill 关键字
有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充,尽可能充满整个容器。
.a {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}
fr 关键字
为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍
.a {
display: grid;
grid-template-columns: 1fr 2fr 3fr;
}
3.小结：
grid-row-gap属性设置行与行的间隔（行间距） grid-column-gap属性设置列与列的间隔（列间距） grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式 grid-gap:; 上面一段 CSS 代码等同于下面的代码 .a { display: grid; grid-template-columns: 1fr 2fr 3fr; grid-gap: 10px 20px; }
4.小结：
网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域
首先需要为每一个区域命名，然后将名字根据需求摆放位置及所占区域
`grid-area:item1;` //命名item1
grid-template-areas:
'item1 item1 item2'
'item1 item1 item3'
'item4 item5 item6'
'item7 item8 item9'
} //想占多大是多大
5.小结：
划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行 这个顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行" `grid-auto-flow:column`;
6.小结：
项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线 grid-column-start属性：左边框所在的垂直网格线 grid-column-end属性：右边框所在的垂直网格线 grid-row-start属性：上边框所在的水平网格线 grid-row-end属性：下边框所在的水平网格线 grid-column属性是grid-column-start和grid-column-end的合并简写形式 grid-row属性是grid-row-start属性和grid-row-end的合并简写形式
11.搜索引擎优化
网页头部 SEO 标签（正常由，SEO的工作人员给）link:
title:网页标题标签 description:网页描述 //meta:de keywords:网页关键词 //meta:kw favicon（标签图标） //出现在浏览器标题栏 ico后缀