利用css构建三角形（正三角，倒三角，左/右三角）
上三角
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
下三角
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
左三角
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
右三角
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
左上三角
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
右上三角
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
左下三角
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
右下三角
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
响应式布局的方式，几种，媒体查询原理
<meta name=”viewport”content=”width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0”>中每个属性的含义
viewport
视口
显示设备内部，真正实际可用于显示网页的区域大小
width
视口宽
device-width
等于物理设备宽
user-scalable
是否允许用户手工缩放网页
initial-scale=1.0
加载页面时，页面的缩放比例是1，表示不缩放，原网页大小展示
maximum-scale=1.0,minimum-scale=1.0
允许用户缩放网页的最大缩放比例和最小缩放比例
都是1，表示不允许用户使用过程中，中途缩放网页
5种响应式布局方式
flex布局
优点: 代码简单，布局方便
缺点
如果中间有内容，缩到最小就不会在小了
且左右侧的宽度变小了
父相子绝
优点
结合使用media可以实现响应式布局
缺点
代码写法复杂，布局较繁琐
如果不使用media平分屏幕，宽度小于600的情况下，右侧会覆盖左侧
float布局
容易被挤压换行
使用rem作单位，等比缩放
首先，给根元素html设置一个字体大小
然后，其他尺寸单位全部用 rem
然后，监听屏幕的大小
然后，根据屏幕的大小按比例改变根节点字体的大小
因为 rem 的特性，其他的尺寸都是根据根节点字体的大小设定的，所以，根节点字体大小一变，其他所有尺寸都会按比例变大、或小。
大部分浏览器的字体有个最小值：12px。也就是缩小到 12px 后，字体不会继续缩小。
grid布局
Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局，
Grid 布局则是将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元格，可以看作是二维布局
Grid布局远比 Flex布局强大。(不过存在兼容性问题)
知识点比较多, 学习成本相对较高, 目前兼容性不如flex布局!
如何
容器属性
grid-template-columns
grid-template-rows
规定共有几行，几列，每行，每列宽多少？
grid-template-columns:100px 100px 100px; // 显示为三列每一列宽度100px
grid-template-columns:repeat(3,100px); //同上
也可以固定格大小，然后优先占满整个宽度
grid-template-columns: repeat(auto-fill,100px);
.auto-fill，有时，单元格的大小是固定的，但是容器的大小不确定，这个属性就会自动填充
也可以按份数规定列宽
fr，比例关系，fraction ，意为"片段”，表示某一行或列在总宽度和总高度中占的份数
grid-template-columns:repeat(4,1fr); // 宽度平均分成四等份
grid-template-columns:1fr 2fr 3fr; // 列宽这样是分成6份各占 1 2 3 份 效果如下图
还可以设置最小和最大的大小范围:
grid-template-columns: 1fr minmax(150px，1fr); // 第一个参数最小值,第二个最大值,表示第二列最小150px，最大1fr。
还可以请浏览器自己决定长度
auto，表示由浏览器自己决定长度
grid-template-columns: 100px auto 100px;
还可以定义网格线
网格线．可以用方括号定义网格线名称，方便以后给盒子定位使用
grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
column-gap和row-gap
定义格与格之间的间距
如果column-gap和row-gap间距一致，可简写为: gap:xxx
grid-auto-flow
划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列".即先填满第一行，再开始放入第二行(就是子元素的排放顺序)
grid-auto-flow： row
先行后列
grid-auto-flow： column
先列后行
justify-items(水平方向)/ align-items(垂直方向)
设置单元格内容的水平和垂直的对齐方式
值为:
start | end | center | stretch
同时设置两个属性: 简写
place-items : start end； 这是两个属性的简写
justify-content (水平方向)/ align-content(垂直方向)
设置整个内容区域（所有的项目的总和）的水平和垂直的对齐方式
取值: start | end | center | stretch | space-around | space-between | space-evenly;
项目属性
grid-column-start / grid-column-end grid-row-start / grid-row-end
一句话解释，用来指定item的具体位置，根据在哪根网格线
grid-column-start:1;
grid-column-end:3;
表示从第一个网格线，跨到第三个网格线之前，也就是横跨1、2两列
grid-column: span 2;
grid-column-end:3;
简写: grid-column: 1 / 3;
grid-column-start:1;
grid-column-end:3;
grid-row-start:1;
grid-row-end:3;
跨两行，跨两列的方形区域
简写: grid-area: 1 / 1 / 3 / 3
justify-self / align-self
当前单元格内容的水平和垂直对齐方向
place-self
同时设置一个单元格内容的水平和垂直方向对齐方式
媒体查询
通过媒体查询来设置样式(Media Queries)是响应式设计的核心。
它根据条件告诉浏览器如何为指定视图宽度渲染页面
媒体类型
print（打印机）
screen（所有屏幕设备的统称：各种电脑屏幕、各种手机屏幕、各种平板屏幕，主要使用的就是这个）
all（所有媒体设备，默认值）
speech（应用于屏幕阅读器等发声设备）
style
在 style 标签中通过 media属性 可以设置样式使用的媒体设备。
<style media="print">
link
在 link 标签中通过 media属性 可以设置样式使用的媒体设备。
<link rel="stylesheet" href="common.css"> <!--common.css 没有指定媒体所以全局应用-->
<link rel="stylesheet" href="screen.css" media="screen"> <!--screen.css 应用在屏幕设备-->
<link rel="stylesheet" href="print.css" media="print"> <!--print.css 应用在打印设备-->
问题：一个css文件，可能同时被多个页面通过link引入，所以只要用link，就加media，有点儿繁琐了
推荐使用@import方式，代替link方式
@import
使用@import 可以引入指定设备的样式规则，文件中引入一个样式文件，在这个文件中再引入其他媒体的样式文件。
<link rel="stylesheet" href="style.css">
style.css
@import url(screen.css) screen;
@import url(print.css) print;
设备的划分情况：
小于768的为超小屏幕（手机）
768~992之间的为小屏设备（平板）
992~1200的中等屏幕（桌面显示器）
大于1200的宽屏设备（大桌面显示器）
@media
可以使用 @media 做到更细的控制，即在一个样式表中为多个媒体设备定义样式。
<style>
@media screen {
h1 {
font-size:0pt; color:#333333;"> color: blue;
}
}
@media print {
h1 {
font-size:0pt; color:#333333;"> color: red;
}
h2, hr {
display: none;
}
}
</style>
在 css文件/less文件 里也可以使用
多设备支持（，分隔）
可以用 逗号分隔 同时支持多个媒体设备。
@import url(screen.css) screen,print;
<link rel="stylesheet" href="screen.css" media="screen,print">
@media screen,print {...}
响应式字体
rem是相对于根元素的，不要忘记重置根元素字体大小：
html{font-size:0pt; color:#333333;">完成后，你可以定义响应式字体：
@media (min-width:640px){body{font-size:0pt; color:#333333;">@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:1.5rem;}}
一个响应式的字体应关联它的父容器的宽度，这样才能适应客户端屏幕。
父容器版心的尺寸划分
大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px
中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
小屏幕（平板，大于等于 768px）：设置宽度为 750px
超小屏幕（手机，小于 768px）：设置宽度为 100%
引入顺序
@import url(big.css) only screen and (min-width:1200px);
@import url(medium.css) only screen and (min-width:900px);
永远后一个
因为后一个范围包含前一个范围，而且后一个样式会覆盖前一个的样式
设备方向（orientation 属性）
使用 orientation 属性可以定义设备的方向
orientation: landscape
横屏，宽度>高度
orientation: portrait
竖屏，高度>宽度
查询条件
可以使用不同条件限制使用的样式，条件表达式需要放在扩号中
比如
横屏显示
宽度不能超过600px
@media screen and (orientation: landscape) and (max-width: 600px) {
body {
background: #8e44ad;
}
h1 {
font-size:0pt; color:#333333;"> color: white;
}
}
横屏显示或宽度不超过600px
@media screen and (orientation: landscape),
screen and (max-width: 600px) {
body {
background: #8e44ad;
}
h1 {
font-size:0pt; color:#333333;"> color: white;
}
}
既不是横屏，宽度又不小于600时，才使用
@media not screen and (orientation: landscape) and (max-width:600px) {
body {
background: #8e44ad;
}
h1 {
font-size:0pt; color:#333333;"> color: white;
}
}
not必须写在开头，表示后续条件都不满足，才能应用
