html课后笔记

最新推荐文章于 2023-02-22 14:53:15 发布

万物皆可卷

最新推荐文章于 2023-02-22 14:53:15 发布

阅读量2.1k

点赞数 2

文章标签： html css 前端

本文链接：https://blog.csdn.net/Dipper_Dubhe/article/details/123282856

版权

html标签

结构

<!doctype  html>     -----> 用来告诉浏览器文档类型, 该标签最好不要去掉.如果将该标签去掉之后,浏览器会出现一只怪异模式[浏览器不确定到底按照哪种渲染方式去渲染显示网页]

<html></html>   -----> 根标签

<head></head>   ----- 设置网页中基本的配置内容(网页的标题,网页中的样式,网页中的js代码效果....)

<title></title> ----> 设置网页标题

<body></body>  ---> 代表的是网页主体[在网页中除去地址栏看到的任何信息都要放到body标签中]

单标签

换行标签

 换行标签:  <br>

水平线标签

水平线标签:  <hr>   <hr />

注释标签

注释标签: <!-- 内容 -->     （快捷键）：ctrl + /

双标签

标题标签

设置页面中的内容标题：<h1></h1>  -  <h6></h6>
<h1>标题</h1>

注意：
		1.数字越大，标题标签中的默认字体越小
		2.一个页面一般只有一个h1标签，给logo使用
		3.独占一行

段落标签

表示文章段落或者一段文本： <p></p>
<p>内容</p>
	注意：独占一行

格式化标签

设置颜色大小

设置文字颜色或者设置文字大小:  <font>内容</font>

	1. 改变文字颜色需要添加color属性   <font color="red">我是红颜色的文字</font>
    2.  改变文字大小需要添加size属性    <font color="orange" size="7">我是红颜色的文字</font>

加粗/斜体/删除线/下划线

☞ 设置文字是否加粗:  <strong>内容</strong> 或者 <b>内容</b>

☞ 设置文字斜体显示: <em>内容</em> 或者  <i>内容</i>

☞ 设置文字删除线效果: <del>内容</del>  或者  <s>内容</s>

☞ 设置文字下划线效果: <ins>内容</ins>   或者  <u>内容</u>

无语义（盒子）标签

div 就是 division 的缩写分割，分区的意思

<div> 内容 </div>
注意：单独一行

<span>内容</span>
注意：不会转行

图片标签

☞ 图片标签: <img>
☞ 属性:  
		src:设置要显示的图片路径     <img src="1.jpg">.
		width: 设置标签宽度.
		height: 设置标签高度.
	    title:  鼠标悬停到图片上的文字提示.
		alt:   当图片无法正常显示时候的文字提示.
		border="50px"  给图片加边框

 <img src="img/r1.jpg" width="500px" height="700px" alt="文字提示">

超链接

本质: 就是用来实现页面跳转.
<a  href="目标页面路径">内容</a>

属性:
	target:设置目标页面打开方式(默认在当前页面中打开_self | _blank 新窗口中打开)
总结:
	如果希望当前页面中所有超链接跳转页面的时候,都在新窗口中打开,那么只需要在head标签中设置 base标签,给base标签设置target属性即可.

锚链接

本质: 在当前页面中跳转. 网页中的返回顶部效果
<a href="#test1"></a>
"#": 返回当前页面开始位置
目标：id=test1

路径（上一级/下一级）

 ☞ 绝对路径:
	 1. 如果路径中包含具体的磁盘目录:   d:/img/1.jpg
	 2. 如果路径中具有具体的网址:    www.baidu.com/img/1.jpg

 ☞ 相对路径: 必须在同一个根目录下.
	1. 如果当前页面和被访问的资源在同一个文件夹中,路径=直接设置文件名称
    2. 如果当前页面在被访问资源的上一级目录中, 路径=文件所在的文件夹名称/文件名
    3. 如果当前页面在被访问资源的下一级目录中,路径=../文件名称
    
    搜索上一级目录：../
    搜索下一级目录：文件夹名/
    搜索同一级目录：./

空格

&nbsp;

小于号

＜   &lt;

大于号

＞   &gt;

和号

&amp;

Day 01

1、什么是HTML

HTML： Hyper Text Markup Language.[ 超文本标记语言 ]

超文本: 本质就是一个文本[在网页中,用来实现页面跳转的文本 —超链接标签]

2、Web标准组成

构成： 主要包括结构（Structure）HTML、表现（Presentation）CSS和行为（Behavior）js三个方面。

结构标准：结构用于对网页元素进行整理和分类，咱们主要学的是HTML。对于网页来说最重要的一部分
表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
行为标准：行为是指网页模型的定义及交互的编写，咱们主要学的是 Javascript js
重要的原则：页面三层分离(HTML,css，js书写的时候分开来写)

3、HTML的基本格式

<!doctype  html>
<html>
    <head>
         <title></title>
    </head> 
    <body>
    </body>
</html>

4、超链接基本语法

<a  href="目标页面路径"></a>

5、相对路径的三种形式

☞ 相对路径: 必须在同一个根目录下.
	1. 如果当前页面和被访问的资源在同一个文件夹中,路径=直接设置文件名称
    2. 如果当前页面在被访问资源的上一级目录中, 路径=文件所在的文件夹名称/文件名（找下一级）
    3. 如果当前页面在被访问资源的下一级目录中,路径=../文件名称（找上一级）

6、图片标签以及alt和title区别

☞ 图片标签: <img src="1.jpg">
☞ 属性:  
		src:设置要显示的图片路径     <img src="1.jpg">.
		width: 设置标签宽度.
		height: 设置标签高度.
		
	    title:  鼠标悬停到图片上的文字提示.
		alt:   当图片无法正常显示时候的文字提示.

列表

无序列表

  ☞ 无序列表(unordered-list)
	  <ul>
          <li> 列表项	</li>
          <li> 列表项	</li>
          ...
	  </ul>

有序列表

  ☞ 有序列表： (order-list)
		<ol>
            <li> </li>
            <li> </li>
            <li> </li>
		</ol>

自定义列表

  ☞ 自定义列表(defined-list)

	<dl>
        <dt> </dt>
        <dd> 列表项 </dd>
        <dd> 列表项 </dd>
        <dd> 列表项 </dd>
	</dl>

表格

表格基本

	     <table>
             <tr>
             	<td></td>
             </tr>
	    </table>

表格属性

		   1. border属性： 设置边框

		   2. width属性： 改变宽度

		   3. height属性： 改变高度
		   
		   4.cellspacing :单元格和单元格之间的间距
		   
		   5.cellpadding :单元格和内容之间的间距
		   
		   6.align :对齐
		            left(左)/right(右)/center(居中)
		            
		   7.bgcolor :背景颜色

合并单元格

		1. 横向合并：  colspan="2"

		2. 纵向合并：  rowspan="3"


		<tr>
			<td></td>
			<td colspan="2"></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td rowspan="3"></td>

表格标题

设置表格的标题： <caption>人员信息表</caption>

通常搭配h1~h6来使用

表格标准写法

 1.表格的标准的结构写法：

		 <table>
             <thead>  (表头)
             	<tr>
                	<th></th> 
                 </tr>
             </thead>
             
             
             <tbody>  (内容)
             	 <tr>
                 	<td></td>
                 </tr>
             </tbody>
             
             
             <tfoot>  （表脚）
             	  <tr>
                    <td> </td>
                 </tr>
             </tfoot>
		</table>

表单

表单域

form

◆属性 action 设置一个后台程序，处理表单控件中的数据  
◆属性 method 设置一个提交数据方式  （get |  post）
 一般使用post（隐藏）
 
<form action="1.js" method="post">

                用户名: <input type="text" name="username">
                <input type="submit" name="">
</form>

表单控件

<input type="控件名">

文本框

text

输入框：<input type="text">

密码输入框

password

密码输入框： <input type="password" name=""  value="">

单选框

  radio
  
  单选控件：<input type="radio">
		注意：
			1. 如果要实现单选效果，那么需要设置相同的name值
			   <input type="radio" name="abc">男
			   <input type="radio" name="abc">女

默认选项

checked

checked="checked" 设置默认选中项 或 checked

  <input type="radio" name="abc" checked>男
  <input type="radio" name="abc">女

复选框（多选框）

checkbox

复选框： <input type="checkbox">
		   属性：checked="checked" 设置默认选中项

		<input type="checkbox" checked="checked">爱好
		<input type="checkbox">旅游
		<input type="checkbox">学习

提交按钮

     submit
     
     提交表单数据： 
		<input type="submit">

		<input type="image" name="" src="按钮.jpg">

按钮

	button
	
	普通按钮：
		 <input type="button" value="按钮">   不能提交数据，可以和js配合使用
		<button> 普通按钮 </button>

重置按钮

	reset
	
	重置按钮： 将表单控件中的值恢复到默认值
		 <input type="reset" name="">

上传文件（控件）

	file
	
	上传控件： <input type="file">

下拉框

		select：下拉选框
		option：下拉选框的选项
        
            <select>
                        <option>北京</option>	
                        <option>上海</option>	
                        <option>南京</option>	
                        <option>河北</option>	
            </select>

文本域

textarea

文本域：<textarea></textarea>
cols ：一行可以输入多少个字
rows ：行数

占位符

placeholder   :input的占位属性

placeholder="请输入用户名或密码"

标记关联

label
        为input标签定义一个标记（关联）
        
<label>内容</label>
或
        <input type="radio" name="sex" value="男" id="we">
        <label for="we">男</label>

设置字符串最大长度

maxlength设置当前控件最多能输入多少个字符

css

css样式表

行内样式表（行内式）

    行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式.
    语法：
        <div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

内部样式表（嵌入式）

    内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中
    语法：
        <style>
            div {
            color: red;
            font-size: 12px;
            }
        </style>
    1.<style> 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的<head>标签中

外部样式表（链接式）

实际开发都是外部样式表. 适合于样式比较多的情况. 核心是:样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用.
引入外部样式表分为两步：
1. 新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
2. 在 HTML 页面中，使用<link> 标签引入这个文件。
语法：
    <link rel="stylesheet"  href="css文件路径">

css选择器

标签选择器

语法：
    标签选择器{
        属性: 属性值;
        ...
    }

类选择器

语法：
    .类名 {
        属性1: 属性值1;  
        ...
    } 
    结构需要用class属性来调用  class  类的
  	<div class="类名"> 变红色 </div>

多类名选择器

    
    多类名的具体使用：
        1. <div class="red font20">亚瑟</div>
        注意：
                1.在标签class 属性中写 多个类名
                2.多个类名中间必须用空格分开
                3.这个标签就可以分别具有这些类名的样式

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。
语法：
     #id名 {
        属性1: 属性值1;  
        ...
    } 
    注意：id 属性只能在每个 HTML 文档中出现一次

通配符选择器

语法：
    * {
        属性1: 属性值1;  
        ...
    }
通配符选择器不需要调用， 自动就给所有的元素使用样式
特殊情况才使用，后面讲解使用场景(以下是清除所有的元素标签的内外边距,后期讲)
 * {
        margin: 0;
        padding: 0;
    }

css属性

字体系列

font-family

选择器{
	font-family:  'Microsoft Yahei'
}

字体粗细

font-weight

选择器 {  
        font-weight: bold; 
    }
    
    normai：正常
    bold：  加粗
    100-900
    200=细体；400=normal；700=bold加粗
    后面不加单位

字体样式

font-style

选择器 {  
        font-style: normal;
    }
    
    normal：正常、默认值
    italic：斜体

字体font的综合写法

语法：
 font: 字体样式  字体粗细  字体大小/行高 字体家族;
 
 注意：

1. 使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，
2. 并且各个属性间以空格隔开 不需要设置的属性可以省略（取默认值），
3. 但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

css文本属性

文本颜色

color

选择器 { 
        color: red;
    }
    
    表示方式
    1、英文：red；blue；yellow
    2、十六进制：#00ff00；#000000
    3、rgb代码：rgb（000，000，000）

背景颜色

background-color:#(16进制)
                 rgb（000，000，000）
                 英文：blue，red，yellow

文本对齐

text-align

选择器 { 
        text-align: center;
    }
    
    left（左）；center（居中）；right（右）

文本修饰线

text-decoration

选择器 { 
    text-decoration：underline；
 }
 
 none：默认没有装饰线（通常与超链接的a标签一起使用，去掉a标签自带的下划线）
 underline：下划线
 overline：上划线
 line-through：删除线

文本缩进

text-indent

选择器 { 
        text-indent：20px；
    }
 选择器 { 
        text-indent：2em；
    }
    
 em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。
 1em等于16px=1个中文字符
 
首行缩进2个字符=32px=2em

行间距

line-height

选择器 { 
        line-height: 26px;
    }

CSS复合选择器

后代选择器

.class h3{color:red;font-size:16px;}

- 当标签发生嵌套时，内层标签就成为外层标签的后代。
- 子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。

子元素选择器

.class>h3{color:red;font-size:14px;}

交集选择器

标签选择器class选择器{属性:属性值；属性：属性值}

比如：   p.one   选择的是： 类名为 .one  的 段落标签。  

其中第一个为标签选择器，第二个为class选择器，两个选择器之间**不能有空格**，如h3.special。

并集选择器

类别选择器标记选择器{属性：属性值；属性：属性值}

比如  .one, p , #test {color: #F00;}  
表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。 
通常用于集体声明。

链接伪类选择器

- a:link      /* 未访问的链接 */
- a:visited   /* 已访问的链接 */
- a:hover     /* 鼠标移动到链接上 */
- a:active    /* 选定的链接 */

例如 a：link{ color: red; }

也可以用于别的标签

- 标签:hover     /* 鼠标移动到标签上 */
- 标签:active    /* 选定的标签  */

标签显示模式（display）

块级元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

行内元素
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。有的地方也成内联元素

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

标签显示模式转换

- 块转行内：display:inline;
- 行内转块：display:block;
- 块、行内元素转换为行内块： display: inline-block;

例如：div{display:inline;}

css背景

背景颜色

background-color:颜色值;   默认的值是 transparent  透明的

标签{background-color:颜色值; }

背景图片

background-image : none | url (url) 

background-image : url(图片地址）;

背景平铺

background-repeat : repeat | no-repeat | repeat-x | repeat-y 

                      平铺 |   不平铺   |  横向平铺 |  纵向平铺

背景位置

background-position : length || length

background-position : position || position 


background-position：top \| center \| bottom \| left \| center \| right   方位名词
                      上  |  居中   |    下   |  左    |   居中  |  右
                      
                      
注意：

- 必须先指定background-image属性
- position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
- 如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left  top和top  left效果一致
- 如果只指定了一个方位名词，另一个值默认居中对齐。
- 如果position 后面是精确坐标， 那么第一个，肯定是 x  第二的一定是y
- 如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
- 如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标

背景合写

background: transparent url(image.jpg) repeat-y  scroll center top ;
background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;

背景附着

background-attachment : scroll | fixed 

       背景图像是随对象内容滚动   |  背景图像固定

CSS优先级

概念：

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

* 选择器相同，则执行层叠性
* 选择器不同，就会出现优先级的问题。

 | 标签选择器             | 计算权重公式 |
| ---------------------- | ------------ |
| 继承或者 *              | 0,0,0,0      |
| 每个元素（标签选择器）    | 0,0,0,1      |
| 每个类，伪类             | 0,0,1,0      |
| 每个ID                  | 0,1,0,0      |
| 每个行内样式 style=""    | 1,0,0,0      |
| 每个!important  重要的   | ∞ 无穷大     |

 继承的权重是0

盒子模型（Box Model）

- 盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。
- 盒子里面的文字和图片等元素是 内容区域
- 盒子的厚度 我们成为 盒子的边框 
- 盒子内容与边框的距离是内边距（类似单元格的 cellpadding)
- 盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）

盒子边框（border）

border : border-width   ||   border-style   ||   border-color 
   定义边框粗细，单位是px  ||  边框的样式      ||   边框颜色
   
   边框的样式：

- none：没有边框即忽略所有边框的宽度（默认值）
- solid：边框为单实线(最为常用的)
- dashed：边框为虚线  
- dotted：边框为点线

上边框：border-top:宽度 样式 颜色;
下边框：border-bottom:宽度 样式 颜色;
左边框：border-left:宽度 样式 颜色;
右边框：border-right:宽度 样式 颜色;

例子：border: 1px solid red;

表格的细线边框

border-collapse:collapse; 表示相邻边框合并在一起。

内边距

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

当我们给盒子指定padding值之后， 发生了2件事情：

1. 内容和边框 有了距离，添加了内边距。
2. 盒子会变大了。

| 值的个数 | 表达意思                                        |
| -------- | ----------------------------------------------- |
| 1个值    | padding：上下左右内边距;                        |
| 2个值    | padding: 上下内边距    左右内边距 ；            |
| 3个值    | padding：上内边距   左右内边距   下内边距；     |
| 4个值    | padding: 上内边距 右内边距 下内边距 左内边距 ； |

内盒实际大小

盒子的实际的大小 =   内容的宽度和高度 +  内边距   +  边框

外边距

margin-left      左外边距
margin-right     右外边距
margin-top       上外边距
margin-bottom    下外边距

块级盒子水平居中

可以让一个块级盒子实现水平居中必须：

- 盒子必须指定了宽度（width）
- 然后就给**左右的外边距都设置为auto**，

常见的写法，以下下三种都可以。

- margin-left: auto;   margin-right: auto;
- margin: auto;
- margin: 0 auto;

文字居中和元素居中的区别

text-align: center; /*  文字 行内元素 行内块元素水平居中 */
margin: 10px auto;  /* 块级盒子水平居中  左右margin 改为 auto 就阔以了 上下margin都可以 */

清除元素的内外边距

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

外边距塌陷

- 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom
- 下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和
- **取两个值中的较大者**这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

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

塌陷

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

- 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
- 父元素的上外边距会与子元素的上外边距发生合并
- 合并后的外边距为两者中的较大者

**解决方案：**

1. 可以为父元素定义上边框。
2. 可以为父元素定义上内边距
3. 可以为父元素添加overflow:hidden。

去掉列表的默认样式

li { list-style: none; }

边框圆角

选择器{
	border-radius：左上，右上，右下，左下
}

对半数值就等于正圆

盒子阴影

选择器{
	box-shadow：水平位移 垂直位移 模糊程度 阴影大小 颜色
}

文字阴影

选择器{
	text-shadow：水平位移 垂直位移 模糊程度 颜色
}

浮动 float

选择器 { float: 属性值; }

none：元素不浮动（**默认值**）
left：元素向**左**浮动
right：元素向**右**浮动

我们使用浮动的核心目的——让多个块级盒子在同一行显示。 因为这是我们最常见的一种布局方式

过渡

选择器{
		transition:发生过渡的属性  过渡所需要的时间
}

all 所有属性

缩放

选择器{
	transform：scale(缩放值)
}

overflow：hiddent （溢出部分元素隐藏）

清除浮动

方法一：额外标签法(隔墙法)

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签
例如 
<div style=”clear:both”></div>，或则其他标签br等亦可。

方法二：父级添加overflow属性方法

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

方法三：使用after伪元素清除浮动

 .clearfix（专属的类名） ::after {  
  				content: ""; 
  				display: block; 
  				height: 0; 
  				clear: both; 
  				visibility: hidden;  
  				}   

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */

方法四：使用双伪元素清除浮动

.clearfix::before,.clearfix::after { 
  content:"";
  display:table; 
}
.clearfix::after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

清除浮动总结

| 清除浮动的方式       | 优点               | 缺点                               |
| -------------------- | :----------------- | :--------------------------------- |
| 额外标签法（隔墙法） | 通俗易懂，书写方便 | 添加许多无意义的标签，结构化较差。 |
| 父级overflow:hidden; | 书写简单           | 溢出隐藏                           |
| 父级after伪元素      | 结构语义化正确     | 由于IE6-7不支持:after，兼容性问题  |
| 父级双伪元素         | 结构语义化正确     | 由于IE6-7不支持:after，兼容性问题  |

定位

定位模式

选择器 { 
    position: 属性值; 
}
	 
	 position: 具体的定位方式；
	 left: 20px
     righ：20px
	 top： 20px
 	 bottom: 20px

静态定位（static）

   ☞ 语法：
	   position: static;

   ☞ 特点：
	   1. 元素的默认显示方式就是静态定位【静态定位的元素就是标准流的默认显示方式】
	   2. 静态定位无法改变元素位置

相对定位（relative）

  ☞ 语法：
	  position:relative;
	  left | right | top | bottom: 值;

  ☞特点：
	  1. 可以改变元素位置	
	  2. 相对定位的元素与父元素是否是定位的元素无关
	  3. 相对定位的元素是相对元素自己原来的位置
	  4. 相对定位的元素没有脱标


 ☞相对定位使用场景：
	  ✔ 一般情况下，只要子元素设置了绝对定位后，父元素就要设置相对定位【子绝父相】
		   1. 因为给父元素设置了相对定位后，绝对定位的子元素会以父元素为参照
		   2. 父元素是相对定位的时候，父元素没有脱标，父元素占位置
		   3. 子元素设置了绝对定位，父元素就设置相对定位

绝对定位(absolute)

  ☞ 语法：
	  position: absolute;
	  left | right | top | bottom: 值;

   ☞ 特点：
	    1. 可以通过绝对定位改变元素位置
	    2. 如果一个元素设置了绝对定位，默认会以body【浏览器】左上角为参照进行位置改变
	    3. 如果一个子元素是绝对定位，如果其父元素设置了除静态定位以外的其他定位，那么该绝对定位的子元素就会参照父元素左上角进行位置改变。
  	    4. 绝对定位可以让元素脱标不占位置

   ☞使用场景：
		 ✔ 在网页布局中（结构中），如果我们发现有一个标签（盒子） 压着 另外一个标签（盒子）。 我们需要用到绝对定位

完全脱标 —— 完全不占位置；
父元素没有定位，则以浏览器为准定位（Document 文档）。

定位的应用1一子绝父相

因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。

①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

②父盒子需要加定位限制子盒子在父盒子内显示。

③父盒子布局时，需要占有位置，因此父亲只能是相对定位。

定位的应用3-居中

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

固定定位（fixed）

   ☞ 语法：
	  position: fixed;
	  left | right | top | bottom: 值;

    ☞ 特点：
	     1. 可以改变元素位置
	     2. 固定定位的元素始终都是以body（浏览器）左上角为参照设置位置。
	     3. 固定定位的元素也是脱标不占位置的元素

    ☞ 使用场景：
		  1. 网页中的广告

定位层级关系

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

元素的显示与隐藏

display 显示

display : none
		隐藏对象 ， 隐藏之后，不再保留位置。
		
display:block 
		 除了转换为块级元素之外，同时还有显示元素的意思。

visibility 可见性

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

visible : 　对象可视

hidden : 　对象隐藏

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


visibility：visible
			对象可视
			
visibility：hidden
			对象隐藏

overflow 溢出

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

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

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

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

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


overflow：hidden
			溢出部分隐藏

CSS用户界面样式

鼠标样式

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

<ul>
  <li style="cursor:default">我是小白</li>
  <li style="cursor:pointer">我是小手</li>
  <li style="cursor:move">我是移动</li>
  <li style="cursor:text">我是文本</li>
  <li style="cursor:not-allowed">我是文本</li>
</ul>

轮廓 outline

 outline : outline-color ||outline-style || outline-width 
 
 
 直接常用写法是去掉轮廓
 最直接的写法是 ：  outline: 0;   或者  outline: none;
  <input  type="text"  style="outline: 0;"/>

防止拖拽文本域resize

resize：none    这个单词可以防止 火狐 谷歌等浏览器随意的拖动 文本域。

<textarea  style="resize: none;"></textarea>

vertical-align 垂直对齐

vertical-align : baseline      基线对齐（默认图片和文字基线对齐）
			    top 		 顶部对齐（默认图片和文字基线对齐）
			    middle 		 垂直居中（默认图片和文字基线对齐）
			    bottom 		 底部对齐（默认图片和文字基线对齐）
			    
			    
vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， **通常用来控制图片/表单与文字的对齐**。

去除图片底侧空白缝隙

方法一：
		给父元素设置font-size：0；
		
方法二：给img 设置一个
	  vertical-align:middle | top等等。  让图片不要和基线对齐。
	  
方法三：给img 添加 display：block; 转换为块级元素就不会存在问题了。

溢出的文字隐藏

三步走：

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


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

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


text-overflow : clip | ellipsis

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

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

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

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

多行文本溢出（了解）

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

精灵图

精灵技术本质

简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。

**总结： **

就是多个背景小图片集合到一张图片上，作为背景

精灵图步骤

1. 量出要展示的图标的大小，作为盒子的宽高值（确定宽高）

2. 通过background-image给盒子引入这张大图中（精灵图）（引入精灵图）

3. 量出要展示的图标的左上角的坐标位置，把位置值设置到background-position中，进行移动，把图标展示在盒子中
（移动位置）

* 其中最关键的是使用background-position属性精确地定位。

三角形的制作

等腰三角形

 div {
 	width: 0; 
    height: 0;
    border: 50px solid transparent;（四个边框颜色改为透明）
	border-bottom: 50px solid blue;（显示一条边的颜色）
	为了兼容浏览器加上
	line-height:0;
    font-size: 0;
 }

直角三角形

		.box{
            height: 0;
            width: 0;
            border-bottom: 50px solid transparent;（显示两条边，一条边为透明）
            border-left: 150px solid green;（另一条边显示颜色）
        }

两个直角三角形

        .box{
            height: 0;
            width: 0;
            （显示三条边框，一条边框为透明，另外两条相邻的边框显示颜色）
            border-top: 300px solid transparent;
            border-left: 150px solid green;
            border-right: 150px solid green;
        }

清除默认样式的基本

清除通用样式（内外边距）
        *{
            margin: 0;
            padding: 0;
        }
清除列表样式（前面的小黑点）
        li{
            list-style: none;
        }
清除a标签的下划线
        a{
            text-decoration: none；
        }

结构伪类选择器

child系列

选择器	例子	例子描述
:first-child	p:first-child	选择属于父元素的第一个子元素的每个元素。
:last-child	p:last-child	选择属于其父元素最后一个子元素每个元素。
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个元素。
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。

先把位置找到，然后再找元素

表达式

2n+6：从前往后数，第6个开始，隔2n选择

-n+5：从前往后数，第6个开始，往回走，隔n个选择（-表示往回数）

关键词

(odd奇数、even偶数)

nth-of-type系列

选择器	例子	例子描述
:first-of-type	p:first-of-type	选择属于其父元素的首个元素的每个元素。
:last-of-type	p:last-of-type	选择属于其父元素的最后元素的每个元素。
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个元素的每个元素。
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。

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

盒子模型

内减模型

*{
 	box-sizing: border-box; 
}

实现宽高就固定了，content会随着三个值的改变而改变

盒子宽度 – calc 函数

width: calc(100% - 80px);

括号里面可以使用 + - *  / 来进行计算，也可以进行多次运算。

注意：运算符号两边需要输入空格

双飞翼布局

（左右两侧宽度固定，中间内容随着页面缩放）

背景

背景尺寸

background-size:水平 垂直；

可以用px 也可以用%

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

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


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

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

背景图片的定位区域

background-origin: padding-box           背景图像相对于内边距框来定位。
				 border-box            背景图像相对于边框盒来定位。
				 content-box;         背景图像相对于内容框来定位。

背景裁减区域

background-clip: border-box         背景被裁剪到边框盒。
			    padding-box        背景被裁剪到内边距框。
			    content-box;       背景被裁剪到内容框。

扩大某个具有精灵图的按钮的响应区域

            /* 步骤 ：
                需求: a标签的可响应区域变大
                1. 给a加宽高
                2. 引入图片，调整位置
                3. 设置padding 让背景图片到内容区域
                box-sizing: border-box;
                padding:
                4. 多余部分裁剪 
                background-origin(源头): content-box;
                background-clip（裁剪）: content-box;

多重背景

background: url(ldh.jpg) no-repeat,url(site-logo.png)  repeat-x right bottom;

**注意：**多背景图的一个展示关系是： 先引入的背景图会压住后引入的背景图

背景渐变

background:linear-gradient(起始位置,开始的颜色,结束的颜色)


总结：如果想兼容其他浏览器尽量在

background:-webkit-linear-gradient(起始位置,开始的颜色,结束的颜色)

background:-moz-linear-gradient(起始位置,开始的颜色,结束的颜色)


渐变还可以加多个

格式background:linear-gradient(起始位置,第一个颜色 0%,第二个颜色 50%，第三个颜色 100%...);

径向渐变和线性渐变

background:radial-gradient(起始位置,开始的颜色,结束的颜色)

background-image: radial-gradient(【参数定义了形状】 size at position, start-color, ..., last-color);

值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。

注意: 渐变相当于设置的是背景图

边框图片

border-image:source（路径） slice（图片边框向内偏移） repeat（是否应平铺）;

上右下左

合写：（不带单位px）
例子：border-image:url(/i/border.png) 30 30 round;

repeat：1~2个关键字，用于设置图片在水平方向和竖直方向的重复方式。取值有以下四种：
    stretch：默认值，将图片进行拉伸以填充边框的长
    repeat：沿边框长平铺图片
    round：沿着边框的长整数次的平铺图片（元素可能被自动调整大小以适应该要求）
    space：沿着边框的长整数次的平铺图片（如果图片不能填满元素，则使用空白填充）

HTML5新标签与CSS3新样式

常用新标签

<header> 语义 :定义页面的头部  页眉</header>
<nav>  语义 :定义导航栏 </nav> 
<section> 语义： 定义区域</section>
<article> 语义:  定义文章</article>
<aside> 语义： 定义其所处内容之外的内容 侧边</aside>
<footer> 语义: 定义 页面底部 页脚</footer>

常用属性

属性	用法	含义
placeholder	`<input type="text" placeholder="请输入用户名">`	占位符当用户输入的时候里面的文字消失删除所有文字，自动返回
autofocus	`<input type="text" autofocus>`	规定当页面加载时 input 元素应该自动获得焦点
required	`<input type="text" required>`	必填项内容不能为空

新增的input type属性值：

类型	使用示例	含义
email	`<input type="email">`	输入邮箱格式
tel	`<input type="tel">`	输入手机号码格式
url	`<input type="url">`	输入url格式
number	`<input type="number">`	输入数字格式
search	`<input type="search">`	搜索框（体现语义化）
range	`<input type="range">`	自由拖动滑块
time	`<input type="time">`	小时分钟
date	`<input type="date">`	年月日
datetime	`<input type="datetime">`	时间
month	`<input type="month">`	月年
week	`<input type="week">`	星期年

多媒体标签

audio：播放音频

autoplay 自动播放（谷歌浏览器不支持）

controls 是否显不默认播放控件

loop 循环播放 loop = 2 就是循环2次 loop 或者 loop = “-1” 无限循环

video：播放视频

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

controls 是否显示默认播放控件

loop 循环播放

width 设置播放窗口宽度

height 设置播放窗口的高度

poster：视频的第一帧画面

过渡

1. `transition-property`  要执行过渡的属性名

   如width，height `transition-property: width;` 写`all`代表全部

2. `transition-duration`  执行过渡的持续的时间

   设置过渡的持续时间 如 `transition-duration:10s`

3. `transition-timing-function` 速度曲线 (可省略)

   设置变化的速度曲线 如匀速等

   - linear： 匀速

   - ease： 慢-快-慢 默认值

   - ease-in： 慢-快。

   - ease-out： 快-慢。

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

   - 贝塞尔曲线（了解）

   - steps 设置 跳跃性的动画 （了解）

     steps (n)  过渡分成n段

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

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

4. `transition-delay` 延迟时间 （可省略）

   设置产生过渡时的延迟时间 如 `transition-delay: 10s;`

合写

 /* 过渡的属性为width 持续3s 匀速 延迟0s */
   transition: width 3s linear 0s;

多个过渡写法

可以同时对一个元素的多个属性添加过渡 对宽度和高度设置不同的过渡

  transition: 
        width 1s ease-in 1s,
        height 10s ease-in-out 2s;

2D转换（变换）transform

2d移动 translate

  div{
    transform: translate(50px,50px);
  }
  
  属性值为 `translate(x,y)`  如  `transform:translate(50px,50px)`;
  
  
  **小结**

1. **translate**中的百分比单位是相对于自身元素的  `translate:(50%,50%);`
2. **translate**类似定位，不会影响到其他元素的位置
3. 对行内标签没有效果

2d旋转 rotate

div{
      transform: rotate(0deg);
}


1. 给元素添加转换属性 `transform`
2. 属性值为 `rotate(角度)`  如 `transform:rotate(30deg)`  顺时针方向旋转**30度**

观察过后，2d旋转有以下特点

1. 角度为正时 顺时针 负时 为逆时针
2. 默认旋转的中心点是元素的中心点

转换中心 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%;

2d缩放 scale

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

1. 给元素添加转换属性 `transform`
2. 转换的属性值为 `scale(宽的倍数,高的倍数)`    如 宽变为两倍，高变为3倍 `transform:scale(2,3)`

1. transform:scale(1,1) 放大一倍 相对于没有放大
2. transform:scale(2,2) 宽和高都放大了2倍
3. transform:scale(2)  只写一个参数 第二个参数则和第一个参数一样 相当于 scale(2,2)
4. transform:scale(0.5,0.5)  缩小 
5. transform:scale(-2,-2) 反向放大2倍    很少用负数 容易让人产生误解

3D转换（变换）

3D坐标轴

x轴 水平向右
y轴 垂直向下
z轴垂直屏幕由屏幕里面指向屏幕的外面

3d移动 translate3d

1. transform:**translate3d**(x,y,z)  其中 **x y z** 分别指要移动的轴的方向的距离
2. translform:**translateX**(100px)  仅仅是移动在x轴上移动
3. translform:**translateY**(100px)  仅仅是移动在Y轴上移动
4. translform:**translateZ**(100px)  仅仅是移动在Z轴上移动

视距 perspective

   给父元素一个视距
   
   /* 父元素 */
    body {
      /* 视距 */
      perspective: 1000px;
    }

    /* 目标 */
    div {
      width: 200px;
      height: 200px;
      background-color: aqua;
      margin: 100px auto;
      /* z轴的移动 */
      transform: translateZ(0px);
    }
    
    
    远大近小的 效果时 ，是相对于物体和坐标轴原点而言。
    translateZ的值和perspertive都要大于0 否则容易出现兼容性问题

3d旋转 rotate3d

    /* 沿着x轴正方向旋转90度 deg为单位 */
      transform: rotateX(90deg);
      
      
1. `transform:rotateX(45deg);` 沿着x轴正方向旋转 45度
2. `transform:rotateY(45deg)` 沿着y轴正方向旋转 45deg
3. `transform:rotateZ(45deg)` 沿着Z轴正方向旋转 45deg
4. `transform:rotate3d(x,y,z,deg)` 沿着自定义轴旋转 deg为角度  了解即可

3D缩放 scale3d

1. `transform: scale3d(1 ,1,2);`  宽，高 缩放一倍，厚度放大两倍
2. `transform: scaleX(1)` 只缩放宽
3. `transform: scaleY(1)` 只缩放高
4. `transform: scaleZ(1)` 只缩放厚

视距原点 perspective-origin

1. 视距原点和视距一样，也是设置给要观察元素的**父元素**上
2. perspective-origin:center center; 默认值是**元素的中心点**
3. perspective-origin:10px；  指定了一个参数的时候，第二个参数默认为center 也就是50%；
4. perspective-origin:10% %； 百分比都是相对于自身的宽度和高度

转换样式 transform-style

-  `transform-style: flat;`  平面模式  -  不开启3维立体环境
-  `transform-style: preserve-3d;`  3维立体环境

3D转换总结

百分比单位都是相对于自身
视距、视距原点、转换样式这三个属性都是给父元素添加的

动画 animation

步骤：
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;（持续时间以及持续状态）
    }

持续时间

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

速度曲线

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

- linear： 匀速

- ease： 慢-快-慢  默认值

- ease-in： 慢-快。

- ease-out： 快-慢。

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

- steps 设置 跳跃性的动画 

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

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

延迟时间

`animation-delay: 0s;`

循环次数

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

循环方向

`animation-direction`

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

1. **normal**  默认值  **红 -> 黑**
2. **reverse** 反向运行    **黑 -> 红**
3. **alternate**  正-反-正...  **红 -> 黑 -> 红...**  
4. **alternate-reverse**  反-正-反..   **黑 -> 红 -> 黑 ...** 
5. 以上与循环次数有关

动画等待或者结束的状态

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

- **forwards**：动画结束后，元素样式停留在 100% 的样式
- **backwards**： 在延迟等待的时间内，元素样式停留在 0% 的样式
- **both**： 同时设置了 forwards和backwards两个属性值

暂停和播放

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

`running` 播放   `paused` 暂停

复合写法

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

动画：动画名 持续时间（必填） 速度曲线 延迟时间 循环次数 循环方向 动画等待或者结束状态 （其余的顺序可以不定）

多个动画写法

用逗号分隔

pc端web项目

响应式布局

可以做一套网站让pc和手机通吃。

核心：通过获取屏幕的分辨率来改变css的大小（媒体查询）

百分比布局

百分比布局又叫流式布局，也称为非固定像素布局

+ min-width  设置元素的最小宽度, 如果元素的宽度比这个值小，强制按照这个值显示

+ min-height  设置元素的最小高度

+ max-width  设置元素的最大宽度,如果元素的宽度比这个值还大，强制按照这个值显示

+ max-height   设置元素的最大高度

字体图标

阿里iconfont 字体图标

链接：http://www.iconfont.cn/

展示方法

方法一：

把下载字体图标的相关文件拷贝到fonts文件夹中（行业常规习惯）

在页面中引入fonts文件夹中的iconfont.css
<link rel="stylesheet" href="./fonts/iconfont.css">

在下载的字体文件中的demo_index.html中挑选相应的图标，
拷贝他的类名，设置到页面展示图标的标签上

方法二：（线上）
在自己的字体图标项目库中，复制在线的字体图标链接地址
使用线上的地址，在复制的地址前面加上http:

媒体查询

`@media screen and (width:xxx)`
只有当屏幕的宽度满足 **width:值** 条件时，才会去加载里面的css代码

- width-宽度

- min-width 最少宽度

- max-width 最大宽度

- height 高度

- min-height 最少高度

- max-height 最大高度

横屏和竖屏

(orientation:landscape)  横屏

(orientation:portrait)  竖屏

媒体类型

- all 匹配所有的媒体类型 默认值
- screen 匹配 计算机显示器
- print 匹配打印机设备

媒体关键字

- not 取反
- only  实现更好的兼容（使用较多）
- and 连接（使用较多）
- or 或者 (使用`，`表示)

媒体查询引入方式

一：
在style标签里或者在css文件里写媒体查询

二：
在style标签上通过属性的方式写媒体查询

三：
在link标签写媒体查询，根据不同的窗口大小，执行不同的css文件
<link rel="stylesheet" media="screen and (width:800px)"  href="./base.css">

less 基础

less变量

//变量的定义  @变量名:值;
@base-color: pink;

+ 必须有@为前缀
+ 不能包含特殊字符
+ 不能以数字开头
+ 大小写敏感

less嵌套

// css写法
#header .logo {
  width: 300px;
}
// 将css改为less
#header {
    .logo {
       width: 300px;
    }
}



// css写法
a:hover{
    color:red;
}
// less写法
// 如果遇见 （交集|伪类|伪元素选择器） ，利用&进行连接
a{
  &:hover{
      color:red;
  }
}

less运算

任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。

必须要有一个单位，同事前面的数决定单位。

移动web项目

在 Web 开发中可以使用 px（像素）、em、rem、pt（点）、in（英寸）、cm（厘米）做为长度单位，我们最常用 px（像素）做为长度单位。

像素密度( PPI )

像素密度PPI ：就是屏幕每英寸的像素数量

相同尺寸下，PPI值越大，越清晰。

物理像素

物理像素，顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了。

物理像素只能获取不能修改

物理像素大小不是固定的，它与PPI 是有关系。例如：PPI越大，物理像素越小。

css像素(又叫设备像素，设备宽度)

CSS像素是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。一般情况之下，CSS像素称为与设备无关的像素(device-independent pixel)，简称DIPs。

1.PC 端的css像素默认和物理像素保持一致的（1 个单位的 CSS 像素等于 1 个单位的物理像素）

2.iPhone3G的css像素默认和物理像素保持一致（1 个单位的 CSS 像素等于1 个单位的物理像素）

3.iPhone4/5/6的css像素默认和物理像素不一致（1 个单位的 CSS 像素等于2 个单位的物理像素）

4.iPhonex/6/7/8plus的css像素默认和物理像素不一致（1 个单位的 CSS 像素等于3 个单位的物理像素）

二倍图

为保证在移动端能够高清的显示图片，我们拿到的素材是比展示效果要大一倍的图片，大白话的理解就是，小图放大有可能失真，但是大图缩小不会失真。

视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。

视觉视口：用户正在看到的网站的区域。注意：是网站的区域。

理想窗口：为了使网站在移动端有最理想的浏览和阅读宽度而设定；理想视口，对设备来讲，是最理想的视口尺寸。

我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口**

meta标签

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

最标准的viewport设置

视口宽度和设备保持一致
视口的默认缩放比例1.0
最大允许的缩放比例1.0
最小允许的缩放比例1.0
不允许用户自行缩放

移动端浏览器兼容问题

浏览器前缀

Chrome(谷歌浏览器) ：WebKit内核     -webkit-
Safari(苹果浏览器) ：WebKit内核        -webkit-
Firefox(火狐浏览器) ：Gecko内核         -moz-
IE(IE浏览器) ：          Trident内核        -ms-
Opera(欧朋浏览器) ：Presto内核          -o-

移动端常见布局

flex布局

又叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局。

display:flex；

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

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

父项常见属性【掌握】

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

+ flex-direction：设置主轴的方向
+ justify-content：设置主轴上的子元素排列方式
+ flex-wrap：设置子元素是否换行  
+ align-content：设置侧轴上的子元素的排列方式（多行）
+ align-items：设置侧轴上的子元素排列方式（单行）
+ flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

设置主轴方向

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

设置是否换行

flex-wrap   设置是否换行

| flex-wrap可设置的值  | 意义   |
| ------------------- | ------ |
| nowrap              | 不换行 |
| wrap                | 换行   |

合写

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性
flex-flow:row wrap;

设置主轴上的子元素排列方式

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

| justify-content可设置的值  | 意义                                                      |
| ------------------------- | --------------------------------------------------------- |
| flex-start                | （默认值）从头部开始排列（如主轴是x轴，则从左往右）       |
| flex-end                  | 从尾部开始排列（如果主轴是x轴，则从右往左）               |
| **center**                | 让子元素在主轴中居中显示                                  |
| **space-around**          | 让子元素等均分配剩余空间（类似设置了相等的左右magin效果） |
| **space-between**         | 让子元素先两边贴边，再平分剩余空间                        |

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

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

| align-items可设置的值  | 意义               |
| --------------------- | ------------------ |
| stretch               | （默认值）拉伸     |
| flex-start            | 从侧轴头部开始排列 |
| flex-end              | 从侧轴尾部开始     |
| **center**            | 居中显示           |

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

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

| align-content可设置的值  | 意义                                             |
| ----------------------- | ------------------------------------------------ |
| stretch                 | （默认值）拉伸（设置子项元素高度平分父元素高度） |
| flex-start              | 从侧轴头部开始排列                               |
| flex-end                | 从侧轴尾部开始                                   |
| **center**              | 在侧轴中间显示                                   |
| **space-around**        | 让子元素在侧轴平分剩余空间                       |
| **space-between**       | 让子元素在侧轴先分布在两头，再平分剩余空间       |

flex布局子项常见属性

flex子项目占的份数

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

.item {
    flex: <number>; /* 默认值 0 */
}

单个子项的对齐方式

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

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

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

定义项目的排列顺序

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

.item {
    order: <number>;
}

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

vw vh 布局

（相对单位相对于屏幕宽度）

css单位长度值

| 单位    | 含义                                                 |
| ------- | ---------------------------------------------------- |
| **em**  | 相对于父元素（或自身元素）的字体大小                 |
| **rem** | 相对于根元素（html）字体大小                         |
| **vw**  | 相对于视窗的宽度：视窗宽度是100vw                    |
| **vh**  | 相对于视窗的高度：视窗高度是100vh                    |
| px      | 像素                                                 |
| %       | 相对于父元素。正常情况下是通过属性定义自身或其他元素 |