关于响应式布局css的部分知识点

知识点一：

::selection{
background-color:#b3d4fc;
text-shadow:none
}
主要设置文字被选中时的样式；
html{
font-size:62.5%;    /*====设置字体为10px===*/
color:#222; /*===浏览器不设置成纯黑色，保护视力，这是种深灰色接近黑色===*/

}

知识点二：

清除浮动的方式：最常用的有：
在父元素设置：overflow:hidden/auto;都可以
或者在父元素设置如下：
     /*======加上before可以防止浏览器顶部的空白崩溃（就是上一个div的margin-bottom和下边的margin-top会发生叠加），
.clearfix:before,
.clearfix:after{
content:" ";
display:table;
}
.clearfix:after{
clear:both;
}

学术有个名词BFC:
BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。什么时候会触发BFC呢？常见的如下：
float的值不为none。
overflow的值为auto,scroll或hidden。
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。
触发了BFC就能防止塌陷！

知识点三：

解决li元素做导航是，使用inline-block会产生缝隙解决方案：
1.父元素设置font-size:0;
2.把li标签之间的空格去掉或者直接不写结束标签
3.外边距设置成负数：比如margin-left=-3px

给图标加一个灰色滤镜方法：
filter:grayscale(100%)  也要加上浏览器前缀
css3中的计算属性calc：
width:calc(33.333333%-3rem);

//****选择的是除了第一个后边的元素,主要用在导航时的左边框设置较方便
head.top ul li+li{}  

文字不换行并且省略号截断的写法：
a:{

text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;

}
 在元素前边加伪类。给伪类内容加空格的方法
.notice a:first-child:before{
content:'最新公告： \00a0\00a0';
color:#aaa;
}

知识点四：

媒体查询：媒体查询的级别很高，他不是html的子元素
@media only screen and(max-width:800px){
/*****这里是八百像素以下的应用此css,当用rem和em时是以16px为标准的，所以一般用em即可，因为他级别高，不会匹配父元素的字体大小。}
@media only screen and(min-width:481px)and(max-width:800px){
/*****这里是481px-800px的应用此css}
@media only screen and(max-width:480px){
/*****这里是低于480px的时候应用此css}
响应式图片布局
包括图片的排版和布局，根据不同设备的大小加载不同的图片
1.通过js和服务端写入：通过判断$(window).width()的大小，改变图片的attr
2.通过img的srcset属性
例子：
<img src="jj.png" srcset="img/480.png 480w,
img/800.png 800w,img/1600.png 1600w">
480是480px,

w是宽度，如果已经加载了1600.png的，再变小就不会变化了
如果图片是满屏的这样直接设置即可，如果图片的盒子只有屏幕的一半，则必须引入sizes属性
sizes="100vw" 

vw是 viewport width 视口宽度    vh是 viewport height 视口宽度
100是指100%即按视口的百分之百视口宽度去选择图片
sizes="(min-width:800px) calc(100rw - 30em),100vw"
这句的意思是大于800px时候按照前边的规定来，小于时按百分之百

3.picture标签
自己控制图片选择权
<picture>
    <source media="(max-width:36em)" srcset="img/t-s.jpg 768w" />
    /*****还可以设置横屏：******/
    <source media="(orientation:landscape)" srcset="img/t-s.jpg 768w" />
    <source  srcset="img/t.jpg 1800w" />
    <img src="img/t.jpg">
    </picture>
picture标签的浏览器支持程度不是很好，应该说是特别不好，比如ie就全不支持，这个时候引入polyfill引入picturefill这个库，就可以完美的解决不兼容问题，type属性，可以是webp svg jpg 等
草料二维码，可以生成网址二维码，可供手机查看，对于手机开发时，及其方便
首先查看本机IP  ，通过 ipconfig
192.168.1.2:8080/#/.......
然后复制链接，进去草料二维码网站，手机端即可查看！网址为https://cli.im/