首页  思维导图  详情

1.HTML+CSS+移动web

2022-07-25 10:33:11   0  举报





AI智能生成

前端知识总结，全面

HTML5

HTML5特性

HTML知识点

前端

web

作者其他创作

大纲/内容

HTML
超文本标记语言

HTML知识点

网页的组成：
网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成

标签

标签关系可分为包含关系和并列关系

标题标签<h1>--<h6>

段落标签<p></p>

换行标签br，是个单标签

文本格式化标签

strong加粗

em倾斜

del删除线

ins下划线

图片标签img

alt属性：图像不能显示的时候，的替换文本

title属性：鼠标放上去会提示该文字

a链接

href属性：用于指定目标的url地址，如果链接地址中是个文件或者压缩包就会下载

target属性：用于指定链接页面的打开方式_sefl默认值，_blank在新窗口打开

锚点链接：在href中设置属性为对应地方的标签Id类名

各种实体符号

&nbsp 空格

< &lt

等等，需要的时候网上查找

路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径

绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径

表格：一般用来显示数据

语法：<table> //用于定义表格
            <tr> //标签用于定义表格中的行，必须嵌套在 <table> </table>标签中
《th》《th》表头
                <td>单元格内的文字</td>  于定义表格中的单元格，必须嵌套在<tr></tr>标签中
                ...
            </tr>
            ...
        </table>

在表格标签中，分别用：<thead>标签表格的头部区域、<tbody>标签表格的主体区域.

合并单元格

跨行合并：rowspan="合并单元格的个数"
最上侧单元格为目标单元格, 写合并代码

**跨列合并**：colspan="合并单元格的个数"
最左侧单元格为目标单元格, 写合并代码

列表：主要用来布局

无序列表：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>

各个列表项之间没有顺序级别之分，是并列的

有序列表：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>

各个列表项之间有一定顺序排列

自定义列表
<dl>
<dt>列表项1</dt>
<dd>列表项2</dd>
</dl>

dt字体大于dd，其他关系并列

表单：
使用表单的目的是为了收集用户信息

一个完整的表单通常有表单域、表单控件、和提示信息3个部分构成

表单域：是包含表单元素的区域
<form> 标签用于定义表单域，
以实现用户信息的收集和传递。
会把它范围内的表单元素信息提交给服务器.

<form action=“url地址” method=“提交方式（取值为get或者post）”
name=“表单域名称用于区分页面内的多个表单域">
各种表单元素控件
</form>

表单控件或者说是表单元素

input表单

type属性：值不同，表现形式不同

name属性：定义表单元素名称

value属性：规定input元素的值

checked：规定此元素首次加载时应当被选中

maxlength：规定输入字段的字符最大长度

<label> 标签

<label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时，
浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.
语法：
     <label for="sex">男</label>
    <input type="radio" name="sex"  id="sex" />
    核心： <label> 标签的 for 属性应当与相关元素的 id 属性相同。

<select>下拉框

语法：
<select>
   <option>选项1</option>
   <option>选项2</option>
   <option>选项3</option>
   ...
</select>

<textarea>文本域
当用户输入内容较多的情况下使用

语法：
<textarea rows="3" cols="20">
文本内容 </textarea>

HTML5新特性

语义化标签

多媒体标签

视频标签

音频标签

新增表单元素

新增表单元素属性

CSS
层叠样式表

CSS知识点

CSS引入方式

行内样式

内部样式（嵌入式）

引入外部样式
<link rel="stylesheet" href="css文件路径">

元素的显示模式

块元素

常见块元素<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

- 比较霸道，自己独占一行。
- 高度，宽度、外边距以及内边距都可以控制。
- 宽度默认是容器（父级宽度）的100%。
- 是一个容器及盒子，里面可以放行内或者块级元素。

文字类的元素不能放块级元素

行内元素
（有的也叫内联元素）

常见行内元素：<a>、<strong>、<b>、<em>、
<i>、<del>、<s>、<ins>、<u>、<span>

- 相邻行内元素在一行上，一行可以显示多个。
- 高、宽直接设置是无效的。(能设置左右内外边距，上下不能设置)
- 默认宽度就是它本身内容的宽度。
- 行内元素只能容纳文本或其他行内元素。

行内块元素

同时具有块元素和行内元素的特点。有些资料称它们为行内块元素

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

行内块元素的巧妙运用

页码在页面中间显示:

1. 把这些链接盒子转换为行内块，之后给父级指定 text-align:center;
2. 利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中

元素显示模式转换
一个模式的元素需要另外一种模式的特性
比如想要增加链接 <a> 的触发范围。

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

css选择器

css基础选择器：
根据不同的需求把不同的标签选中出来

标签选择器
如：p {
color：red；
}

类选择器
语法：.类名 {
}

id选择器
#id名 {
            属性1: 属性值1;
            ...
        }

具有唯一性

通配符选择器
* {
            属性1: 属性值1;
            ...
        }

无需调用，自动给所以元素使用样式

css复合选择器：
复合选择器是由两个或多个基础选择器，
通过不同的方式组合而成的，
可以更准确、更高效的选择目标元素（标签）

后代选择器

元素1 元素2 { }
最终选择的是元素2
元素1，和元素2可以是任意基础选择器

子选择器
只能选择作为某元素的最近一级子元素

元素1>元素2 { }
语法表示选择元素1 里面的所有直接后代(子元素) 元素2
元素2 必须是亲儿子，其孙子、重孙之类都不归他管.
也可以叫他亲儿子选择器

并集选择器
并集选择器可以选择多组标签, 同时为他们定义相同的样式，
通常用于集体声明

元素1，元素2 { }

伪类选择器：
伪类选择器用于向某些选择器添加特殊的效果，
比如给链接添加特殊效果，或选择第1个，第n个元素。

伪类选择器书写最大的特点是用冒号（:）表示，
比如 :hover 、 :first-child 。

链接伪类选择器（使用多个的时候，需要按照顺序来书写）
a:link 没有点击过的(访问过的)链接
  a:visited 点击过的(访问过的)链接
  a:hover 鼠标经过的那个链接
  a:active 鼠标正在按下还没有弹起鼠标的那个链接

:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况 <input> 类表单元素才能获取

input:focus {
这个是表单较为常用的
}

CSS三大特性

层叠性：
主要解决样式冲突的问题

相同选择器给元素设置相同的样式
一个样式就会覆盖另一个冲突样式

层叠性原则:
- 样式冲突，遵循的原则是就近原则，
哪个样式离结构近，就执行哪个样式（后来居上，后面层叠掉前面的）
- 样式不冲突，不会层叠

继承性：子标签会继承父标签的某些样式，
如文本颜色和字号。
恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。

子元素可以继承父元素的样式：
（text-，font-，line-这些元素开头的可以继承，以及color属性）
继承性口诀：龙生龙，凤生凤，老鼠生的孩子会打洞

优先级

当同一个元素指定多个选择器，就会有优先级的产生。
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行

首先，我们给选CSS择器分类：
行内样式 <div style="xxx"></div> ==> 标记a类
ID 选择器 ==> 标记b类
类，属性选择器和伪类选择器 ==> 标记c类
标签选择器、伪元素 ==> 标记d类
在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式 eg.{color: red !important;}
**计数方法：**a/b/c/d类中，出现一类，就给a/b/c/d计一个次数。
a-d从高级到低级，a类的次数高的，其样式权重高，其余bcd类无需再比较；
若a类的次数相同，则比较b类，b类的次数高的，其样式高权重高，其余cd类无需再比较。以此类推到d类。
如下举例：
*{}    //a=0 b=0 c=0 d=0 最弱权重
a:hover{}    //a=0 b=0 c=1 d=1
ul ol{}    //a=0 b=0 c=0 d= 2
ul ol+li{}    //a=0 b=0 c=0 d=3
h1+input[type=hidden]{}    //a=0 b=0 c=1 d=3  [type=hiden]属性选择器
ul ol li.acticce{}    //a=0 b=0 c=1 d=3
#ct .box p    //a=0 b=1 c=1 d=1
div#header :after{}    //a=0 b=1 c=0 d=2  :after伪元素
style=""    //a=1 b=0 c=0 d=0

字体

字体大小：
font-size: 20px;

字体粗细：
font-weight: bold（加粗的）;
normal（默认值），也可用数值表示（100--900）
其中400等同于normal，700等同于bold

字体样式：
font-style: normal（默认值，浏览器会显示标准字体样式）;
italic（浏览器会显示斜体的字体样式）

行间距：line-height 行高的文本分为上间距 +文本高度+下间距=行间距

全文字体声明：font-family;

单行文字垂直居中：让文字行高等于盒子高度，即：line-height：盒子的高度；

行高的上空隙和下空隙把文字挤到中间了，
如果行高小于盒子高度,文字会偏上，
如果行高大于盒子高度,则文字偏下。

文本属性

颜色color
有16进制（开发中较常用）和RGB代码两种表达方式

文本对齐
text-align: center（居中）;
left左对齐
right 右对齐

修饰文本
text-decoration：none（默认，没有装饰线）；
underline 下划线
overline 上划线
line-through删除线

文本缩进text-indent：2em；
em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小,
如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。

CSS背景

背景颜色

background-color ：颜色值；

元素背景颜色的默认值是transparent（透明）
background-color ：transparent；

背景色半透明css3提供

background：rgba（0，0，0，0.3）

- 最后一个参数是 alpha 透明度，取值范围在 0~1之间
- 我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);
**注意**：
- 背景半透明是指盒子背景半透明，盒子里面的内容不受影响
- CSS3 新增属性，是 IE9+ 版本浏览器才支持的，
但是现在实际开发,我们不太关注兼容性写法了,可以放心使用

背景图片

background-image ：none（默认无背景图）|url（）

实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片,
优点是非常便于控制位置. (精灵图也是一种运用场景)
注意：背景图片后面的地址，千万不要忘记加 URL，
同时里面的路径**不要加引号**。

背景平铺

background-repeat 设置元素背景图像的平铺
repeat 背景在纵向和横向上平铺（默认值）
no-repeat 背景图像不平铺
repeat-x 在横向上平铺
repeat-y 在纵向上平铺

背景图片位置

background-position 属性可以改变图片在背景中的位置
background-position：x y；可以使用方位名词或者精确单位

1、参数是方位名词

  如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left  top 和 top  left 效果一致

  如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

2、参数是精确单位

  如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标

  如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

3、参数是混合单位

  如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

背景图片固定

background-attachment：scroll（随对象内容移动）|fixed（固定）
属性设置背景图像是否固定或者随着页面的其余部分滚动。

背景样式合写

background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;
background: red url（） repeat fixed top；

盒子模型
把HTML页面中的元素看做是一个矩形的盒子，
也是一个盛装内容的容器

盒子模型的组成

边框 border
边框会影响盒子实际的大小
一般测量盒子大小的时候不测量边框
或者测量后宽高减去盒子边框宽度

边框粗细，边框样式，边框颜色

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

边框简写：border: 1px solid red;

也可分开写：border-top: 1px solid red;
/* 只设定上边框，其余同理 */

表格细线边框不重合问题解决

1、border-collapse 属性控制浏览器绘制表格边框的方式。
它控制相邻单元格的边框。
2、语法：
```css
border-collapse:collapse;
```
collapse 单词是合并的意思
border-collapse: collapse; 表示相邻边框合并在一起

内边距 padding
边框与内容之间的距离

内边距会影响盒子实际大小

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

1. 内容和边框有了距离，添加了内边距。
2. padding影响了盒子实际大小。

2、内边距对盒子大小的影响：

- 如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
- 如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。

3、解决方案：

如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

外边距 margin
控制盒子和盒子之间的距离

外边距的典型应用
满足条件时可让盒子水平居中

外边距可以让块级盒子水平居中的两个条件：

- 盒子必须指定了宽度（width）。
- 盒子左右的外边距都设置为 auto 。

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

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

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

外边距合并问题

相邻块元素垂直外边距的合并
解决方案：尽量只给一个盒子添加margin的值

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

嵌套块元素垂直外边距的塌陷
解决方案：
- 可以为父元素定义上边框。
- 可以为父元素定义上内边距。
- 可以为父元素添加 overflow:hidden（溢出隐藏的意识）。
也可以使用子绝父相的方法

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，
此时父元素会塌陷为较大的外边距值。

注意：浮动和固定定位，绝对定位的元素。不会发生外边距塌陷问题

清除内外边距
因为在不同浏览器默认的不同，
所以一般在布局之前先清除网页元素的内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

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

  注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了

实际内容

拓展：PS基本操作

快捷键

- 文件→打开：可以打开我们要测量的图片
- Ctrl+R：可以打开标尺，或者视图→标尺
- 右击标尺，把里面的单位改为像素
- Ctrl+ 加号(+)可以放大视图， Ctrl+ 减号(-)可以缩小视图
- 按住空格键，鼠标可以变成小手，拖动 PS 视图
- 用选区拖动可以测量大小
- Ctrl+ D 可以取消选区，或者在旁边空白处点击一下也可以取消选区

切图

图层切图

最简单的切图方式：右击图层 → 导出 → 切片。

切片切图

利用切片工具手动划出

然后导出选中图片：
文件菜单 → 存储为 web 设备所用格式 → 选择我们要的图片格式 → 存储。

切图插件：
Cutterman 是一款运行在 Photoshop 中的插件，能够自动将你需要的图层进行输出，
以替代传统的手工 "导出 web 所用格式" 以及使用切片工具进行挨个切图的繁琐流程。
官网：http://www.cutterman.cn/zh/cutterman
注意：Cutterman 插件要求你的 PS 必须是完整版，
不能是绿色版，所以大家需要安装完整版本。

其他样式
css3新增

圆角边框：birder-radius：圆角的圆的半径；

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

语法：

```css
border-radius:length;
```

- 参数值可以为数值或百分比的形式
- 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
- 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
- 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius
- 兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用

盒子阴影

语法：
box-shadow: h-shadow （必需，水平阴影的位置，允许负数值）
v-shadow （必需，垂直阴影的位置，允许负数值）
blur（可选，模糊距离） spread（可选，阴影尺寸） color（可选，阴影颜色）
inset（可选，将外部阴影改为内部阴影）;

文字阴影

语法：
text-shadow: h-shadow （必需，水平阴影的位置，允许负数值）
v-shadow （必需，垂直阴影的位置，允许负数值）
blur（可选，模糊距离） color（可选，阴影颜色）;

CSS属性书写顺序

建议遵循以下顺序：

1. **布局定位属性**：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2. **自身属性**：width / height / margin / padding / border / background
3. **文本属性**：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4. **其他属性（CSS3）**：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

传统网页布局三种方式

标准流（普通流）
就是标签按照规定好的默认方式进行排列

1. 块级元素会独占一行，从上向下顺序排列。
常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。
常用元素：span、a、i、em 等

浮动
很多效果标准流没有办法完成
浮动可以改变元素默认标签的排列方式
1.浮动可以让多个块级盒子一行没有缝隙排列显示，
经常用于横向排列盒子。

最典型应用：可以让多个块级元素一行内排列显示

网页布局第一准则：**多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动**

float属性用于创建浮动，将其移到一边，直到左边缘或有边缘触及包含块或另一个浮动框的边缘

语法：选择器 { float: none（元素不浮动（默认值））
left（元素向左浮动）
right（元素向右浮动）
; }

浮动的特性

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

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

3、浮动的元素会具有行内块元素的特性
浮动元素的大小根据内容来决定
浮动的盒子中间是没有缝隙的

注意：
浮动的元素是互相贴靠在一起的（不会有缝隙），
如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

浮动布局注意点

浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置, 我们网页布局一般采取的策略是:
先用标准流父元素排列上下位置, 之后内部子元素采取浮动排列左右位置. 符合网页布局第一准侧

1、浮动和标准流的父盒子搭配。
先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

2、一个元素浮动了，理论上其余的兄弟元素也要浮动。
一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，以防止引起问题。
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

清除浮动

为什么要清除浮动

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

1.清除浮动的本质是
清除浮动元素造成的影响：浮动的子标签无法撑开父盒子的高度

注意：
- 如果父盒子本身有高度，则不需要清除浮动
- 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。
- 父级有了高度，就不会影响下面的标准流了

清除浮动样式
语法：
选择器{clear:both;（同时清除左右两侧浮动的影响）}

2、清除浮动策略是?
闭合浮动. 只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子.

清除浮动的多种方式
推荐使用伪元素的方式

1.额外标签法（也称隔墙法）
使用方式：
  额外标签法会在浮动元素末尾添加一个空的标签。
```html
例如 <div style="clear:both"></div>，或者其他标签（如<br />等）。
```
  优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差
  注意：要求这个新的空标签必须是块级元素。

2.可以给父级添加 overflow 属性，
将其属性值设置为 hidden、 auto 或 scroll 。
例如：
```css
overflow:hidden | auto | scroll;
```
优点：代码简洁
缺点：无法显示溢出的部分
注意：是给父元素添加代码

3.父级添加after伪元素
:after 方式是额外标签法的升级版。给父元素添加：
```css
.clearfix:after {
   content: "";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
}
.clearfix {  /* IE6、7 专有 */
   *zoom: 1;
}
```
优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表网站：百度、淘宝网、网易等

4.父级添加双伪元素
给父元素添加
```css
.clearfix:before,.clearfix:after {
   content:"";
   display:table;
}
.clearfix:after {
   clear:both;
}
.clearfix {
    *zoom:1;
}
```
优点：代码更简洁
缺点：照顾低版本浏览器
代表网站：小米、腾讯等

定位
2.定位则是可以让盒子自由的在某个盒子内移动位置
或者固定屏幕中某个位置，并且可以压住其他盒子。

定位也是用来布局的，它有两部分组成：
> **定位 = 定位模式 + 边偏移**
**定位模式** 用于指定一个元素在文档中的定位方式。
**边偏移**则决定了该元素的最终位置。（**边偏移** 就是定位的盒子移动到最终位置。
有 top、bottom、left 和 right 4 个属性）

语法：
在 CSS 中，通过 `position` 属性定义元素的**定位模式**，语法如下：
```css
选择器 {
position: `static**静态**定位 |
| ---------- | :----------: |
| `relative` | **相对**定位 |
| `absolute` | **绝对**定位 |
| `fixed` | **固定**定位 | ;
}
```
定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。

静态定位

无定位的意思，没有边偏移，相当于border里面的none

相对定位：（没有脱标）
是元素在移动位置的时候，
是相对于它自己**原来的位置**来说的

相对定位的特点：（务必记住）
- 1.它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
- 2.**原来**在标准流的**位置**继续占有，后面的盒子仍然以标准流的方式对待它。
因此，**相对定位并没有脱标**。它最典型的应用是给绝对定位当爹的。。。

绝对定位：（完全脱标--完全不占位置）
是元素在移动位置的时候，
是相对于它**祖先元素**来说的（拼爹型）

**绝对定位的特点总结**：（务必记住）
1.如果**没有祖先元素**或者**祖先元素没有定位**，则以浏览器为基准定位（Document 文档）。
2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
3.绝对定位**不再占有原先的位置**。所以绝对定位是脱离标准流的。（脱标）

子绝父相：子级是绝对定位的话，父级要使用相对定位

因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。
①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，
不会影响其他的兄弟盒子。
②父盒子需要加定位限制子盒子在父盒子内显示。
③父盒子布局时，需要占有位置，因此父亲只能是相对定位。
（解释了为什么父盒子是相对定位）

固定定位fixed（完全脱标）
**固定定位**是元素**固定于浏览器可视区的位置**。（认死理型）
主要使用场景：可以在浏览器页面滚动时元素的位置不会改变

- 固定定位的特点：（务必记住）：
1.以浏览器的可视窗口为参照点移动元素。
  - 跟父元素没有任何关系
  - 不随滚动条滚动。
  2.固定定位**不在占有原先的位置**。
- 固定定位也是**脱标**的，其实**固定定位也可以看做是一种特殊的绝对定位**。（认死理型）
  - **完全脱标**—— 完全不占位置；
  - 只认**浏览器的可视窗口** —— `浏览器可视窗口 + 边偏移属性` 来设置元素的位置；
    - 跟父元素没有任何关系；单独使用的
    - 不随滚动条滚动。

粘性定位（了解）
可以被认为是相对定位和固定定位的混合。
Sticky 粘性的

1.以浏览器的可视窗口为参照点移动元素（固定定位特点）
2.粘性定位占有原先的位置（相对定位特点）
3.必须添加 top 、left、right、bottom **其中一个**才有效
跟页面滚动搭配使用。兼容性较差，IE 不支持

用来做导航栏，侧边栏，
进度条等等，用到的时候百度查询

1. **子绝父相** —— **子元素**使用**绝对定位**，**父元素**使用**相对定位**；
2. **与浮动的对比**：
* **绝对定位**：脱标，**利用边偏移指定准确位置**；
* **浮动**：脱标，不能指定准确位置，**让多个块级元素在一行显示**。

堆叠顺序

在使用**定位**布局时，可能会**出现盒子重叠的情况**。此时，
可以使用 **z-index** 来控制盒子的前后次序 (z轴)

**注意**：`z-index` 只能应用于**相对定位**、**绝对定位**和**固定定位**的元素，
其他**标准流**、**浮动**和**静态定位**无效。

定位的应用

绝对定位盒子居中

1. `left: 50%;`：让**盒子的左侧**移动到**父级元素的水平中心位置**；
2. `margin-left: -100px;`：让盒子**向左**移动**自身宽度的一半**。

定位的特殊性

绝对定位和固定定位也和浮动类似。
1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
前面我们讲过， display 是显示模式，可以改变显示模式有以下方式:
- 可以用inline-block 转换为行内块
- 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
- 绝对定位和固定定位也和浮动类似，默认转换的特性转换为行内块。
所以说，一个行内的盒子，如果加了**浮动**、*
*固定定位**和**绝对定位**，不用转换，就可以给这个盒子直接设置宽度和高度等

脱标的盒子不会触发外边距塌陷

绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，
但是不会压住下面标准流盒子里面的文字（图片）
但是绝对定位（固定定位）会压住下面标准流所有的内容。
浮动之所以不会压住文字，
因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素

网页布局总结

### 6.1. 标准流
可以让盒子上下排列或者左右排列，**垂直的块级盒子显示就用标准流布局**。
### 6.2. 浮动
可以让多个块级元素一行显示或者左右对齐盒子，**多个块级盒子水平显示就用浮动布局**
### 6.3. 定位
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。
**如果元素自由在某个盒子内移动就用定位布局。**

元素的显示与隐藏

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

```
  display: none 隐藏对象

  display：block 除了转换为块级元素之外，同时还有显示元素的意思。
- 特点： display 隐藏元素后，**不再占**有原来的位置。

- 后面应用及其广泛，搭配 JS 可以做很多的网页特效。实际开发场景：

  > 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用极为广泛

display: none 隐藏对象

隐藏之后，不在占用原来的位置

visibility可见性

visibility：visible ; 元素可视

visibility：hidden; 元素隐藏
隐藏元素后。继续占有原来的位置

overflow溢出

| **visible** | 不剪切内容也不添加滚动条                   |
| ----------- | ------------------------------------------ |
| **hidden**  | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
| **scroll**  | 不管超出内容否，总是显示滚动条             |
| **auto**    | 超出自动显示滚动条，不超出不显示滚动条     |

1. 清除浮动
2. 隐藏超出内容，隐藏掉, 不允许内容超过父盒子。

精灵图：
**为了有效地减少服务器接收和发送请求的次数**，
**提高**页面的**加载速度**，
出现了 **CSS 精灵技术**（也称 CSS Sprites、CSS 雪碧）。

原理将网页中的一些小背景
整合到一张大图中，这样服务器只需要请求一次就可以了

通过移动背景图片位置来实现，此时可以使用 background-position 。

字体图标
展示的是图标，本质属于字体

**轻量级**：一个图标字体要比一系列的图像要小。一旦字体加载了，
图标就会马上渲染出来，减少了服务器请求
- 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
- 兼容性：几乎支持所有的浏览器，请放心使用
- 注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

使用步骤：先下载，在引入到html文件去

CSS三角形：使用边框画出来的，前提需要设置盒子宽和高为零，
需要保留一个边框的颜色，其他边框颜色设置为透明色，就可以了

CSS用户界面样式

更改用户的鼠标样式鼠标样式 cursor

表单轮廓
给表单添加 outline: 0; 或者 outline: none; 样式之后，
就可以去掉默认的蓝色边框。

防止表单域拖拽
textarea{
resize: none;
}

在实际开发中，文本域一般是不可以拖拽的

**vertical-align** 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。
官方解释：用于设置一个元素的**垂直对齐方式**，但是它只针对于行内元素或者行内块元素有效。
语法：vertical-align : baseline | top（把元素的顶端与行中最高元素的顶端对齐） |
middle（） | bottom

图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。
此时可以给图片、表单这些行内块元素的 **vertical-align 属性设置为 middle**
就可以让文字和图片垂直居中对齐了。

解决图片底部默认空白缝隙问题

1.**给图片**添加 **vertical-align:middle | top| bottom** 等。（提倡使用的）
2.把图片转换为块级元素 **display: block**;

溢出文字省略号显示

单行文本溢出显示省略号

/*1. 先强制一行内显示文本*/
   white-space: nowrap;  （默认 normal 自动换行）
  /*2. 超出的部分隐藏*/
   overflow: hidden;
  /*3. 文字用省略号替代超出的部分*/
   text-overflow: ellipsis;

多行文本溢出显示省略号
有较大的兼容问题

/*1. 超出的部分隐藏 */
overflow: hidden;
/*2. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;
/* 3. 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 4. 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

CSS3新特性

CSS3的现状

CSS3新增选择器

属性选择器

结构伪类选择器

伪元素选择器
CSS创建新标签元素，而不需要HTML标签，
从而简化HTML结构

应用：伪元素选择器添加字体图标

.clearfix清除浮动

CSS3盒子模型

CSS3 中可以通过 box-sizing 来指定盒模型，有2个值
：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变
可以分成两种情况：
- box-sizing: content-box  盒子大小为 width + padding + border  （以前默认的）
- box-sizing: border-box  盒子大小为 width

如果盒子模型我们改为了box-sizing: border-box  ，那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）

其他特性：

图标变模糊：css滤镜filter
filter: 函数(); --> 例如： filter: blur(5px);
--> blur模糊处理数值越大越模糊

计算盒子宽度--calc函数

CSS3过渡

当元素从一种样式变换为另一种样式时为元素添加效果。
**过渡动画：** 是从一个状态渐渐的过渡到另外一个状态
可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持（ie9以下版本）
但是不会影响页面布局。
我们现在经常和 :hover 一起搭配使用。

语法：transition: 要过渡的属性花费时间运动曲线何时开始;

- 属性：想要变化的 css 属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all 就可以
- 花费时间：单位是秒（必须写单位）比如 0.5s
- 运动曲线：默认是 ease （可以省略）
- 何时开始：单位是秒（必须写单位）可以设置延迟触发时间默认是 0s （可以省略）
- **后面两个属性可以省略**
- **记住过渡的使用口诀：谁做过渡给谁加**

网站 favicon 图标

直接百度进行制作

使用link链接引入即可

TDK三大标签SEO优化（★★）

#### SEO是什么

**SEO（Search Engine Optimization）**汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。

**SEO** 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。

#### TDK是什么

##### T -- Title（网站标题）

**title** 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。

**建议：**网站名（产品名）- 网站的介绍（尽量不要超过30个汉字）

**例如：**

- 京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
- 小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站

##### D -- description（网站描述）

简要说明我们网站主要是做什么的。

**我们提倡**，description 作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“×××网作为…”、“电话：010…”之类语句。

**例如：**

`<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />`

##### K -- keywords （关键字）

**keywords 是页面关键词**，是搜索引擎的关注点之一。

keywords 最好限制为 6～8 个关键词，关键词之间用英文逗号隔开，采用关键词1,关键词2 的形式

**例如：**

`<meta name= "keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />`

**对于我们前端人员来说，我们只需要准备好这三个标签，具体里面的内容，有专门的 SEO 人员准备**

CSS网页学成在线实践

页面布局思路：1确定网页版心
2.分析页面中的行模块以及列模块
3.制作结构，先有结构在有样式

导航栏一般用是**用 li 包含链接(li+a)的做法**

**注意:**
1.让导航栏一行显示, 给 li 加浮动, 因为 li 是块级元素, 需要一行显示.
2.这个nav导航栏可以不给宽度,将来可以继续添加其余文字
3.因为导航栏里面文字不一样多,所以最好给链接 a 左右padding 撑开盒子,而不是指定宽度

移动web

平面转换概念：
使用transform属性实现元素的
**位移**、**旋转**、**缩放**等效果

位移

旋转

转换原点

多重转换

缩放

渐变