css简单的一些基础知识
css
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化
文本样式
内部引用
<p style="color:red;font-size:50px;">xxxxxxxxxx</p>
外部引用
在外面建一个.css的层叠样式表p{color: green;font: 100px 楷体}
两个.css的表格可以相互引用 用@import url(style2.css);引用
<link rel="stylesheet" type="text/css" href="style.css">
样式
/*颜色的四种表示方法*/
color: rgb(123,56,148);
color: rgba(44,55,66,0.4);
color: #FF5566;
color: #f56;
/*文本修饰 underline下划线 overline上划线 line-through贯穿文字线 none */
text-decoration: line-through;
字体设置
font-style: italic/*倾斜或normal*/;
font-weight: 500/*字体粗细0-900取整*/;
font-size: 100px/*字体大小*/;
font-family: 楷体;
font: normal 900 50px 宋体;
text-align: center;
/*文本对齐样式left(默认)|center|right*/
text-indent: 2em;
/*首行缩进，数字＋单位(px|em);这个单位可以是px可以是em(一个文字的宽度),用的最多的还是em*/
text-shadow: 2px 2px 2px red;
/*水平偏移距离 垂直偏移距离 模糊距离 阴影颜色;*/
width: 1000px;
white-space:nowrap; /*空白符处理
normal默认值,文字超出容器宽度会自动换行,容器会变高
nowrap,文字超出容器宽度不会换行文本会在同一行上溢出
overflow: hidden;
text-overflow: clip;
/*文本溢出处理方式 clip剪贴ellipsis显示省略号...*/
word-wrap: normal;
/*长单词换行到下一行 break-word单词换行 需要在容器上设置*/
不让用户点到页面上的字 user-select:none
img{ object-fit：fill | contain | cover | none | scale-down //图片的显示方式跟背景图片的bg-size效果一样}
类选择器
id选择器 交集,并集选择器
相邻兄弟选择器 通用兄弟选择器
.dang{/*类选择器*/color: blue;}
#a1{/*id选择器，页面上所有的ID不能重复*/color: green;}
/*类和id只能以下划线和英文字符开头，ID不是用来作为选择器添加样式的，它的主要作用是给JS使用*/
body h2{/*后代选择器，body标签下所有h2标签都会被执行*/font-size: 50px;}
body>p{/*子选择器，body标签下的前三个p标签被选择*/font-family: 楷体;}
p.dang{/*交集选择器，p标签前两个被选中*/font-style: italic;}
p,.dang/*并集选择器，所有p和.dang都会被选中*/
p+h2/*相邻兄弟选择器，选中的是第一个h2*/
p~h2/*通用兄弟选择器，选中的是p的向下兄弟所有的h2标签*/
选择器可以是标签，ID，类
序选择器
p:first-child{ }
/*找到同级别的第一个元素不区分类型7和12被选中*/
p:last-child{ }
/*找到同级别的最后一个元素不区分类型15被选中*/
p:nth-child(n){color: red;}
/*找到同级别的第n个元素不区分类型,n可以写为nx+y*/
p:only-child{}
/*不区分类型的同级别唯一元素*/
p:first-of-type{color: red;}
/*找到同级别的第一个元素区分类型2.7.12被选中*/
p:last-of-type{ }
/*找到同级别的最后一个元素区分类型6.10.15被选中*/
p:nth-of-type(n){color: red;}
属性选择器
[title]{color: green}
[title="qwert"]{color: red;}
[title|="qwert"]{}
/*属性的值以qwert开始,只能选中用“-”分隔的和独立的,是CSS2中的选择器*/
[title^="qwert"]{}
/*所有以qwert属性值开始的都可以选中,
是CSS3中的选择器*/
[title$="qwert"]{}
/*所有以属性值结尾的都可以选中,是CSS3中的选择器*/
[title~="qwert"]{}
/*属性值包括什么，只能选中包括用空格分隔的和独立的,是CSS2中的选择器*/
[title*="qwert"]{}
/*所有包括该属性值的都可以选中,是CSS3中的选择器*/
通用选择器 伪选择器
*{color: red;}
/*通用选择器所有元素都被变红*/
a:link{color: green}
/*默认状态*/
a:visited{color: }
/*被访问过*/
a:hover{color: }
/*鼠标悬停时*/
a:active{color: }
/*鼠标点击时*/
/*四种状态可以同时都写，也可以单独写,如果全写的情况下必须遵循一定的顺序，
特别是active要写到hover后面,否则就会被覆盖,因为点击的同时鼠标肯定是悬停在内容上的,hover对其他元素也起作用*/
input:focus{outline-color: red;}
/*获取焦点边框颜色*/
p:before{content: "你好"}
p:after{content: "你好"}
/*在p标签的前后加上content*/
盒子模型
1.
width: 300px;
height: 300px;
border: 50px solid pink;
border:宽度 样式 颜色
颜色可以省略，默认的是黑色
常见样式有dotted(点状),dashed(虚线),solid(实线)
宽度可以省略，默认是1px
2.
border-width: 100px;
border-style: solid;
border-color: black;
border-width:上 右 下 左;
border-style:上 右 下 左;
border-color:上 右 下 左;
按照顺时针方向设置，如果省略了一个边，就取对边的值，如果只设置了一个边，那么所有的边都一样
3.
border-top: 120px solid red;
border-right: 150px solid yellow;
border-bottom: 150px solid green;
border-left: 100px solid blue;
4.
border-top-width: 宽度;
border-top-style: 样式;
border-top-color: 颜色;
border-right-width: 宽度;
border-right-style: 样式;
border-right-color: 颜色;
border-bottom-width: 宽度;
border-bottom-style: 样式;
border-bottom-color: 颜色;
border-left-width: 宽度;
border-left-style: 样式;
border-left-color: 颜色;
内边距
padding:上 右 下 左;
按照顺时针方向设置。如果省略了一个边，就取对边的值，如果只设置了一个边，那么所有的边都一样
当设置内边距时会使盒子变大，可以设置box-sizing: border-box;使内容边距变小 盒子大小不变（IE盒模型 ）
content-box为默认值 作用使盒子变大 内容区域不变
外边距
margin:上 右 下 左;
按照顺时针方向设置。如果省略了一个边，就取对边的值，如果只设置了一个边，那么所有的边都一样
水平方向上的margin值可以叠加
普通元素垂直方向上的margin值发生重叠现象，重叠后取较大的值overflow:hidden解决
普通的父子元素margin值发生溢出现象，给子元素设置margin top时候，这个值会传递到父元素,可以通过给父元素添加边框或者是内边距来阻止margin值的传递,还可以给父元素添加overflow:hidden来阻止margin的值传递
外边距不会影响元素的宽和高，但是会影响整个元素空间的宽和高
padding主要是用来设置父元素和子元素之间的距离，margin主要是用来设置元素和元素之间的距离
margin可以取负值,表示相反的方向
内容
元素的宽width和高height决定了真正可以填充内容的空间
取值可以是具体的像素也可以是百分比,百分比是相对于自己的父元素来说的
display: inline-block;使两个盒子水平排版
当两个盒子属于父子关系使，设置子盒子的width,height值时可以设置为百分比，相当父盒子的宽高
内容的宽和高
内容的宽:通过width属性设置的值
内容的高:通过height属性设置的值
元素的宽和高
元素的宽：左边框＋左内边距＋内容的宽度＋右内边距＋右边框
元素的高：上边框＋上内边距＋内容的高度＋下内边距＋下边框
元素空间的宽和高
元素空间的宽：左外边距＋左边框＋左内边距＋内容的宽度＋右内边距＋右边框＋右外边距
元素空间的高：上外边距＋上边框＋上内边距＋内容的高度＋下内边距＋下边框＋下外边距
盒子的圆角
border-radius: 150px;/*或50%*/
border-radius:取值1(左上 右上 右下 左下)/[取值2(左上 右上 右下 左下)]*/
border-top-left-radius:取值1 [取值2];
border-top-right-radius:取值1 [取值2];
border-bottom-right-radius:取值1 [取值2];
border-bottom-left-radius:取值1 [取值2];取值可以是px也可以是百分比
（width: 100px;
height: 100px;
border-right: 10px solid red;
border-top-right-radius: 60px;
border-bottom-right-radius: 60px;）月牙形状 通过只设置一个盒子的边来完成
盒子行高和阴影
line-height: 40px;
使行高变为知道的数值利于计算内边距和其他数值*/
padding: 10px 10px;
利用内边距的设置及计算使文字在方框内垂直居中*/
box-shadow: 2px 2px 2px 2px black;
水平距离 垂直距离 模糊距离 阴影大小 阴影颜色 内外阴影默认outset，inset;
div:hover{
box-shadow: 2px 2px 2px 2px black;/*当鼠标悬浮到盒子时显示的阴影*/
cursor: pointer;当鼠标悬浮到盒子时的鼠标图标*/}
盒子背景图片大小位置处理
background-image: url(../54/修罗.jpg);
background-color: green;
background-repeat: no-repeat;
repeat-x只在水平方向上平铺repeat-y只在垂直方向上平铺*/
background-attachment: fixed;
scroll(背景图片会随着滚动条的滚动而滚动)|fixed(背景图片固定在某个位置,不随滚动条的滚动而滚动)*/
background-position: center center;
background-position: 水平移动距离垂直移动距离
取值:具体的数值+px|方向单词
水平:right center left 垂直:top center bottom移动的参考点是容器的左上点
background: url(../54/修罗.jpg) green no-repeat fixed center center;连写
background-size:100% 100%;
background-size:宽度 高度 | 单词
宽度和高度的取值有:
具体的像素
百分比(相对于容器)
auto auto(谁设置为auto把谁等比拉伸)
单词的取值有:
cover,图片等比拉伸到宽度和高度都填满元素，图片不变形，但可能会显示不全
contain,图片等比拉伸到宽度或高度中的一个填满元素另一个等比扩大或缩小，显示完全，不变形，但在整个盒子中可能会有空白区域
background-origin:padding-box;
格式padding-box(从内边距开始显示)border-box(从边框开始显示)content-box(从内容区域开始显示)
注意点:该属性用来指定从哪个区域开始显示背景图片,默认是padding-box
background-clip:padding-box;
格式padding-box(从内边距开始显示)border-box(从边框开始显示)content-box(从内容区域开始显示)
注意点:该属性用来指定从哪个区域开始显示背景颜色,默认是border-box*/
background: url(../54/修罗.jpg) green no-repeat fixed center center;连写
input输入框
outline-width：0px 点击input框时 没有颜色
块状 行内块状 行内元素
块状元素，独占一行，可设置宽高，有默认宽高，可设置边框，可设置垂直和水平方向的内外边距
常见的块状元素 p div header nav section article footer h ul ol dl li dt dd ...
p元素，只能包含inline元素，而不能包含block元素
行内元素，宽高无效，垂直方向上的内外边距无效,但内边距可设置，外边距不可设置，其他跟块状元素效果一样
水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；
但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果，（元素范围是增大了，但是对元素周围的内容是没影响）
常见的行内元素span b u i s stong em ins del ..
行内块状，除了不会独占一行，其他效果跟块状元素一样
常见的行内块级元素img input textarea ...
/*行内块状对齐方式vertical-align:baseline|top|middle|bottom|text-bottom，
只有行内块状元素设置vertical-align属性才有效
默认的对齐方式是baseline(基线对齐)
top是相对于父元素的顶部对齐
middle是相对于父元素的中部对齐
bottom是相对于是相对于父元素的底部对齐
text-bottom是相对于父元素的文字底部对齐*/}
浮动流布局
float: left/right；
没有中间对齐,对齐是相对于父元素的左右边框的
浮动流主要是用来水平排版的
虽然把元素设置为行内块状也可以实现水平排版,但有不足之处,例如左右水平排版,如果父元素宽度不固定的情况下会发生错位,所以在项目中一般都用浮动流来实现水平排版
由于脱离标准后,标准流中位置空闲了出来,因此后面标准流中的元素会去顶替脱离标准流的那个元素的位置
浮动元素脱标后的在浮动流中的特点
因为脱离标准流,所以浮动的元素不区分块状，行内，行内块状，他的属性和行内块状一样
浮动流的元素不可以用margin: 0 auto;来水平居中
浮动元素脱标后在浮动流中的排列规则
同方向上,先浮动的显示在前面，后浮动的显示在后面,注意这个先后指的结构上的先后而不是css的书写先后
不同方向上,左浮动找左浮动元素，右浮动找右浮动元素
浮动后元素的位置由浮动前元素在标准流中的位置决定,这个位置主要指的是浮动前在标准流中是第几行,浮动后还是显示在第几行
由于浮动元素的位置和浮动前在标准流的位置有关 ,所以严格意识上说浮动元素是非完全脱标
清除浮动
方式一,
给前面的盒子添加高度
项目中一般高度是有内容撑起来的,尽量不设置高度
方式二,
通过给第二个盒子添加clear属性来清除前面元素浮动带来的影响
clear: both;
clear属性的取值有:left|right|both|none(默认)
clear属性的意思是不让自己的子元素找前面浮动的元素
通过clear属性清除浮动会导致第一个盒子的margin-bottom和第二个盒子的margin-top失效,第二个盒子的margin-top失效是因为margin的值传递
方式三
给第一个盒子和第二个盒子之间添加一个空盒子，并且给这个空盒子设置clear:both属性,俗称外墙法
第一个盒子的margin-bottom依然不可以用, 空盒子{clear: both;height: 20px;}
但是第二个盒子的margin-top可以用
可以通过设置空盒子的高度来达到设置margin-bottom/top的效果
方法四,
给第一个盒子所有元素的后面添加一个空盒子，
<div class="wall">空盒子</div>
并且给这个空盒子设置clear:both属性,俗称内墙法
第一个盒子的margin-bottom可以用,第二个盒子的margin-top也可以用
也可以通过设置空盒子的高度来达到设置margin-bottom/top的效果
内墙法可以撑起盒子的高度，而外墙法不可以
方法五,
通过伪元素选择器(:after)实现内墙法
.eee:after{content: "";
clear: both;
display: block;
height: 0px;
visibility: hidden;}
.eee{*zoom:1;} /*此代码适用于IE6*/
作用和内墙法一样，但是不用额外添加空元素，在第一个盒子的父元素盒子标签加 ：after 可以实现结构和样式分离，在实际项目开发中推荐使用*
方式六,
通过给第一个盒子添加overflow: hidden来清除浮动
定位流布局
1 相对定位
position：relative
top/right/bottom/left：10px;
四条边的移动距可以写一个,也可以写两个,写两个的时候要注意在同一个方向的只能设置一个边
相对定位元素是不脱离标准流的,所以相对定位元素在标准流当中的空间不会释放出来
相对定位元素是不脱离标准流的,所以相对定位元素区分块状，行内，行内块状
如果元素有margin/border/padding值,相对定位是在margin/border/padding值生效后起作用
相对定位元素主要用来对对元素进行微调和设置绝对定位的参考元素
2 绝对定位
position：absolute；
top/right/bottom/left：10px;
四条边的移动距可以写一个,也可以写两个,写两个的时候要注意在同一个方向的只能设置一个边
绝对定位元素是脱离标准流的,所以绝对定位元素在标准流中的空间会被释放出来
绝对定位元素是脱离标准流的,所以绝对定位元素不区分块状,行内,行内块状
3 绝对定位的参考点
绝对定位元素会参考离他最近的具有定位属性的祖先元素,
如果祖先中没有定位元素就参考body元素,
换句话说如果一个元素设置为绝对定位,首先去找他的父元素,
看他的父元素有没有position定位属性,如果没有就找他的父亲的父亲,直到找到第一个具有position属性的祖先,
然后相对于该祖先发生位置移动,如果所有祖先都没有position定位属性,就相对于body发生位置的移动
具有position定位属性指的是相对定位,绝对定位,固定定位,但不包括静态定位
父元素的margin/border的值对绝对定位的子元素的位置没有影响,绝对定位的子元素是从父元素的padding区域开始参考的,
但如果相对于body,始终相当于相对于浏览器的首屏的可视区域（相当整个浏览器的屏幕）
4 绝对定位的元素水平居中
left:50%
margin-left:-x；
相对于贴靠元素的50% 然后-元素宽度的一半
5 固定定位
position：fixed；
top/right/bottom/left：10px;
固定定位元素是脱离标准流的,所以固定定位元素在标准流中的空间会被释放出来
固定定位元素是脱离标准流的,所以固定定位元素不区分块状,行内,行内块状
固定定位元素不会随着滚动条的移动而移动
固定定位元素始终参考的都是body
6 静态定位
默认状态的定位
7 定位流中元素显示的顺序
默认情况下,定位流中的元素会盖住标准流中的元素默认情况下,定位流中后面的元素会覆盖住前面的元素
可以通过z-index：1；来更改元素的覆盖关系,值越大,显示越靠前,默认值是0
父级元素的z-index属性会影响到子元素的z-index,子元素的z-index属性最终的值是所有父级元素中最顶层（程序最外面最大的）父级元素的z-index值
父子关系的z-index属性之间不会相互覆盖（无效）。
过度
transition-property: background-color,height;
transition-duration: 10s,8s;
transition-delay: 2s;
transition-timing-function: linear; 运行的方式
取值linear ease 默认的 ease-in ease-out ease-in-out cubic-bezier(x1,y1,x2,y2)*/
简写1 transition:width 3s linear 2s,background-color 3s linear 2s;属性 时间 速度 延迟时间
简写2 transition:width 3s,background-color 3s;
简写3 transition: all 3s
模块的变化
旋转
transform: rotate(15deg)
旋转 正值沿Z轴 顺时针
旋转 正值沿X轴 上边向里，下边向外
旋转 正值沿Z轴 左边向外，右边向里
transform: rotateX();/*沿x轴旋转*/
xy轴旋转配合加在父元素的透视perspective: xxpx;标签使用
perspective意思为人眼与旋转的元素垂直距离的大小
transform: rotateY();/*沿y轴旋转*/
transform: rotateZ();/*默认是Z*/
旋转会改变坐标系
旋转写在平移前面是在旋转修改后的坐标系下平移
平移后旋转是在平移以后的位置默认中心点旋转*/
平移
transform: translate(100px,100px)
(水平方向移动距离,垂直方向移动距离)可为负数*/
缩放
transform: scale(1.5,1.5);
transform: scale(水平方向缩放比例,垂直方向缩放比例)
缩放比例如果是1代表不变,大于1代表放大,小于1代表缩小
如果水平和垂直方向上缩放比例一样,可以简写一个
复写
transform: translate(200px,200px) rotate(20deg) scale(1.5,1.5);
透明度
opacity：0到1；
变化的基点
transform-origin: 50px 50px; 格式:水平方向移动距离 垂直方向移动距离;
变化基点就是以哪个点为参考点进行变化
变化基点的移动参考点是元素的左上角顶点
默认情况下所有的元素都是以自己的中心点作为参考来旋转的
移动距离可以是具体的像素,百分比,和关键字水平方向上有left center right,在垂直方向上有top center bottom
动画
animation-delay: 2s;
animation-timing-function: ; /*linear|ease 默认的|ease-in|ease-out|ease-in-out|cubic-bezier(x1,y1,x2,y2);执行速度*/
animation-iteration-count: ;/*具体的数字(默认是1)|infinite(无限循环);*/
animation-direction: ;/* normal(默认状态不执行往返动画)|alternate(执行往返动画);*/
animation-play-state: ;/*running(默认状态动画执行)|paused(鼠标悬浮时动画暂停)*/
animation-fill-mode: ;/*none(不做改变)|backwards(动画等待时显示动画的第一帧)|
forwards(动画执行结束保持显示动画的最后一帧)|both(动画执行前显示动画的第一帧并且动画执行结束显示动画的最后一帧*/
animation:bb 60s linear 2s infinite alternate;
/*动画的名称 动画的执行时间 动画的速度 延迟时间 动画的执行次数 是否执行往返动画;*/
@keyframes bb{
0%{margin-left: 0px;
margin-top: 0px;
background: red;}
25%{margin-left: 400px;
margin-top: 0px;
background: yellow;}
50%{margin-left: 400px;
margin-top: 400px;
background: green;}
75%{margin-left: 0px;
margin-top: 400px;
background: blue;}
100%{margin-left: 0px;
margin-top: 0px;
background: red;}
}
@keyframes bb{
from{width: 500px;}
to{width: 1000px;}
}
3D转化
.father{
width: 200px;
height: 200px;
background: yellow;
transform-style: preserve-3d;
/*flat让子元素呈现2D展示；preserve-3d让子元素呈现3D展示*/
3D使元素具有厚度
}
.son{
width: 100px;
height: 100px;
background: blue;
}
自定义字体
<style type="text/css">
@font-face{
font-family: news;
src:url(../课件/css课件/Sansation_Bold.eot),
url(../课件/css课件/Sansation_Bold.ttf);
/*src中的url可以是本地字体也可以是网络上的字体文件，如果是网络上的字体文件注意跨域的问题*/
}
p{
font-family: news;
}
</style>
</head>
<body>
<p>祝贺你Congratulations我的字画</p>
</body>
自定义字体改为图标 https://fontawesome.com/
<link rel="stylesheet" type="text/css" href="../fontawesome-free-5.0.9/web-fonts-with-css/css/fontawesome-all.css">
在head里面link一个在网上下载的.css外部引用文件
<body>
<i class="fas fa-camera-retro"></i>
<!-- 通过在class里加入类来实现各种 效果 -->
<i class="fas"></i>
在body里的程序行添加class类标签“fas” 在class里面加上各种类实现图标的各种样式
### Less介绍
/*Less是一门CSS预处理语言，它扩充了CSS语言，增加了诸如变量、混合（mixin）、函数等功能，让CSS更易维护、方便制作主题、扩充。Less可以运行在Node或浏览器端。*/
/*使用之前在sublime上装一个less插件*/
### Less编译
* 浏览器
```javascript
<!--
1. 引入.less文件,注意rel="stylesheet/less"
2. 在less文件后面引入编译less的js文件,可以从http://lesscss.cn/中下载
-->
<link rel="stylesheet/less" type="text/css" href="less/001.less">
<script src="js/less.js" type="text/javascript"></script>
```
* 客户端
> http://koala-app.com/
* 服务端
### Less语法
* 注释
```css
//我是注释一 编译被删除
/*我是注释二 编译被保留*/
```
* 变量
@变量名:值
* 混合(Mixin)
> * 基本混合,直接把选择器写在另外一个选择中
> * 带参数
> * 带参数有默认值
* 匹配模式
选择符合条件的混合模式,根据传入的参数来决定使用哪个混合
* 嵌套
在选择器中嵌套选择器
* 运算
+-*/
* 避免编译
属性:~'css的值'
* !important关键字
在混合模式后添加!important关键字,会为混合模式中的所有样式添加!important
*混合参数做为属性和设置计算后的属性值
.set(@attr,@val){
@{attr}:unit(@val/10,px);
}
//用rem来设置大小
@rem:32;
.rem(@attr,@px){
@{attr}:unit(@px/@rem,rem);
}
img{
.rem(width,120)
}
### 移动基础
* 像素
>> * 设备的物理像素,屏幕的物理像素,任何设备的物理像素是固定的,例如电脑屏幕的分辨率是1366 X 768,表示在电脑屏幕上有1366 X 768个小格子,一个小格子代表一个物理像素
>> * CSS像素,又称逻辑像素,是为WEB开发者创造出来的一个抽象层
>>> * 只有在页面不缩放的情况下,一个CSS像素才等于一个物理像素
>>> * 如果页面放大,根据放大的比例,多个物理像素合成一个CSS像素
>>> * 如果页面缩小,根据缩小的比例,一个物理像素分成多个CSS像素
>>> * 因为像素的合成,当网页放大后,CSS定义的像素并没有改变,但是视觉效果上变大了
* DPI/PPI
> * DPI（Dot Per Inch）每英寸的墨汁点，多用于印刷行业
> * PPI（Pixels Per Inch）屏幕每英寸的物理像素数量，即单位英寸的物理像素密度
> * 1 英寸(inch)=25.4毫米(millimetres)=2.54厘米
<img src="img/ppi.png">
* PPI值越高,一个实际1英寸上容纳的物理像素就越多,就能够展示更多的画面细节,也就意味着画面更细腻
* DPR
> * 手机分辨率很高,但手机屏幕尺寸有限,所以可以让手机屏幕上的多个物理像素合成一个CSS像素来更好的显 示内容
> * DPR(device Pixel Ratio) 设备像素比 = 设备物理像素 / CSS像素,这个DPR就决定了多少个物理像素合成一个CSS像素
> * 以iPhone6为例
>> * iPhone6 的分辨率为1334X750
>> * iPhone6 的CSS像素为667X375
>> * 所以iPhone6 的DPR为 1336/667 = 2,即2个物理像素对应一个css像素
>> * DPR的设置是根据人体手臂的长度来设定的,也就是说将 1334X750的物理像素合成667X375的CSS像素,视觉效果是最好的
* 视口 viewport
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
```
>* width,设置视口的宽度,表示把移动设备的宽缩放为多少个CSS像素,为一个正整数,或字符串"device-width",device-width表示缩放到设备合成后的CSS像素
>* initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
>* minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
>* maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
>* height,设置视口的高度
>* user-scalable,是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许
>* 这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开
### 屏幕尺寸适配
* 像素px,绝对单位,由于单位固定
> * 无法做屏幕的适配
* 百分比%,相对于父元素的宽高
> * 可以实现布局的适配,但是字体不容易适配
* em,当前元素字体的大小,1em=当前元素可继承的font-size
> * 可以根据不同的屏幕来设置元素的font-size,再利用em来适配,但是元素的font-size可以被继承,同时js和css经常会修改font-size,如果用em来适配的话容易造成混乱
> * 注意:font-size最小值是12px;
* 1vw=当前设备宽度的1%,vh=当前设备高度的1%
> * 可以适配布局和文字,但兼容性不好
* rem,根元素字体的大小,默认值是16px
(function(win,doc){
//1.获取根元素
var oRoot = doc.getElementsByTagName('html')[0];
function refreshFontSize(){
//2.获取设备的物理元素的宽
var iWidth = doc.body.clientWidth || doc.documentElement.clientWidth;
//3.根据设备的宽计算出根元素的fontSize
var iFontSize = iWidth / 10;
oRoot.style.fontSize = iFontSize + 'px';
}
win.addEventListener('resize',refreshFontSize,false);
doc.addEventListener('DOMContentLoaded',refreshFontSize,false);
})(window,document);
> * 可以根据不同的屏幕来设置根元素的font-size,再利用rem来适配
> * 根元素的font-size需要动态设置,一般有JS和媒体查询两种方法来动态设置
### 响应式布局(Responsive)
* 媒体类型 (media type)
> * 媒体类型是从CSS2和HTML4开始,可以根据设备的类型来决定使用什么样式
> * 使用方法一
```html
<link rel="stylesheet" media="print" href="css/print.css" >
<link rel="stylesheet" media="screen" href="css/screen.css" >
```
> * 使用方法二
```html
<style type="text/css">
@media screen{
h1{
color: blue;
}
}
@media print{
h1{
color: red;
}
}
</style>
```
> * 常见的媒体类型有(还有其他的但基本已被抛弃,所以在此不在列举)
>> screen 屏幕
>> print 打印机
>> all 所有
* 媒体查询(media query)
> * 媒体查询是由媒体类型(media type)和媒体特征(media features)共通决定使用什么样式
> * 常见的媒体特征有
>> * width, 浏览器窗口的宽度,可以有min/max前缀
>> * height, 浏览器窗口的高度,可以有min/max前缀
>> * device-width,分辨率宽度,可以有min/max前缀
>> * device-height,分辨率高度,可以有min/max前缀
>> * orientation,移动设备窗口的方向,portrait(纵向),landscape(横向)
> * min/max的解释
>> * (min-width:400px) 浏览器窗口的宽度最小是400px样式生效,换句话说是大于等于400px时样式生效
>> * (max-width:800px) 浏览器窗口的宽度最大是800px样式生效,换句话说是小于等于800px时样式生效
使用方法一
<link rel="stylesheet" href="css/blue.css">
<link rel="stylesheet" href="css/yellow.css" media="screen and (max-width: 500px)">
使用方法二
<style>
@media screen and ( min-width: 500px ) and ( max-width: 800px ) { body { background: yellow; }}//500px~800px宽的屏幕分辨率下的样式
@media not print and () ... {...} //not-排除这种媒体之外的类型
@media only screen and () .... {....} //only-指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器;不加only会被别的媒体类型继承
</style>
超出一行隐藏
.line-clamp{word-break: break-all;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;width: 100%;box-sizing: border-box;}
超出多行隐藏
.line_clamp2{display: -webkit-box;word-break: break-all;text-overflow: ellipsis;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
苹果安全距离的表示 元信息需设置为viewport-fit=cover
上constant(safe-area-inset-top); 下constant(safe-area-inset-bottom);左constant(safe-area-inset-left);右constant(safe-area-inset-right);
兼容： 上env(safe-area-inset-top); 下env(safe-area-inset-bottom);左env(safe-area-inset-left);右env(safe-area-inset-right);
