去除图片的空白缝隙

在设置图片边框样式中，图片或者表单等行内元素，这样会造成一个问题，就是图片底侧以及图片与图片之间会有一个空白缝隙。 原因是行内元素之间的回车符系统默认为一个空格，占据了一定宽度。

1.给img 添加vertical-align:middle | top等等。 让图片不要和基线对齐。（只能修改图片底部的间隙）

img{
            /*vertical-align: bottom;*/
            vertical-align: top;
2.给img的父元素设置与img相同的固定高度（只能修改图片底部的间隙）
div{
         border: 1px solid red;
         height:280px ;
3.给img 添加 display：block; 转换为块级元素就不会存在问题了，水平方向设置浮动。
 img{
        display: block;
        float: left;
4.给img的父元素设置字体大小为0px，若父元素还有其他字体元素，再单独设置字体大小覆盖。（推荐使用）
div{
            border: 1px solid red;
            font-size: 0;
二倍图：将设计图设计比成实际尺寸的二倍，解决在设备中的图片模糊的问题
屏幕尺寸：指的是屏幕对角线的长度
设备的大小：1366*768 px
指的是水平方向有1366个像素点，在垂直方向有768个像素点
像素密度：每英寸所能容纳像素点的个数（像素密度越大，画面越精细，反之越粗糙 ）
物理像素与物理像素比
物理像素点指的是屏幕显示的最小颗粒 ，由于视网膜屏幕的显示技术，可以将更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕的细腻程序，使用画质更清楚。
物理像素也称为分辨率
二倍精灵图的做法
将精灵图等比例缩小为原来的一半
之后根据大小 测量坐标
注意代码里面 background-size也要写：精灵图原来宽度的一半
DPG图片压缩技术
特点：压缩后的图片，可节省用户近50%的浏览流量，提升了访问速度，也能兼容jpeg，DPG图片与webp图片的清晰度对比没有差距
webp图片格式
webp图片是一种加快图片加载速度的图片格式，图片压缩体积大约只有JPEG的2/3、并能节省大量的服务器宽带资源和数据空间
Css初始化
移动端 CSS 初始化推荐使用 normalize.css/
Normalize.css：保护了有价值的默认值
Normalize.css：修复了浏览器的bug
Normalize.css：是模块化的
Normalize.css：拥有详细的文档
官网地址： necolas.github.io/normalize.c…
背景缩放 background-size
background-size属性为背景图片的尺寸
background-size: 宽度|高度|百分比|cover|contain
cover将背景图片 等比例拉伸至覆盖背景区域，可能背景图片会显示不全。
contain 将背景图片等比例拉伸，只要有高度或宽度有一个条件占满背景区域，就会停止拉伸，可能背景区域会有部分空白
css3 盒模型 box-sizing
传统的盒模型为：盒子的宽度=padding+width +border
css3的盒模型为 : 盒子的宽度=width (其中width包含 padding 和 border ）
在css3的盒模型中，padding和border不会撑大盒子
/*CSS3盒子模型*/
box-sizing: border-box;
注意：pc需要完全兼容，则不能使用css3的盒模型，如果不考虑兼容性我们就选择CSS盒子模型。
常见的移动端布局
流式布局（百分百布局）
flex 弹性布局（ 强烈推荐）
less+rem 媒体查询布局
bootstarp
通过给盒子设置百分比宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
max-width 限制最大宽度 (max-height 最大高度）
min-width 限制最小宽度 (min-height 最小高度)
flex 弹性布局
flex是flex 是 flexible Box 的缩写，意为弹性布局
当父元素设置的 flex弹性而已 ,子元素的float、clear 和 vertical-align 属性将失效
通过给父元素添加flex属性，控制子元素的位置和排列方式。
父元素常用属性
flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行）
align-items：设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
flex-direction 设置主轴方向
默认主轴的方向是 x 轴方向，从左往右
默认侧轴的方向就是 y 轴方向，从上往下
注意：主轴和侧轴可以相互转换，就看flex-direction 设置谁为主轴，剩下的就是侧轴。而子元素则是以主轴排列的。
justify-content 设置主轴上的元素排列方式
添加给父元素 justify-content 设置子元素的排列方式
注意：使用这个属性之前一定要确定好主轴是哪个
属性值
说明
flex-start
默认值 从头部开始 如果主轴是x轴、则从左到右
flex-end
从尾部开始排列
center
在主轴居中对齐 （如果主轴是x轴则水平居中）
space-around
平分剩余空间
space-between
先两边贴边 再平分剩余空间
flex-wrap 设置子元素是否换行
默认情况下，子元素都排列在主轴上 flex布局默认是不换行的
设置 flex-wrap：wrap 则可以换行
属性值
说明
flex-start
默认值 从上到下
flex-end
从下到上
center
在y侧轴 居中对齐
stretch
拉伸
align-content 设置侧轴上的子元素的排列方式（多行）
该属性是控制子元素在出现换行（多行) 的排列方式, 在单行下是没有效果的 （多行使用）
属性值
说明
flex-start
默认值 在侧轴的头部开始排列
flex-end
在侧轴的尾部开始排列
center
在侧轴中间显示
space-around
子项在侧轴平分剩余空间
space-between
子项在侧轴先分布在两头、再平分剩余空间
stretch
设置子项元素高度平分父元素高度
align-content 和align-items区别
align-items 适用于单行情况下， 只有上对齐、下对齐、居中和 拉伸
align-content适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
总结就是单行找align-items 多行找 align-content
flex-flow 复合属性
flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性
 flex-flow:row wrap;
子元素常用属性
flex属性
flex属性定义子元素分配剩余空间，用flex属性表示 子元素在父元素中占多少份
.item{
   flex: <number>: /*default 0*/
align-self 控制子元素在侧轴上的排列方式
align-self 属性允许 设置子元素 的对齐方式，可覆盖父元素的 align-items 属性
span:nth-child(2) {
      /* 设置自己在侧轴上的排列方式 */
      align-self: flex-end;
// @声明 / 媒体查询类型 /关键字 / 媒体特性 
@media mediatype and|not|only (media feature) {
    CSS-Code;
mediatype 查询类型
将不同的设备划分成不同的类型，称为媒体查询类型
/*语法规范*/
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
/*示例*/
<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">
rem适配布局
rem的使用
如何现实页面的文字随屏幕的尺寸变化而变化？
如何让元素随屏幕尺寸变化现实元素高度和宽度比例缩放？
em 是相对于父元素的font-size的文字大小而变化
rem 是相对于根元素 html 的font-size的文字大小 而变化 的
例如：根元素（ html ) 设置 font-size=12px：非元素设置 width: 2rem; 则换成px表示就是 24px
注意 rem的优势：父元素文字大小可能不一致，但是整个页面在只有一个html、可以很好来控制整个页面的元素大小
/* 根html 为 12px */
html {
   font-size: 12px;
/* 此时 div 的字体大小就是 24px */       
div {
    font-size: 2rem;
rem适配方案
less+rem+媒体查询
①假设设计稿是750px
②假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）
③每一份作为html字体大小，这里就是50px
④那么在320px设备的时候，字体大小为320/15就是 21.33px
⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的
最后的公式：页面元素的rem值=设计稿的元素值(px) / (屏幕宽度/划分的份数)
屏幕宽度/划分的份数 就是html 根元素的font-szie 的大小
或者：页面元素的rem值 = 页面元素值（px） / html font-size 字体大小
flexible.js+rem
使用js的自动处理，原理是将设备划分成为10等份，但是在不同设备下，比例还是一致的。
下载地址：github地址：github.com/amfe/lib-fl…
使用通过script 标签引入 flexible.js 文件
//在index.html中引入 flexible.js 文件
<script src="js/flexible.js"><script>
flexible.js将屏幕划分成10等份
有了flexible.js文件可根据设备的屏幕大小计算出thml的fort-size的文字大小
页面元素的rem=设计稿的元素大小 / ( 设备屏幕的宽度 / 划分的分数 )、
需要结合 cssrem 的插件一起使用 （cssrem 的px转换成rem）
cssrem插件 （px转换rem）
在vscode 插件商店中搜索 并安装 ，安装完成后需要重新启动vscode
Less是一门css扩展语言，也成为了css预处理器
Less在css语言基础上引入了 变量，函数，运算以及函数功能，大大简写了css的编写。
Less出现有利于 css的维护与复用，
Less中文网址：http://lesscss.cn/
Less安装
①安装nodejs，可选择版本(8.0)，网址：nodejs.cn/download/
②检查是否安装成功，使用cmd命令（win10是window+r 打开运行输入cmd） ---输入“node –v”查看版本即可
③基于nodejs在线安装Less，使用cmd命令“npm install -g less”即可
④检查是否安装成功，使用cmd命令“ lessc -v ”查看版本即可
@import导入Less文件
//@import导入的意思，可以把less样式文件导入到另一个less样式文件里面
//link则是把 样式文件导入到html里
@import "Less文件路径"
Less 使用之变量
变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。
@变量名:值;
必须有@为前缀 （@声明变量)
不能包含特殊字符
不能以数字开头
大小写敏感
//定义css一个粉色的变量
@color: pink;
//使用 @color 变量
body{
    color:@color
a：hover{
    color:@color
Less 编译 vocode Less 插件
Easy LESS 插件用来把less文件编译为css文件
安装完毕插件，重新加载下 vscode。
只要保存一下Less文件，会自动生成CSS文件。
Less嵌套
如果遇见（交集|伪类|伪元素选择器|)
内层选择器的前面没有 & 符号，则它被解析为父选择器的后代
如果有&符号，它就被解析为父元素自身或父元素的伪类
//传统的css写法
a:hover{
   color:red
//Less的嵌套
   &:hover{
        color:red;
Less运算
任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。
对于两个不同的单位的值进行运算，运算结果的值取第一个值的单位
运算符中间需要有空格隔开 例如 1px + 5
/*Less 里面写*/
@witdh: 10px + 5;
div {
    border: @witdh solid red;
/*生成的css*/
div {
  border: 15px solid red;
/*甚至使用less的变量@width进行运算 */
width: (@width + 5) * 2;
响应式布局
响应式原理
使用媒体查询针对不同宽度设置不同的样式和布局，从而适配不同的设备。
设备的划分情况：
小于768的为超小屏幕（手机）
768~992之间的为小屏设备（平板）
992~1200的中等屏幕（桌面显示器）
大于1200的宽屏设备（大桌面显示器）
响应式布局容器
响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
父容器版心的尺寸划分
超小屏幕（手机，小于 768px）：设置宽度为 100%
小屏幕（平板，大于等于 768px）：设置宽度为 750px
中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px
但是我们也可以根据实际情况自己定义划分
 <style>
        /*由于使用媒体查询的方法 元素的宽度根据屏幕的宽度而定*/
        .container {
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        /* 1. 超小屏幕下  小于 768  布局容器的宽度为 100% */
        @media screen and (max-width: 767px) {
            .container {
                width: 100%;
        /* 2. 小屏幕下  大于等于768  布局容器改为 750px */
        @media screen and (min-width: 768px) {
            .container {
                width: 750px;
        /* 3. 中等屏幕下 大于等于 992px   布局容器修改为 970px */
        @media screen and (min-width: 992px) {
            .container {
                width: 970px;
        /* 4. 大屏幕下 大于等于1200 布局容器修改为 1170 */
        @media screen and (min-width: 1200px) {
            .container {
                width: 1170px;
    </style>
    <!-- 响应式开发里面，首先需要一个布局容器 -->
    <div class="container"></div>
</body>
        明天的 @ 一直在学习
       
粉丝