CSS-2

相关素材：效果图、图片素材、标注图(ui提供、用Photoshop )

确定版心（安全区0---photoshop 测量即可）➡ 分析布局 （从上往下大块有谁，小块有谁，横着还是竖着？）➡ 创建站点（编辑器创建文件夹存放代码---大文件夹、图片文件夹、HTML文件、CSS文件）

html文件（首页命名index.html）➡ css文件（重置样式、版心等）➡ 实战开发（大盒子套小盒子 css宽高 浮动 间距 内容样式）

图片素材注意点：
/* 切图的时候选择切片工具-切多个图完成-视图-选择存储为web格式（快捷键ctri+shift+alt+s-左键按住不动框选整个页面（为了所有切片保存格式统一）-所有用户切片-保存就行 */

测量版心（注意单位）
/* 用矩形框选工具框选 左边多余宽度，比对 右侧多余宽度，一致 则版心测量准确 */
创建站点
  /* 创建html、css文件命名一致为index(首页)、图片文件夹复制过去（复制为了做好备份的准备）/css文件做好重置样式+html做好链接外部样式、准备开发写代码 */
困难点：
  效果图上的字体颜色是拾取不准确！
  字号大小注意：找字最高的高点测量，有的11号有的12号
注意点：
  字号大小16px默认；可以不用写代码标注
  字体有超链接，字体颜色给a标签修饰
  文本默认间距用line-height:1;解决
  图片属于行内快元素，行内块垂直方向上，默认是相对于基线对齐，会默认有个下间距：
     /*图片向下撑大3px,解决方法：
    A、给img设置display:block; (转换成块元素)
    B、给img设置vertical-align:top;(设置垂直靠上对齐)*/
  text-align可以让文本、行内、行内块元素居中
  字之间的间距：letter-spacing: 3px;

依据CSS的显示：元素分为块元素、行内元素、行内块元素
块元素： div p h1-h6 ul li 表单...
A、默认情况下，块状元素都会占据一行 且 会按顺序/* 自上而下 */排列。
B、块状元素都/* 可以定义自己的宽度和高度 */。
C、块状元素一般都作为其他元素的容器，可以容纳其他内联元素和其他块状元素。/* p和h1-h6比较特殊---p不能包自己和其他的块元素；h1-h6不能报自己和同类标题，其他都可以。*/
行内元素：span a b strong i em  上标和下标...
A、内联元素的表现形式是始终以 行内 逐个显示：/* 横着排列 */
B、内联元素没有自己的形状，/* 不能定义宽和高 */，他显示的宽度和高度只能依据所包含内容的宽高来确定，它的最小内容单元也会呈现矩形形状
C、内联元素/* 对于margin和padding上下间距设置 显示不正确；多个内元素之间的间隙是 识别回车为空格 带来的。 */
行内块元素：img input textarea...
A、内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点
如何判断一个标签是什么元素？
A、先看多个标签是如何排列 
  竖着排列--可定义宽高必定是块元素
  横着排列--可定义宽高是行内快元素/不可定义宽高是行内元素

display:block; 把元素转成块
display:inline;把元素转成行内
display：inline-block;把元素转成行内块
display:none;隐藏
display:list-item;li标签默认的display属性值
display的属性值有18个，甚至更多。
css里注意一点display几乎万能： 
A、/*行内块元素可以转成块；但是不能转换成行内元素，不生效*/
B、/*如果列表中有其他标签，例如：p，需要和无序列表的形式一样，则需要用到display:list-item;*/
  CSS代码
  ul p{
    display:list-item;
  }
  HTML代码
  <ul>
    <p>我是杨</p>
    <li>我是李</li>
    <li>我是李</li>
    <li>我是李</li>
    <li>我是李</li>
  </ul>
C、网页中鼠标悬停会出现列表或者其他提示信息，而这些信息初期时被隐藏了的
/*想要隐藏 所用的标签属性就是display:none;
  显示的时候 可以设置display的属性值时block、inline、inline-block；*/
鼠标悬停显示的用法：
  需求：鼠标悬停在橘色div的时候，h4显示（前提：h4隐藏）
  div:hover h4{display:inline-block;}
  CSS代码：
  div{
    background:orange;
    width:200px;
    height:200px;
  }
  h4{
        /* 隐藏标签 用display:none */
    display:none;
  }
  /* 鼠标悬停在橘色区域上的时候，h4显示*/
  div:hover h4{
    display:inline-block;
  }
  HTML代码：
  <div>
    <h4>我是李海涛</h4>
    <h4>我是李海涛</h4>
    <p>别看我，我有对象</p>
  </div>

对于一个盒子想要实现水平居中
1、给固定宽度，添加margin:0 auto;居中
  这个方法适合宽度固定的时候使用；
2、如果宽度未知，还想盒子一直水平居中（后续添加或删减一直处于居中）
  给想要居中的盒子添加display:inline-block;
  然后在给想要居中的盒子的父元素添加text-align:center;
! 当所有li标签添加了左浮动后，ul已经高度塌陷了，此时给Ul 添加overflow:hidden;就可以解决。
！遇到列表属性---li标签写字体大小，样式 ；超链接a写字体颜色，文字左右间距（padding）
！外卖案例可知：内容多的时候靠左，少的时候居中；原理和盒子任何时候都想居中是一个意思。（text-align:center;不仅可以让文本水平居中，还可以让所有的行内和行内块元素居中）
！中英文切换：
  /* 鼠标悬停上去之后，让span显示 */
    li:hover span{
      display:block;
      background:orange;
      color:white;
    }
  /* 鼠标悬停上去 让b标签消失 */
    li:hover  b{
      display:none;
    }

position:absolute; 
A、一个盒子给了绝对定位后，是悬在页面之上的，就不再占据浏览器的位置；额，悬空不占位的现象，叫做脱离文档流-----原地飘着
B、偏移位置：（top、left、right、bottom的参照物）
   /*当没有父元素或者父元素没有定位，参照物是浏览器窗口的第一屏。*/
position:absolute; 
top:150px; —— 距离网页浏览器窗口的第一屏上边150px;
left:-50px; —— 距离网页浏览器窗口的第一屏左边-50px,在页面外
right:50px; —— 距离网页浏览器窗口的第一屏右边50px;
bottom:0px; —— 距离网页浏览器窗口的第一屏下边0px;
   /*当有父元素且父元素有定位，参照物是父元素*/
css:
.box4 {
  position:absolute; }      
.box5 {
  position: absolute;
  bottom:-20px; —— 距离box4的下边框-20px;
  right:100px; —— 距离box4右边框100px; }
html:
<div class="box4">
  <div class="box5">
  </div>
</div>
C、层叠顺序：（z-index）/*z-index在定位之后才可以用*/
  z-index属性是不带单位的，默认数值是0，并且可以给负值，没有设置z-index时，最后写的对象（html代码中看顺序）优先显示在上层，设置后，数值越大，层越靠上。

position:fixed;   —— 和绝对定位只有参照物不一样。
A、一个盒子给了固定定位后，是悬在页面之上的，就不再占据浏览器的位置；额，悬空不占位的现象，叫做脱离文档流-----原地飘着
B、偏移位置：（top、left、right、bottom的参照物）
 /* 参照物：浏览器的当前窗口（视口）永远不会脱离视线 */
C、层叠顺序：（z-index）/*z-index在定位之后才可以用*/
  z-index属性是不带单位的，默认数值是0，并且可以给负值，没有设置z-index时，最后写的对象（html代码中看顺序）优先显示在上层，设置后，数值越大，层越靠上。

方法一：
/*方法1——计算函数*/
        top: calc(50% - 200px);
        left: calc(50% - 200px);
/* calc() 计算函数 支持+ - * / 注意点： +和-的符号前后必须加空格*/
方法二：
/*方法2——margin*/
        top: 50%;
        left: 50%;
        margin-top: -100px;/*减去的是盒子的一般高度 */
        margin-left: -100px;/* 同理  */
方法三：
/*方法3——小技巧*/
        margin:auto;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

position:relative;
A、不脱离文档流
/* 给了相对定位后，该盒子没有悬空在页面之上，还占据浏览器的位置  */
B、偏移位置：（top、left、right、bottom的参照物）
   /* 自己的初始位置 —— 相对定位以后移动位置，原来的空间还在*/
C、层叠顺序：（z-index）/*z-index在定位之后才可以用*/
  z-index属性是不带单位的，默认数值是0，并且可以给负值，没有设置z-index时，最后写的对象（html代码中看顺序）优先显示在上层，设置后，数值越大，层越靠上。

父相子绝：
想要绝对定位的标签参照物是父元素，父元素可以是固定定位，绝对定位，也可以是相对定位；/*但是前两个定位会脱离文档流影响页面布局，所以常用父元素为相对定位*/

position:sticky;  粘性定位制作吸顶效果
/* 是固定和相对定位的结合体，默认是相对定位，超出指定值就是固定定位效果，必须搭配top/left/right/bottom其中1个才有效，粘性定位是css3.0新增加的，兼容性不好 */
A、文档流
B、偏移位置：（top、left、right、bottom的参照物）
C、层叠顺序：（z-index）/*z-index在定位之后才可以用*/

A、页面扩展灵活
B、提高页面的加载速度
C、提高用户体验

自适应的方法：
A、宽度或者高度不写
/* 注意点：父元素高度不写，子元素浮动会引起高度塌陷 */
B、宽度或高度单位使用%
C、用max-width、min-width、min-height、max-height
高度塌陷的触发条件：
父元素高度不写，且所有的子元素都浮动（float）了，那么父元素会高度塌陷。因为浮动后，左右的子元素盒子是浮在页面之上的，不占位置，所以父元素会高度塌陷
高度塌陷的解决方法：
A、给塌陷的盒子添加 overflow:hidden;
/* B方法仅作了解，原因增加了很多空的标签，造成代码冗余 */
B、在所有的浮动盒子的最下面添加一个空标签，且添加声明 clear:both;
/* clear:both;清除浮动，目的是为了打破横向排列 */
C、使用万能清楚法子 
塌陷的盒子:after{content:"空着不写"；display:block; clear:both;}

什么是CSS精灵：
CSS精灵（CSS spirtes）是一种网页图片应用处理技术。
主要是指将网页中需要的零星的小图片集成到一个大的图片中。
这个拼接好的大图叫做精灵图也叫雪碧图。
为什么要用精灵图？
A、通过图片整合来减少对服务器的请求次数，从而提高页面的加载速度。
B、通过图片整合来减小图片的体积。
精灵图的制作：
1)先把需要的相关小图标切下来
2）利用PS新建一个图层，背景选择透明，尺寸大小随便给
3）把事先准备的小图标拖到ps里面打开
4)按照从左到右或者从上到下，把小图标拼接一下，注意要有间距
5）裁剪自己需要的部分，保存成png格式
/*打开PS 文件 - 新建（背景内容+宽度+高度有→单位必须是像素 ）- 确定   - 把准好的图片选中拖进来（图片被叠起来了） - 回车键（有几个图敲几下）- 选择移动工具（左数第一个）- 上面勾选 自动选择+图层 - 排列拼接 - 切片工具裁剪 （多余的不要）- 文件 - 存储为web所用格式 - 左键框选一下 - png格式 - 存储*/
精灵图使用方法：
1、HTML中建立标签，内部插入图片，CSS中规定标签宽高，让图片溢出隐藏，用margin来移动图片位置
<p class="pic"><img src=""/>  </p>
2、HTML中建立标签，CSS里设置背景图，用background-position移动位置
<p class="pic"></p>
/* 方法2优点：减少了HTML中Img的数量，同时避免了css中margin-top的使用  */
3、CSS用before属性
div:before{} 用background-position移动位置
/* 最精简的是方法3  */

为什么要使用字体图标?
1)设计不用在切图了，更不需要针对不同场景切出大小、颜色、格式等不同的图片，只需维护一个图标项目库即可
2)字体图标缩放不失真，不会变模糊
3)开发者不用大量引入图片，仅class名就可搞定，修改灵活
4)减少网络请求次数，一个class文件可包含所有图标。节约流量，图标是图片格式，每个几k到几十k，而css文件一般只有几k.
字体图标使用方法：
A、
1)打开网站 https://www.iconfont.cn/选择方式登录
2）搜索项目所需要的所有小图标，点击下载按钮
3）复制svg代码，黏贴到自己的文件中即可。
B、
1）打开网站 https://www.iconfont.cn/选择方式登录
2）在官方网站搜索项目所需要的所有小图标，添加入库。
添加至项目（如果是团队合作选择这个）
下载素材（ui设计师）
下载代码（点击）—— 压缩包解压
3）下载下来代码，按照demo_index.html说明操作即可。

A、Unicode使用方法：复制复制复制修改HTML中的图标代码即可
缺点：看不出来是什么图标
<style>
    *{
      padding:0;
      margin:0;
    }
      @font-face
      /* font-face-字体文件  引入的字体是icon font 用src来引入这种字体 ，把引入的ttf文件复制粘贴进目录*/
        {
        font-family: 'iconfont';
        src: url('iconfont.ttf?t=1642394561295') format('truetype');
      }
      .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        /*  font-smoothing-消除锯齿 让图看起来更精致 */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      /* 引入的图片太小，另起class名字像字号大小、margin左右间距等正常调整  */
      .icon1{
        font-size:80px;
        color:pink;
            }
      .icon2{
        font-size:80px;
        color:red;
              }
      .icon3{
        font-size:80px;
        border:2px solid red;
        margin-left:200px;
      }
    </style>
  </head>
  <body>
    <span class="iconfont icon1">&#xe601;</span>
    <span class="iconfont icon2">&#xe603;</span>
    <span class="iconfont icon3">&#xe693;</span>
  </body>
B、Font class使用方法：
优点：通过class名字就知道插入的图标是什么
修饰大小和字体一样
<head>
    <!-- 外接的CSS文件  去相应的 iconfont.css文件里修改图标的样式，和文字修饰一样-->
    <link rel="stylesheet" href="./iconfont.css">
  </head>
  <body>
    <!-- 建议使用方法2 因为通过class名字就知道插入的图标是什么 -->
    <span class="iconfont icon-a-xinxiduihuapinglun"></span>
    <span class="iconfont icon-richang1_taiyang"></span>
  </body>
C、symbol方法：
<head>
    <!-- 引入外接的js文件  -->
    <script src="iconfont.js"></script>
    <style>
    .icon {
      /* 调整图标大小用宽高  */
      width: 100px;
      height: 100px;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
    </style>
  </head>
  <body>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-richang1_jingzi"></use>
    </svg>
  </body>

/* 内核Trident 又称IE内核或MSHTML */
代表作品是IE，因为IE捆绑在Windows中，所以占有极高的市场份额，此内核只能应用于windows平台，且是不开源的。Maxthon(遨游)、腾讯、Theworld世界之窗、360浏览器
/* 内核Gecko  */
代表作品Mozilla Firefox 是开源的，它的最大优势是跨平台，能在Microsoft Windows,Linux和MacOS X等主要操作系统上运行
/* 内核Webkit */
代表作品Safari、chrome、傲游浏览器3，是一个开源项目。
/* 内核Presto */
代表作品Opera（前内核），Presto是由Opera software开发的浏览器排版引擎。他是世界上公认的渲染速度最快的引擎。Opera现已改用Google Chrome的Blink内核
/*  内核Blink*/
由Google和Opera Software开发的浏览器排版引擎，2013年4月发布

CSS的Bug1
  /*图片添加超链接之后，在IE（老版本）上有边框*/
Hack
  给img的边写成0；img(border:0;)
CSS的Bug2
  /*表单元素距离顶部间距不一致（IE,MOZ,C,O,S)*/
Hack
  给表单元素添加声明：float:left;
CSS的Bug3
  /*Cursor:hand 属性值只有IE9以下的浏览器识别*/
Hack  
  如统一某元素鼠标指针形状为手型，应添加声明：cursor:pointer;
CSS的Bug4
  /*透明度的兼容CSS设置 opacity在IE8以下不兼容*/
Hack
  filter:alpha(opacity=50)
CSS的Bug5
  /*浏览器默认的字体不统一*/
Hack
  给body设置 font-family

CSS的Bug1
  /*图片添加超链接之后，在IE（老版本）上有边框*/
Hack
  给img的边写成0；img(border:0;)
CSS的Bug2
  /*表单元素距离顶部间距不一致（IE,MOZ,C,O,S)*/
Hack
  给表单元素添加声明：float:left;
CSS的Bug3
  /*Cursor:hand 属性值只有IE9以下的浏览器识别*/
Hack  
  如统一某元素鼠标指针形状为手型，应添加声明：cursor:pointer;
CSS的Bug4
  /*透明度的兼容CSS设置 opacity在IE8以下不兼容*/
Hack
  filter:alpha(opacity=50)
CSS的Bug5
  /*浏览器默认的字体不统一*/
Hack
  给body设置 font-family