• 行内元素的特点：

（1）相邻行内元素在一行上，一行可以显示多个。

（2）高、宽直接设置是无效的。

（3）默认宽度就是它本身内容的宽度。

（4）**行内元素只能容纳文本或则其他行内元素。

注意：

• 链接里面不能再放链接。

• 特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。

2.3、行内块元素（inline-block）

在行内元素中有几个特殊的标签——、、，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点：

（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个 （2）默认宽度就是它本身内容的宽度。 （3）高度，行高、外边距以及内边距都可以控制。

三、css背景（background）

• background：属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：

• background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;

• 语法：

background: transparent url(image.jpg) repeat-y  scroll center top ;

四 CSS特性和盒子模型

一、css三大特性

1.1 CSS层叠性

概念：

所谓层叠性是指多种CSS样式的叠加。

是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

原则：

• 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。

• 样式不冲突，不会层叠

1.2 CSS继承性

• 概念：

  子标签会继承父标签的某些样式，如文本颜色和字号。

  想要设置一个可继承的属性，只需将它应用于父元素即可。

简单的理解就是： 子承父业。

• 注意：

  • 恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。

  • 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

1.3 CSS优先级

概念：

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，

• 选择器相同，则执行层叠性

• 选择器不同，就会出现优先级的问题。

权重计算公式

二、盒子模型

总结：

• 盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。

• 盒子里面的文字和图片等元素是 内容区域

• 盒子的厚度 我们成为 盒子的边框

• 盒子内容与边框的距离是内边距（类似单元格的 cellpadding)

• 盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）

三、外边距（margin)

3.1. 文字居中和盒子居中区别

1. 盒子内的文字水平居中是 text-align: center, 而且还可以让 行内元素和行内块居中对齐

2. 块级盒子水平居中 左右margin 改为 auto

3.2.清除元素的默认内外边距(重要)

为了更灵活方便地控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除

代码：

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

注意：

• 行内元素为了照顾兼容性， 尽量只设置左右内外边距， 不要设置上下内外边距。

3.3.外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

(1). 相邻块元素垂直外边距的合并

• 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom

• 下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和

• 取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

解决方案：尽量给只给一个盒子添加margin值。

(2). 嵌套块元素垂直外边距的合并（塌陷）

• 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框

• 父元素的上外边距会与子元素的上外边距发生合并

• 合并后的外边距为两者中的较大者

解决方案：

1. 可以为父元素定义上边框。

2. 可以为父元素定义上内边距

3. 可以为父元素添加overflow:hidden。

还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题，后面咱们再总结。。。

五 CSS样式补充

一、其他样式

1、圆角边框

border-radius 属性用于设置元素的外边框圆角。

语法：

 border-radius:length;    

• 参数值可以为数值或百分比的形式

• 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%

• 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角

• 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius

2、盒子阴影

CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。 语法：

 box-shadow: h-shadow v-shadow blur spread color inset; 

3、文字阴影

在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本。 语法：

 text-shadow: h-shadow v-shadow blur color;

4、过渡

当元素的样式发生变化时,我们希望可以缓慢完成看到一个过渡的效果

transition: 发生变化的属性 过渡完成的时间;
/*例如*/
transition: height 1s;

5、缩放

transform: scale(数字,数字);
/*第一个数字表示宽度的倍数，第二个数字表示高度的倍数*/

二、浮动

1、特性

1. 浮动元素会脱离标准流(脱标：浮动的盒子不再保留原先的位置)

2. 浮动的元素会一行内显示并且元素顶部对齐

3. 浮动的元素会具有行内块元素的特性

   浮动元素的大小根据内容来决定

   浮动的盒子中间是没有缝隙的

2、浮动布局注意点

1、浮动和标准流的父盒子搭配。

先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

2、一个元素浮动了，理论上其余的兄弟元素也要浮动。

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，以防止引起问题。

浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

七 CSS清除浮动和定位

一、清除浮动

1.1为什么要清除浮动

因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。

1.2、清除浮动本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

1.3、清除浮动方法

1).额外标签法(隔墙法)

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 
，或则其他标签br等亦可。

• 优点： 通俗易懂，书写方便

• 缺点： 添加许多无意义的标签，结构化较差。

2).父级添加overflow属性方法

可以给父级添加： overflow为 hidden| auto| scroll  都可以实现。

优点： 代码简洁

缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

3).使用after伪元素清除浮动

:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了

使用方法：

 .clearfix::after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   
?
 .clearfix {*zoom: 1;}   /* IE6、7 专有 */

二、定位

定位模式决定元素的定位方式 ，它通过 CSS 的 position 属性来设置，其值可以分为四个：

2.1、相对定位（relative）

相对定位是元素在移动位置的时候，是相对于它自己原来的位置来说的（自恋型）。

语法：
      position:relative;
      left | right | top | bottom: 值;
?
特点：
      1. 可以改变元素位置   
      2. 相对定位的元素与父元素是否是定位的元素无关
      3. 相对定位的元素是相对元素自己原来的位置
      4. 相对定位的元素没有脱标
?
?
相对定位使用场景：
      ? 一般情况下，只要子元素设置了绝对定位后，父元素就要设置相对定位【子绝父相】
           1. 因为给父元素设置了相对定位后，绝对定位的子元素会以父元素为参照
           2. 父元素是相对定位的时候，父元素没有脱标，父元素占位置
           3. 子元素设置了绝对定位，父元素就设置相对定位

2.2、绝对定位（absolute）

 语法：
      position: absolute;
      left | right | top | bottom: 值;
?
  特点：
        1. 可以通过绝对定位改变元素位置
        2. 如果一个元素设置了绝对定位，默认会以body【浏览器】左上角为参照进行位置改变
        3. 如果一个子元素是绝对定位，如果其父元素设置了除静态定位以外的其他定位，那么该绝对定位的子元素就会参照父元素左上角进行位置改变。
        4. 绝对定位可以让元素脱标不占位置
?
  使用场景：
         ? 在网页布局中（结构中），如果我们发现有一个标签（盒子） 压着 另外一个标签（盒子）。 我们需要用到绝对定位

1. 完全脱标 —— 完全不占位置；

2. 父元素没有定位，则以浏览器为准定位（Document 文档）。

3. 父元素要有定位

   元素将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

2.3、定位居中

  margin: 0 auto； 只能让标准流下的盒子居中显示
 
  如何实现绝对定位盒子居中：
        先通过 left | right | top | bottom ： 50%  【相对父元素移动一半】
        通过margin 设置负数 移动 当前元素宽度或高度一半
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;

2.4、固定定位（fixed）

  语法：
      position: fixed;
      left | right | top | bottom: 值;
?
  特点：
         1. 可以改变元素位置
         2. 固定定位的元素始终都是以body（浏览器）左上角为参照设置位置。
         3. 固定定位的元素也是脱标不占位置的元素
?
   使用场景：
          1. 网页中的广告

三、定位层级关系

 注意：
        ?只有定位的元素才有层级关系【标准流元素和浮动的元素都没有成绩关系】
?
  总结：
        1. 如果一个元素设置了定位（除静态定位），那么该元素的层级就要比其他元素的层级高
        2. 如果希望提高元素的层级，那么给定位的元素设置 z-index 属性，提高层级
        3. 如果元素都设置了定位，那么最后的定位元素的层级比前面定位的元素的层级要高【后来居上】
        4. 如果z-index值不同，那么值越大该元素的层级越高，反之层级越低【可以设置负数】
        5. 如果一个元素的父元素也设置了定位，那么层级关系的高低，以父元素为准。

八 表格和表单

一.表格

?
      ◆ 组成
         行  tr
         列  td
        表格  table
    
      ◆  写法：
         
             
                
             
        

1.1、表格属性

1. border属性： 设置边框
?
2. width属性： 改变宽度
?
3. height属性： 改变高度
        
4. 去掉td与td之间的距离  cellspacing的默认是2 
?
5. 设置内容居中显示  align: left | center  | right
    ◆如果希望表格中的内容对齐，那么将align属性设置给tr或者td
    ◆如果将align属性设置给table，只能改变table整体的对齐方式，不会影响内容的对齐方式
        
6. 如果希望给表格设置表头，那么请使用th标签替代td标签，th在表格中就是表示表头，默认实现文字居中加粗显示
    
7. 设置背景颜色属性： bgcolor="颜色"；
?
8. 设置表格的标题： 人员信息表
?
          
?
                
?
                
                    
                    
                    
                    
                
              
        
人员信息表
姓名
年龄
职业
性别

?
          注意：
             1. 在浏览器中所有的元素（文字，图片），默认都是左对齐

1.2、表格合并单元格：

    1. 横向合并：  colspan="2"
?
    2. 纵向合并：  rowspan="3"
    
        
        
        
    
    
        
        
        
        
    
    
1. 找出要合并的单元格（th 、 td）确定目标单元格，明确合并方式
    水平方向（最左边的那个） ，（要合并是不同列的单元格，就是跨列合并colspan）
    垂直方向（最上边的那个），（要合并是不同行的单元格，就是跨行合并rowspan）
2. 在目标单元格上写 合并的个数
    
3. 把多余单元格删除

1.2、表格的细线边框

通过表格的cellspacing="0",将单元格与单元格之间的距离设置为0，

• 但是两个单元格之间的边框会出现重叠，从而使边框变粗

• 通过css属性：

table{ border-collapse:collapse; }  

二、表单

  ? 作用：  收集信息(通过表单控件收集信息)
?
?
  ? 表单组成：
        1. 表单域 （form）
        2. 提示信息
        3. 表单控件
?
?
  ? 表单域（form）:
?
         ◆属性 action 设置一个后台程序，处理表单控件中的数据  
?
         ◆属性 method 设置一个提交数据方式  （get |  post）
?
?
         

?
                用户名: 
?
                

                

?
                密码: 
?
                

                

?
                
?
          
        
   ? 表单控件：
        1. 输入框：
           属性： name设置控件名称
                maxlength设置当前控件最多能输入多少个字符
                readonly="readonly" 设置当前控件为只读模式（不能输入）
                disabled="disabled"  当前控件没有被渲染成功（没有被激活）【不能输入】
                value设置控件默认值
?
?
?
        2. 密码输入框： 
?
            属性：与输入框的属性一样
?
?
        3. 下拉列表框：
         
?
                      
                        北京 
                        上海 
                        南京 
                        河北 
                         
            
?
            
        
?
          或者：
          
                        北京 
                        上海 
                        南京 
                        河北 
            
?
          属性： selected="selected"  设置默认选中项
          例如：
            北京 
            上海 
            南京 
            河北 
?
?
        
        4. 复选框： 
           属性：
                checked="checked" 设置默认选中项
?
        爱好
        旅游
        学习
?
?
  5. 单选控件：
        注意：
            1. 如果要实现单选效果，那么需要设置相同的name值
               男
               女
?
            2. checked="checked" 设置默认选中项
?
?
    6. 上传控件： 
?
?
    7. 文本域：
?
    
     8. 提交表单数据： 
         按钮 
        
?
        
?
?
    9. 重置按钮： 将表单控件中的值恢复到默认值
         
?
?
    10. 普通按钮：
            不能提交数据，可以和js配合使用

九 元素显示隐藏和文本溢出隐藏

一. 元素的显示与隐藏

在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。

他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。 最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！！

display 显示

display 设置或检索对象是否及如何显示。

display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。

特点： 隐藏之后，不再保留位置。

visibility 可见性

设置或检索是否显示对象。

visible : 　对象可视

hidden : 　对象隐藏

特点： 隐藏之后，继续保留原有位置。（停职留薪）

overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

visible : 　不剪切内容也不添加滚动条。

auto : 　 超出自动显示滚动条，不超出不显示滚动条

hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉

scroll : 　不管超出内容否，总是显示滚动条

二、鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

cursor :  default  小白 | pointer  小手  | move  移动  |  text  文本

三. vertical-align 垂直对齐

vertical-align : baseline |top |middle |bottom 

设置或检索对象内容的垂直对其方式。

四. 溢出的文字隐藏

white-space

white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容

normal : 　默认处理方式 nowrap : 　强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

可以处理中文

text-overflow 文字溢出

text-overflow : clip | ellipsis

设置或检索是否使用一个省略标记（...）标示对象内文本的溢出

clip : 　不显示省略标记（...），而是简单的裁切

ellipsis : 　当对象内文本溢出时显示省略标记（...）

注意一定要首先强制一行内显示，再次和overflow属性 搭配使用

单行文本溢出

.box{
    /* 1. 文字显示不开，是否开启换行   nowrap：不换行*/
    white-space: nowrap;
    /* 2. 超出的隐藏 */
    overflow: hidden;
    /* 3. 文字溢出的时候，用省略号显示 */
    text-overflow: ellipsis;
}

多行文本溢出（了解）

.box{
    overflow: hidden;
    text-overflow: ellipsis;
     /* 弹性伸缩盒子模型显示 */
    display: -webkit-box;
     /* 限制在一个块元素显示的文本的行数 */
    -webkit-line-clamp: 3;
     /* 设置或检索伸缩盒对象的子元素的排列方式 */
     -webkit-box-orient: vertical;
}       
     

十 结构伪类+转换属性+动画

一.结构伪类选择器

1. child系列

其中“n”是其参数

• 可以是整数值(1,2,3,4)，

• 也可以是表达式(2n+1、-n+5)

• 关键词(odd、even偶数)

• 但参数n的起始值始终是1，而不是0。

也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。

经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。如下表所示：

注意： 表达式中的n要放在前面写

nth-child的选择器是先排位置，然后再找标签，如果标签和位置对不上，那么这个选择器就是错误的。如下代码

<style>
    div p:nth-child(2){
        /*这是错误的选择器，因为第二个位置的标签是h1*/
        color: pink;
    }
style>
?
<div>
    <p>p1p>
    <h1>h标签h1>
    <p>p2p>
div>

2. nth-of-type系列

使用规则与nth-child一样，唯一的区别是，这个伪类选择器的位置，是先把元素找到后，再从上往下排位置

<style>
    div p:nth-of-type(2){
        /*p2这个文字变成粉色了*/
        color: pink;
    }
style>
?
<div>
    <p>p1p>
    <h1>h标签h1>
    <p>p2p>
div>

二.背景

1. 背景尺寸

我们的css3背景图可以通过background-size:进行缩放

格式：background-size:水平 垂直

注意：垂直的可以省略，如果垂直缩放省略的它会根据水平进行等比例缩放。

-webkit-这个是我们谷歌和苹果浏览器的兼容性前缀（加上这个-webkit-就能保证谷歌和苹果浏览下面显示正常）

-webkit-background-size: 500px 500px;

background-size: 500px 500px;

我们知道图片只要是放大了就会失真。

图片缩放可以给百分比 50%或者百分之百100%

第二、background-size:cover

它是根据父盒子的大小进行等比例缩放，不管是宽度还是高度都必须铺满整个盒子才停止缩放，会溢出父盒子。

第三、background-size:contain

总结：它也会进行图片的等比例缩放，但是只要有一个值（不管是宽度还是高度跟父盒子一样了）就停止缩放。

它的好处就能看到完整的图片。

三、HTML5新标签与css3新样式

3.1新增的input type属性值：

3.2.多媒体标签

• audio：播放音频

• video：播放视频

同音频播放一样，

autoplay 自动播放（谷歌浏览器不支持，需要再设置muted属性实现静音播放）

controls 是否显示默认播放控件

loop 循环播放

width 设置播放窗口宽度

height 设置播放窗口的高度

四. 2D转换（变换）transform

2d转换是改变标签在2维平面上的位置和形状的一种技术，先来学习2维坐标系

4.1 2d移动 translate

2d移动是2d转换里面的一种功能，可以改变元素在页面中的位置，类似 定位

使用2d移动的步骤：

1. 给元素添加 转换属性 transform

2. 属性值为 translate(x,y) 如 transform:translate(50px,50px);

  div{
    transform: translate(50px,50px);
  }

小结

1. translate中的百分比单位是相对于自身元素的 translate:(50%,50%);

2. translate类似定位，不会影响到其他元素的位置

3. 对行内标签没有效果

4.2 2d旋转 rotate

2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转

使用步骤：

1. 给元素添加转换属性 transform

2. 属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度

div{
      transform: rotate(0deg);
}

2d旋转有以下特点：

1. 角度为正时 顺时针 负时 为逆时针

2. 默认旋转的中心点是元素的中心点

4.3 转换中心 transform-origin 了解

该属性可以修改元素旋转的时候的中心点

1. transform-origin:50% 50%; 默认值 元素的中心位置 百分比是相对于自身的宽度和高度

2. transform-origin:top left; 左上角 和 transform-origin：0 0;相同

3. transform-origin:50px 50px; 距离左上角 50px 50px 的位置

4. transform-origin：0; 只写一个值的时候 第二个值默认为 50%;

4.4 2d缩放 scale

缩放，顾名思义，可以放大和缩小。 只要给元素添加上了这个属性就能控制它放大还是缩小

步骤：

1. 给元素添加转换属性 transform

2. 转换的属性值为 scale(宽的倍数,高的倍数) 如 宽变为两倍，高变为3倍 transform:scale(2,3)

div{
    transform:scale(2,3);
}

五.动画

过渡 只能看到一次变化过程 如 宽度 1000px 变化到 100px

动画 可以设置变化的次数 甚至是无数次

5.1. 步骤

1. 在css中定义动画函数

2. 给目标元素调用动画函数

    /* 1 声明动画函数 */
?
    @keyframes ani_div {
      0%{
        width: 100px;
        background-color: red;
      }
      50%{
        width: 150px;
        background-color: green;
      }
      100%{
        width: 300px;
        height: 300px;
        background-color: yellow;
      }
    }
?
    div {
      width: 200px;
      height: 200px;
      background-color: aqua;
      margin: 100px auto;
      /* 2 调用动画 */
      animation-name: ani_div;
      /* 持续时间 */
      animation-duration: 2s;
    }

5.2. 语法

1. 动画名

   设置要使用的动画名 animation-name:xxx;

2. 持续时间

   设置动画播放的持续时间 animation-duration:3s

3. 速度曲线 linear匀速

   和设置过渡的速度曲线一样 animation-timing-function:linear;

   • linear： 匀速

   • ease： 慢-快-慢 默认值

   • ease-in： 慢-快。

   • ease-out： 快-慢。

   • ease-in-out： 慢-快-慢。

   • steps 设置 跳跃性的动画

     steps (n,start) 在该段时间的开始 触发

     steps(n,end) 在该段时间的 末端 出发

4. 延迟时间

   animation-delay: 0s;

5. 循环次数

   设置动画播放的循环次数 animation-iteration-count: 2; infinite 为无限循环

6. 循环方向

   animation-direction

   如在动画中定义了 0%：红色 100%：黑色 那么 当属性值为

   1. normal 默认值 红 -> 黑

   2. reverse 反向运行 黑 -> 红

   3. alternate 正-反-正... 红 -> 黑 -> 红...

   4. alternate-reverse 反-正-反.. 黑 -> 红 -> 黑 ...

   5. 以上与循环次数有关

7. 动画等待或者结束的状态

   animation-fill-mode 设置动画在等待或者结束的时候的状态

   • forwards：动画结束后，元素样式停留在 100% 的样式

   • backwards： 在延迟等待的时间内，元素样式停留在 0% 的样式

   • both： 同时设置了 forwards和backwards两个属性值

8. 暂停和播放

   animation-play-state 控制 播放 还是 暂停

   running 播放 paused 暂停

5.3. 复合写法

animation: name duration timing-function delay iteration-count direction fill-mode;

5.4. 多个动画写法

用逗号分隔

animation:
name duration timing-function delay iteration-count direction fill-mode，
animation: name duration timing-function delay iteration-count direction fill-mode;

十一 响应式布局

响应式布局核心

使用一套代码,可以在不同的设备(主要指屏幕的宽度)之间显示,并且提供友好的用户体验

1. 核心原理

响应式布局核心的原理是使用了css3中的 媒体查询

2. 媒体查询

是一种css语法,可以根据设备的不同(主要是屏幕的宽度不同),去加载对应的css代码

2.1. 初体验

以下代码分别在 宽度为640px，980px，1200px的屏幕下显示的是不同的颜色！

1. 在css中写入媒体查询代码 @media screen and (width:xxx) 除了xxx之外，其他都是关键字

2. 只有当屏幕的宽度满足 width:值 条件时，才会去加载里面的css代码

<html lang="en"> 
    <head> 
        <meta charset="UTF-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
        <title>Documenttitle>
      <style>
        /* 400px 的屏幕  */
        @media screen and (width: 640px) {
          body {
            background-color: red;
          }
        }
        /* 600px 的屏幕  */
        @media screen and (width: 980px) {
          body {
            background-color: blue;
          }
        }
        /* 800px 的屏幕  */
        @media screen and (width: 1200px) {
          body {
            background-color: green;
          }
        }
      style>
  head> 
  <body> 
  body> 
html>

注意：如果屏幕明明是640的宽，但是就是没有加载对应样式时，可以在页面头部设置如下代码

<head>
    ...
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
    ...
head>

2.2. 媒体特性（媒体查询条件）【掌握】

可以根据屏幕的宽度，高度等参数进行查询。这些参数就叫做媒体特性。

• width-宽度

• min-width 最少宽度

• max-width 最大宽度

• height 高度

• min-height 最少高度

• max-height 最大高度

  /* 屏幕尺寸那么多，我们不可能每一个屏幕大小都是设置一遍，所以一般会定下一个范围表示某类屏幕的大小  */
        /* 例如： 小于640的，我们都把其当做移动端 */
        /* width： 宽度， max-width： 最大宽度  min-width： 最小宽度*/
        /* 思考：小于等于640，要选哪个呢？
                 小于等于640  即最大不能超过640， 那么就设置最大宽度max-width:640px
         */
?
        @media screen and (max-width: 640px) {
            body {
                background-color: red;
            }
        }
?
        /* 假定：640~980 为 ipad的尺寸范围 */
        @media screen and (min-width:641px) and (max-width:980px) {
            body {
                background-color: green;
            }
        }
?
        /* 假定 大于980 为pc端尺寸范围 */
        @media screen and (min-width:980px) {
            body {
                background-color: blue;
            }
        }

• 横屏与竖屏

  (orientation:landscape) 横屏

  (orientation:portrait) 竖屏

    @media screen and (orientation:landscape) {
        /*当屏幕是横屏时（宽度大于高度就是横屏），执行{}里面的样式代码*/
      body {
          background-color: #000;
        }
  }

   

2.3. 媒体类型-【了解】

媒体类型可以理解为不同的设备，如 打印机，计算机的屏幕等。

可以加载不同的媒体类型，一般是 screen 使用得最多

• all 匹配所有的媒体类型 默认值

• screen 匹配 计算机显示器

• print 匹配打印机设备

  /* 匹配所有的媒体类型 */
    @media all and (width:800px) {
      body {
        background-color: red;
      }
    }
  /*等价与上面的 @media all and (width:800px)*/
    @media (width:800px) {
      body {
        background-color: #000;
      }
    }
?
    /* 匹配屏幕 */
    @media screen and (width:800px){
      body {
        background-color: red;
      }
    }
?
    。。。。

2.4. 媒体关键字【了解】

• not 取反

• only 实现更好的兼容（使用较多）

• and 连接（使用较多）

• or 或者 (使用，表示)

 /* 取反 屏幕宽度不为800px的时候 被选中 */
    @media not screen and (width:800px){
      body{
        background-color: red;
      }
    }
 /* only 更好的兼容 屏幕为800px的时候被选中 */
    @media only screen and (width:800px){
      body{
        background-color: red;
      }
    }
?
  /* or 代码中体现为 逗号(,)  意思屏幕为800px或者600px的时候被选中 */
    @media screen and (width:800px),screen and (width:600px) {
      body{
        background-color: green;
      }
    }

2.5. 媒体查询引入方式【掌握】

• style标签里或者css文件中

    
  <style>
      @media screen and (width:800px) {
        body {
          background-color: red;
        }
      }
  style>

• style标签上

   
  <style media="screen and (width:800px)">
      body {
        background-color: red;
      }
    style>

   

• link标签上(掌握)

 
  <link rel="stylesheet" media="screen and (width:800px)"  href="./base.css">

十二 移动端项目 flex布局

一、flex布局

1.1. flex布局原理

• flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。

• 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

• flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局

• 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

总结：就是通过给父盒子添加display:flex，来控制子盒子的位置和排列方式

1.2 父项常见属性【掌握】

注意：以下属性设置的前提： 这个盒子一定要先设置display: flex; ！！！！开启弹性布局模式

• flex-direction：设置主轴的方向

• justify-content：设置主轴上的子元素排列方式

• flex-wrap：设置子元素是否换行

• align-content：设置侧轴上的子元素的排列方式（多行）

• align-items：设置侧轴上的子元素排列方式（单行）

• flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

1.2.1 flex-direction设置主轴的方向

• 在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有 ： 行和列、x 轴和y 轴

• 默认主轴方向就是 x 轴方向，水平向右

• 默认侧轴方向就是 y 轴方向，垂直向下

• 注意：

  • 主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。

  • flex-direction是给（亲）父元素设置的，让我们的子元素跟着主轴方向来排列

  flex-direction可设置的值	意义
  row	（默认值）让子元素从左到右排列
  row-reverse	让子元素从右到左
  column	让子元素从上到下
  column-reverse	让子元素从下到上

1.2.2 flex-wrap设置是否换行

• 默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。

1.2.3 flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性

flex-flow:row wrap;

1.2.4 justify-content 设置主轴上的子元素排列方式

1.2.5 align-items 设置侧轴上的子元素排列方式（单行 ）

• 该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项（单行）的时候使用

1.2.6 align-content 设置侧轴上的子元素的排列方式（多行）

设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行），在单行下是没有效果的。

1.2.7 align-content 和align-items区别

• align-items 适用于单行情况下， 上对齐、下对齐、居中和 拉伸

• align-content适应于换行（多行）的情况下， 可以设置 上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。

• 总结就是单行找align-items 多行找 align-content

1.3 flex布局子项常见属性

• flex子项目占的份数

• align-self控制子项自己在侧轴的排列方式

• order属性定义子项的排列顺序（前后顺序）

1.3.1 flex 属性【掌握】

flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。

.item {
    flex: ; /* 默认值 0 */
}
?

案例：简化版本栅格布局

    <style>
        .box {
            width: 100%;
            max-width: 600px;
            height: 600px;
            border: 2px solid #0094ff;
            margin: 20px auto;
            /* 开启flex布局 */
            display: flex;
        }
?
        /* 以前： 三个盒子平均分配父元素，可以设置width：33.3%， 但是要加上外边距就变得很麻烦（回想我们的栅格布局） */
        /* 现在直接给子元素设flex: 1就可以实现*/
        .box div {
            flex: 1;
            margin-right: 15px;
            height: 100px;
            border: 1px solid red;
        }
?
        .box .last {
            margin-right: 0;
        }
    style>
head>
?
<body>
?
    <div class="box">
        <div>1div>
        <div>2div>
        <div class="last">3div>
    div>
body>

1.3.2 align-self控制子项自己在侧轴上的排列方式【了解】

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。

默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

div:nth-child(2) {
      /* 设置自己在侧轴上的排列方式 */
      align-self: flex-end;
}
?

1.3.3 order 属性定义项目的排列顺序【了解】

数值越小，排列越靠前，默认为0。

注意：和 z-index 不一样。

.item {
    order: ;
}

1.4 案例

flex布局圣杯布局案例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-flex圣杯布局案例.htmltitle>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        header{
            height: 44px;
            width: 100%;
            background: skyblue;
            display: flex;/**指定弹性布局*/
            flex-direction: row;/**指定主轴*/
        }
?
        .left{
            width: 100px;
            height: 100%;
            background: red;
        }
?
        .center{
            flex:1;/**指定权重*/
            height: 100%;
            background: pink;
        }
?
        .right{
            width: 100px;
            height: 100%;
            background: red;
        }
    style>
head>
<body>
?
?
<header>
    <div class="left">leftdiv>
    <div class="center">centerdiv>
    <div class="right">rightdiv>
header>
body>
html>

九宫格布局

<html lang="en">
?
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>16.九宫格布局.htmltitle>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
?
        ul {
            width: 320px;
            height: 320px;
            background-color: #eee;
            margin: 50px auto;
            /* flex布局 */
            display: flex;
            /* 换行 */
            flex-wrap: wrap;
            /* 主轴平均分布 */
            justify-content: space-around;
            /* 侧轴平均分布 */
            align-content: space-around;
        }
?
        ul li {
            width: 95px;
            height: 95px;
            background-color: #ddd;
        }
    style>
head>
?
<body>
    <ul>
        <li>1li>
        <li>2li>
        <li>3li>
        <li>4li>
        <li>5li>
        <li>6li>
        <li>7li>
        <li>8li>
        <li>9li>
    ul>
body>
?
html>

二. vw vh 布局（相对单位相对于屏幕宽度）

1.css单位长度值

十三 rem布局

1. rem适配方案

1.1 需求

不管用户使用的是什么样尺寸的手机屏幕，我们要保证设计稿是能够等比例的还原在屏幕上的

1.2 已知

1rem = 页面中 html 的font-size值

1.3 思路

1. 假设把750的设计稿划分为10等份 那么 1个格子 = 750/10 = 75px

2. 所以我们要在750的屏幕使用rem单位等比例还原设计稿的时，也要使用等比例切割，把页面划分为10等分

   即给html设置font-size值为：75px；

   即 1rem = 75px； ====> 1px = 1/75rem =0.0133rem ;

   验证

   如果在750的屏幕下，100px * 100px 的盒子 与 1.33rem * 1.33rem 的盒子是等大的，那么证明我们的推理是正确的

3. 假设我们能自动获取到当前的屏幕宽度winW，把winW依然按照10等份划分，

   把winW/10 的数值，设置为html的font-size值，

   那么根据 rem会自动相对html的font-size值计算的这个特点，就能实现不同屏幕下等比例还原设计稿了

    

   下面这段js代码的作用，就是自动获取屏幕的

var winW = document.documentElement.clientWidth; // 获取屏幕宽度  
var htmlFont = winW/10; // 屏幕宽度/ 10
// 把屏幕宽/10 的结果设置给html的font-size
document.getElementsByTagName('html')[0].style.fontSize = htmlFont+'px';

现在，在不同的机型下，html的字体大小就不同，即1个rem所表示的像素就不同。所以把元素的宽度、字体大小等属性单位写成rem，就可以动态设置这些属性。在不同的浏览器分辨率下有最好的展示（按照设计图比例）。

<html lang="en" style="font-size: 75px;">
?
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            font-size: 12px;
        }
?
        .box2 {
            width: 1.33rem;
            height: 1.33rem;
            background-color: green;
            /* 12*0.0133rem = 0.1596 */
            font-size: 0.1596rem;
        }
    style>
head>
?
<body>
    <div class="box1">
        100px * 100px 的盒子
    div>
    <div class="box2">
        1.33rem * 1.33rem 的盒子
    div>
body>
html>

<script>
    function setFont() {
        var winW = document.documentElement.clientWidth
        var htmlFont = winW / 10;
        document.getElementsByTagName('html')[0].style.fontSize = htmlFont + 'px';
    }
    setFont();
    window.onresize = function () {
        setFont();
    }
script>