1.HTML+CSS+移动web
2022-07-25 10:33:11 0 举报AI智能生成
前端知识总结，全面
作者其他创作
大纲/内容
HTML
超文本标记语言
超文本标记语言
HTML知识点
网页的组成：
网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成
网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成
标签
标签关系可分为包含关系和并列关系
标题标签<h1>--<h6>
段落标签<p></p>
换行标签br，是个单标签
文本格式化标签
strong加粗
em倾斜
del删除线
ins下划线
图片标签img
alt属性：图像不能显示的时候，的替换文本
title属性：鼠标放上去会提示该文字
a链接
href属性：用于指定目标的url地址，如果链接地址中是个文件或者压缩包就会下载
target属性：用于指定链接页面的打开方式_sefl默认值，_blank在新窗口打开
锚点链接：在href中设置属性为对应地方的标签Id类名
各种实体符号
  空格
< <
等等，需要的时候网上查找
路径
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径
绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
表格：一般用来显示数据
语法：<table> //用于定义表格
<tr> //标签用于定义表格中的行，必须嵌套在 <table> </table>标签中
《th》《th》 表头
<td>单元格内的文字</td> 于定义表格中的单元格，必须嵌套在<tr></tr>标签中
...
</tr>
...
</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>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
各个列表项之间没有顺序级别之分，是并列的
有序列表：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
各个列表项之间有一定顺序排列
自定义列表
<dl>
<dt>列表项1</dt>
<dd>列表项2</dd>
</dl>
<dl>
<dt>列表项1</dt>
<dd>列表项2</dd>
</dl>
dt字体大于dd，其他关系并列
表单：
使用表单的目的是为了收集用户信息
使用表单的目的是为了收集用户信息
一个完整的表单通常有表单域、表单控件、和提示信息3个部分构成
表单域：是包含表单元素的区域
<form> 标签用于定义表单域，
以实现用户信息的收集和传递。
会把它范围内的表单元素信息提交给服务器.
<form> 标签用于定义表单域，
以实现用户信息的收集和传递。
会把它范围内的表单元素信息提交给服务器.
<form action=“url地址” method=“提交方式（取值为get或者post）”
name=“表单域名称用于区分页面内的多个表单域">
各种表单元素控件
</form>
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 属性相同。
浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.
语法：
<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>
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
<textarea>文本域
当用户输入内容较多的情况下使用
当用户输入内容较多的情况下使用
语法：
<textarea rows="3" cols="20">
文本内容 </textarea>
<textarea rows="3" cols="20">
文本内容 </textarea>
HTML5新特性
语义化标签
多媒体标签
视频标签
音频标签
新增表单元素
新增表单元素属性
CSS
层叠样式表
层叠样式表
CSS知识点
CSS引入方式
行内样式
内部样式（嵌入式）
引入外部样式
<link rel="stylesheet" href="css文件路径">
<link rel="stylesheet" href="css文件路径">
元素的显示模式
块元素
常见块元素<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
- 比较霸道，自己独占一行。
- 高度，宽度、外边距以及内边距都可以控制。
- 宽度默认是容器（父级宽度）的100%。
- 是一个容器及盒子，里面可以放行内或者块级元素。
- 高度，宽度、外边距以及内边距都可以控制。
- 宽度默认是容器（父级宽度）的100%。
- 是一个容器及盒子，里面可以放行内或者块级元素。
文字类的元素不能放块级元素
行内元素
（有的也叫内联元素）
（有的也叫内联元素）
常见行内元素：<a>、<strong>、<b>、<em>、
<i>、<del>、<s>、<ins>、<u>、<span>
<i>、<del>、<s>、<ins>、<u>、<span>
- 相邻行内元素在一行上，一行可以显示多个。
- 高、宽直接设置是无效的。(能设置左右内外边距，上下不能设置)
- 默认宽度就是它本身内容的宽度。
- 行内元素只能容纳文本或其他行内元素。
- 高、宽直接设置是无效的。(能设置左右内外边距，上下不能设置)
- 默认宽度就是它本身内容的宽度。
- 行内元素只能容纳文本或其他行内元素。
行内块元素
<img />、<input />、<td>
同时具有块元素和行内元素的特点。有些资料称它们为行内块元素
- 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。
- 一行可以显示多个（行内元素特点）。
- 默认宽度就是它本身内容的宽度（行内元素特点）。
- 高度，行高、外边距以及内边距都可以控制（块级元素特点）。
- 一行可以显示多个（行内元素特点）。
- 默认宽度就是它本身内容的宽度（行内元素特点）。
- 高度，行高、外边距以及内边距都可以控制（块级元素特点）。
行内块元素的巧妙运用
页码在页面中间显示:
1. 把这些链接盒子转换为行内块， 之后给父级指定 text-align:center;
2. 利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中
1. 把这些链接盒子转换为行内块， 之后给父级指定 text-align:center;
2. 利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中
元素显示模式转换
一个模式的元素需要另外一种模式的特性
比如想要增加链接 <a> 的触发范围。
一个模式的元素需要另外一种模式的特性
比如想要增加链接 <a> 的触发范围。
- 转换为块元素：display:block;
- 转换为行内元素：display:inline;
- 转换为行内块：display: inline-block;
- 转换为行内元素：display:inline;
- 转换为行内块：display: inline-block;
css选择器
css基础选择器：
根据不同的需求把不同的标签选中出来
根据不同的需求把不同的标签选中出来
标签选择器
如：p {
color：red；
}
如：p {
color：red；
}
类选择器
语法：.类名 {
}
语法：.类名 {
}
id选择器
#id名 {
属性1: 属性值1;
...
}
#id名 {
属性1: 属性值1;
...
}
具有唯一性
通配符选择器
* {
属性1: 属性值1;
...
}
* {
属性1: 属性值1;
...
}
无需调用，自动给所以元素使用样式
css复合选择器：
复合选择器是由两个或多个基础选择器，
通过不同的方式组合而成的，
可以更准确、更高效的选择目标元素（标签）
复合选择器是由两个或多个基础选择器，
通过不同的方式组合而成的，
可以更准确、更高效的选择目标元素（标签）
后代选择器
元素1 元素2 { }
最终选择的是元素2
元素1，和元素2可以是任意基础选择器
最终选择的是元素2
元素1，和元素2可以是任意基础选择器
子选择器
只能选择作为某元素的最近一级子元素
只能选择作为某元素的最近一级子元素
元素1>元素2 { }
语法表示选择元素1 里面的所有直接后代(子元素) 元素2
元素2 必须是亲儿子，其孙子、重孙之类都不归他管.
也可以叫他 亲儿子选择器
语法表示选择元素1 里面的所有直接后代(子元素) 元素2
元素2 必须是亲儿子，其孙子、重孙之类都不归他管.
也可以叫他 亲儿子选择器
并集选择器
并集选择器可以选择多组标签, 同时为他们定义相同的样式，
通常用于集体声明
并集选择器可以选择多组标签, 同时为他们定义相同的样式，
通常用于集体声明
元素1，元素2 { }
伪类选择器：
伪类选择器用于向某些选择器添加特殊的效果，
比如给链接添加特殊效果，或选择第1个，第n个元素。
伪类选择器用于向某些选择器添加特殊的效果，
比如给链接添加特殊效果，或选择第1个，第n个元素。
伪类选择器书写最大的特点是用冒号（:）表示，
比如 :hover 、 :first-child 。
比如 :hover 、 :first-child 。
链接伪类选择器（使用多个的时候，需要按照顺序来书写）
a:link 没有点击过的(访问过的)链接
a:visited 点击过的(访问过的)链接
a:hover 鼠标经过的那个链接
a:active 鼠标正在按下还没有弹起鼠标的那个链接
a:link 没有点击过的(访问过的)链接
a:visited 点击过的(访问过的)链接
a:hover 鼠标经过的那个链接
a:active 鼠标正在按下还没有弹起鼠标的那个链接
:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况 <input> 类表单元素才能获取
焦点就是光标，一般情况 <input> 类表单元素才能获取
input:focus {
这个是表单较为常用的
}
这个是表单较为常用的
}
CSS三大特性
层叠性：
主要解决样式冲突的问题
主要解决样式冲突的问题
相同选择器给元素设置相同的样式
一个样式就会覆盖另一个冲突样式
一个样式就会覆盖另一个冲突样式
层叠性原则:
- 样式冲突，遵循的原则是就近原则，
哪个样式离结构近，就执行哪个样式（后来居上，后面层叠掉前面的）
- 样式不冲突，不会层叠
- 样式冲突，遵循的原则是就近原则，
哪个样式离结构近，就执行哪个样式（后来居上，后面层叠掉前面的）
- 样式不冲突，不会层叠
继承性：子标签会继承父标签的某些样式，
如文本颜色和字号。
恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。
如文本颜色和字号。
恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。
子元素可以继承父元素的样式：
（text-，font-，line-这些元素开头的可以继承，以及color属性）
继承性口诀：龙生龙，凤生凤，老鼠生的孩子会打洞
（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
行内样式 <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-size: 20px;
字体粗细：
font-weight: bold（加粗的）;
normal（默认值），也可用数值表示（100--900）
其中400等同于normal，700等同于bold
font-weight: bold（加粗的）;
normal（默认值），也可用数值表示（100--900）
其中400等同于normal，700等同于bold
字体样式：
font-style: normal（默认值，浏览器会显示标准字体样式）;
italic（浏览器会显示斜体的字体样式）
font-style: normal（默认值，浏览器会显示标准字体样式）;
italic（浏览器会显示斜体的字体样式）
行间距：line-height 行高的文本分为上间距 +文本高度+下间距=行间距
全文字体声明：font-family;
单行文字垂直居中：让文字行高等于盒子高度，即：line-height：盒子的高度；
行高的上空隙和下空隙把文字挤到中间了，
如果行高小于盒子高度,文字会偏上，
如果行高大于盒子高度,则文字偏下。
如果行高小于盒子高度,文字会偏上，
如果行高大于盒子高度,则文字偏下。
文本属性
颜色color
有16进制（开发中较常用）和RGB代码两种表达方式
有16进制（开发中较常用）和RGB代码两种表达方式
文本对齐
text-align: center（居中）;
left左对齐
right 右对齐
text-align: center（居中）;
left左对齐
right 右对齐
修饰文本
text-decoration：none（默认，没有装饰线）；
underline 下划线
overline 上划线
line-through删除线
text-decoration：none（默认，没有装饰线）；
underline 下划线
overline 上划线
line-through删除线
文本缩进text-indent：2em；
em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小,
如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。
em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小,
如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。
CSS背景
背景颜色
background-color ：颜色值；
元素背景颜色的默认值是transparent（透明）
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+ 版本浏览器才支持的，
但是现在实际开发,我们不太关注兼容性写法了,可以放心使用
- 我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);
**注意**：
- 背景半透明是指盒子背景半透明，盒子里面的内容不受影响
- CSS3 新增属性，是 IE9+ 版本浏览器才支持的，
但是现在实际开发,我们不太关注兼容性写法了,可以放心使用
背景图片
background-image ：none（默认无背景图）|url（）
实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片,
优点是非常便于控制位置. (精灵图也是一种运用场景)
注意：背景图片后面的地址，千万不要忘记加 URL，
同时里面的路径**不要加引号**。
优点是非常便于控制位置. (精灵图也是一种运用场景)
注意：背景图片后面的地址，千万不要忘记加 URL，
同时里面的路径**不要加引号**。
背景平铺
background-repeat 设置元素背景图像的平铺
repeat 背景在纵向和横向上平铺（默认值）
no-repeat 背景图像不平铺
repeat-x 在横向上平铺
repeat-y 在纵向上平铺
repeat 背景在纵向和横向上平铺（默认值）
no-repeat 背景图像不平铺
repeat-x 在横向上平铺
repeat-y 在纵向上平铺
背景图片位置
background-position 属性可以改变图片在背景中的位置
background-position：x y；可以使用 方位名词 或者 精确单位
background-position：x y；可以使用 方位名词 或者 精确单位
1、参数是方位名词
如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
2、参数是精确单位
如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
3、参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标
如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
2、参数是精确单位
如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
3、参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标
背景图片固定
background-attachment：scroll（随对象内容移动）|fixed（固定）
属性设置背景图像是否固定或者随着页面的其余部分滚动。
属性设置背景图像是否固定或者随着页面的其余部分滚动。
背景样式合写
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
background: red url（） repeat fixed top；
background: red url（） repeat fixed top；
盒子模型
把HTML页面中的元素看做是一个矩形的盒子，
也是一个盛装内容的容器
把HTML页面中的元素看做是一个矩形的盒子，
也是一个盛装内容的容器
盒子模型的组成
边框 border
边框会影响盒子实际的大小
一般测量盒子大小的时候不测量边框
或者测量后宽高减去盒子边框宽度
边框会影响盒子实际的大小
一般测量盒子大小的时候不测量边框
或者测量后宽高减去盒子边框宽度
边框粗细，边框样式，边框颜色
边框样式：
- none：没有边框即忽略所有边框的宽度（默认值）
- solid：边框为单实线(最为常用的)
- dashed：边框为虚线
- dotted：边框为点线
- 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; 表示相邻边框合并在一起
它控制相邻单元格的边框。
2、语法：
```css
border-collapse:collapse;
```
collapse 单词是合并的意思
border-collapse: collapse; 表示相邻边框合并在一起
内边距 padding
边框与内容之间的距离
边框与内容之间的距离
内边距会影响盒子实际大小
1、当我们给盒子指定 padding 值之后，发生了 2 件事情：
1. 内容和边框有了距离，添加了内边距。
2. padding影响了盒子实际大小。
2、内边距对盒子大小的影响：
- 如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
- 如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。
3、解决方案：
如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。
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 即可。
- 盒子必须指定了宽度（width）。
- 盒子左右的外边距都设置为 auto 。
常见的写法，以下三种都可以：
```css
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
```
注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。
外边距合并问题
相邻块元素垂直外边距的合并
解决方案：尽量只给一个盒子添加margin的值
解决方案：尽量只给一个盒子添加margin的值
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，
下面的元素有上外边距 margin-top ，
则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。
取两个值中的较大值这种现象被称为相邻块元素垂直外边距的合并。
下面的元素有上外边距 margin-top ，
则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。
取两个值中的较大值这种现象被称为相邻块元素垂直外边距的合并。
嵌套块元素垂直外边距的塌陷
解决方案：
- 可以为父元素定义上边框。
- 可以为父元素定义上内边距。
- 可以为父元素添加 overflow:hidden（溢出隐藏的意识）。
也可以使用子绝父相的方法
解决方案：
- 可以为父元素定义上边框。
- 可以为父元素定义上内边距。
- 可以为父元素添加 overflow:hidden（溢出隐藏的意识）。
也可以使用子绝父相的方法
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，
此时父元素会塌陷为较大的外边距值。
此时父元素会塌陷为较大的外边距值。
注意：浮动 和固定定位，绝对定位的元素。不会发生外边距塌陷问题
清除内外边距
因为在不同浏览器默认的不同，
所以一般在布局之前先清除网页元素的内外边距
因为在不同浏览器默认的不同，
所以一般在布局之前先清除网页元素的内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
```css
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
```
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了
```css
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
```
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了
实际内容
拓展：PS基本操作
快捷键
- 文件→打开 ：可以打开我们要测量的图片
- Ctrl+R：可以打开标尺，或者 视图→标尺
- 右击标尺，把里面的单位改为像素
- Ctrl+ 加号(+)可以放大视图， Ctrl+ 减号(-)可以缩小视图
- 按住空格键，鼠标可以变成小手，拖动 PS 视图
- 用选区拖动 可以测量大小
- Ctrl+ D 可以取消选区，或者在旁边空白处点击一下也可以取消选区
- Ctrl+R：可以打开标尺，或者 视图→标尺
- 右击标尺，把里面的单位改为像素
- Ctrl+ 加号(+)可以放大视图， Ctrl+ 减号(-)可以缩小视图
- 按住空格键，鼠标可以变成小手，拖动 PS 视图
- 用选区拖动 可以测量大小
- Ctrl+ D 可以取消选区，或者在旁边空白处点击一下也可以取消选区
切图
图层切图
最简单的切图方式：右击图层 → 导出 → 切片。
切片切图
利用切片工具手动划出
然后导出选中图片：
文件菜单 → 存储为 web 设备所用格式 → 选择我们要的图片格式 → 存储 。
文件菜单 → 存储为 web 设备所用格式 → 选择我们要的图片格式 → 存储 。
切图插件：
Cutterman 是一款运行在 Photoshop 中的插件，能够自动将你需要的图层进行输出，
以替代传统的手工 "导出 web 所用格式" 以及使用切片工具进行挨个切图的繁琐流程。
官网：http://www.cutterman.cn/zh/cutterman
注意：Cutterman 插件要求你的 PS 必须是完整版，
不能是绿色版，所以大家需要安装完整版本。
Cutterman 是一款运行在 Photoshop 中的插件，能够自动将你需要的图层进行输出，
以替代传统的手工 "导出 web 所用格式" 以及使用切片工具进行挨个切图的繁琐流程。
官网：http://www.cutterman.cn/zh/cutterman
注意：Cutterman 插件要求你的 PS 必须是完整版，
不能是绿色版，所以大家需要安装完整版本。
其他样式
css3新增
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+ 浏览器支持, 但是不会影响页面布局,可以放心使用
语法：
```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（可选，将外部阴影改为内部阴影）;
box-shadow: h-shadow （必需，水平阴影的位置，允许负数值）
v-shadow （必需，垂直阴影的位置 ，允许负数值）
blur（可选，模糊距离） spread（可选，阴影尺寸） color（可选，阴影颜色）
inset（可选，将外部阴影改为内部阴影）;
文字阴影
语法：
text-shadow: h-shadow （必需，水平阴影的位置，允许负数值）
v-shadow （必需，垂直阴影的位置 ，允许负数值）
blur（可选，模糊距离） color（可选，阴影颜色）;
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. **布局定位属性**：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 等
常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。
常用元素：span、a、i、em 等
浮动
很多效果标准流没有办法完成
浮动可以改变元素默认标签的排列方式
1.浮动可以让多个块级盒子一行没有缝隙排列显示，
经常用于横向排列盒子。
很多效果标准流没有办法完成
浮动可以改变元素默认标签的排列方式
1.浮动可以让多个块级盒子一行没有缝隙排列显示，
经常用于横向排列盒子。
最典型应用：可以让多个块级元素一行内排列显示
网页布局第一准则：**多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动**
float属性用于创建浮动，将其移到一边，直到左边缘或有边缘触及包含块或另一个浮动框的边缘
语法：选择器 { float: none（元素不浮动（默认值））
left（元素向左浮动）
right（元素向右浮动）
; }
left（元素向左浮动）
right（元素向右浮动）
; }
浮动的特性
1、浮动元素会脱离标准流(脱标：浮动的盒子不再保留原先的位置)
2、浮动的元素会一行内显示并且元素顶部对齐
3、浮动的元素会具有行内块元素的特性
浮动元素的大小根据内容来决定
浮动的盒子中间是没有缝隙的
浮动元素的大小根据内容来决定
浮动的盒子中间是没有缝隙的
注意：
浮动的元素是互相贴靠在一起的（不会有缝隙），
如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
浮动的元素是互相贴靠在一起的（不会有缝隙），
如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
浮动布局注意点
浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置, 我们网页布局一般采取的策略是:
先用标准流父元素排列上下位置, 之后内部子元素采取浮动排列左右位置. 符合网页布局第一准侧
先用标准流父元素排列上下位置, 之后内部子元素采取浮动排列左右位置. 符合网页布局第一准侧
1、浮动和标准流的父盒子搭配。
先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置
先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置
2、一个元素浮动了，理论上其余的兄弟元素也要浮动。
一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，以防止引起问题。
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.
一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，以防止引起问题。
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.
清除浮动
为什么要清除浮动
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，
最后父级盒子高度为 0 时，就会影响下面的标准流盒子。
最后父级盒子高度为 0 时，就会影响下面的标准流盒子。
1.清除浮动的本质是
清除浮动元素造成的影响：浮动的子标签无法撑开父盒子的高度
清除浮动元素造成的影响：浮动的子标签无法撑开父盒子的高度
注意：
- 如果父盒子本身有高度，则不需要清除浮动
- 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。
- 父级有了高度，就不会影响下面的标准流了
- 如果父盒子本身有高度，则不需要清除浮动
- 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。
- 父级有了高度，就不会影响下面的标准流了
清除浮动样式
语法：
选择器{clear:both;（同时清除左右两侧浮动的影响）}
语法：
选择器{clear:both;（同时清除左右两侧浮动的影响）}
2、清除浮动策略是?
闭合浮动. 只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子.
闭合浮动. 只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子.
清除浮动的多种方式
推荐使用伪元素的方式
推荐使用伪元素的方式
1.额外标签法（也称隔墙法）
使用方式：
额外标签法会在浮动元素末尾添加一个空的标签。
```html
例如 <div style="clear:both"></div>，或者其他标签（如<br />等）。
```
优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差
注意： 要求这个新的空标签必须是块级元素。
使用方式：
额外标签法会在浮动元素末尾添加一个空的标签。
```html
例如 <div style="clear:both"></div>，或者其他标签（如<br />等）。
```
优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差
注意： 要求这个新的空标签必须是块级元素。
2.可以给父级添加 overflow 属性，
将其属性值设置为 hidden、 auto 或 scroll 。
例如：
```css
overflow:hidden | auto | scroll;
```
优点：代码简洁
缺点：无法显示溢出的部分
注意：是给父元素添加代码
将其属性值设置为 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;
}
```
优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表网站： 百度、淘宝网、网易等
: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;
}
```
优点：代码更简洁
缺点：照顾低版本浏览器
代表网站：小米、腾讯等
给父元素添加
```css
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
```
优点：代码更简洁
缺点：照顾低版本浏览器
代表网站：小米、腾讯等
定位
2.定位则是可以让盒子自由的在某个盒子内移动位置
或者固定屏幕中某个位置，并且可以压住其他盒子。
2.定位则是可以让盒子自由的在某个盒子内移动位置
或者固定屏幕中某个位置，并且可以压住其他盒子。
定位也是用来布局的，它有两部分组成：
> **定位 = 定位模式 + 边偏移**
**定位模式** 用于指定一个元素在文档中的定位方式。
**边偏移**则决定了该元素的最终位置。（**边偏移** 就是定位的盒子移动到最终位置。
有 top、bottom、left 和 right 4 个属性）
> **定位 = 定位模式 + 边偏移**
**定位模式** 用于指定一个元素在文档中的定位方式。
**边偏移**则决定了该元素的最终位置。（**边偏移** 就是定位的盒子移动到最终位置。
有 top、bottom、left 和 right 4 个属性）
语法：
在 CSS 中，通过 `position` 属性定义元素的**定位模式**，语法如下：
```css
选择器 {
position: `static**静态**定位 |
| ---------- | :----------: |
| `relative` | **相对**定位 |
| `absolute` | **绝对**定位 |
| `fixed` | **固定**定位 | ;
}
```
定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。
在 CSS 中，通过 `position` 属性定义元素的**定位模式**，语法如下：
```css
选择器 {
position: `static**静态**定位 |
| ---------- | :----------: |
| `relative` | **相对**定位 |
| `absolute` | **绝对**定位 |
| `fixed` | **固定**定位 | ;
}
```
定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。
静态定位
无定位的意思，没有边偏移，相当于border里面的none
相对定位：（没有脱标）
是元素在移动位置的时候，
是相对于它自己**原来的位置**来说的
是元素在移动位置的时候，
是相对于它自己**原来的位置**来说的
相对定位的特点：（务必记住）
- 1.它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
- 2.**原来**在标准流的**位置**继续占有，后面的盒子仍然以标准流的方式对待它。
因此，**相对定位并没有脱标**。它最典型的应用是给绝对定位当爹的。。。
- 1.它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
- 2.**原来**在标准流的**位置**继续占有，后面的盒子仍然以标准流的方式对待它。
因此，**相对定位并没有脱标**。它最典型的应用是给绝对定位当爹的。。。
绝对定位：（完全脱标--完全不占位置）
是元素在移动位置的时候，
是相对于它**祖先元素**来说的（拼爹型）
是元素在移动位置的时候，
是相对于它**祖先元素**来说的（拼爹型）
**绝对定位的特点总结**：（务必记住）
1.如果**没有祖先元素**或者**祖先元素没有定位**，则以浏览器为基准定位（Document 文档）。
2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
3.绝对定位**不再占有原先的位置**。所以绝对定位是脱离标准流的。（脱标）
1.如果**没有祖先元素**或者**祖先元素没有定位**，则以浏览器为基准定位（Document 文档）。
2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
3.绝对定位**不再占有原先的位置**。所以绝对定位是脱离标准流的。（脱标）
子绝父相：子级是绝对定位的话，父级要使用相对定位
因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。
①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，
不会影响其他的兄弟盒子。
②父盒子需要加定位限制子盒子在父盒子内显示。
③父盒子布局时，需要占有位置，因此父亲只能是相对定位。
（解释了为什么父盒子是相对定位）
①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，
不会影响其他的兄弟盒子。
②父盒子需要加定位限制子盒子在父盒子内显示。
③父盒子布局时，需要占有位置，因此父亲只能是相对定位。
（解释了为什么父盒子是相对定位）
固定定位fixed（完全脱标）
**固定定位**是元素**固定于浏览器可视区的位置**。（认死理型）
主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变
**固定定位**是元素**固定于浏览器可视区的位置**。（认死理型）
主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变
- 固定定位的特点：（务必记住）：
1.以浏览器的可视窗口为参照点移动元素。
- 跟父元素没有任何关系
- 不随滚动条滚动。
2.固定定位**不在占有原先的位置**。
- 固定定位也是**脱标**的，其实**固定定位也可以看做是一种特殊的绝对定位**。（认死理型）
- **完全脱标**—— 完全不占位置；
- 只认**浏览器的可视窗口** —— `浏览器可视窗口 + 边偏移属性` 来设置元素的位置；
- 跟父元素没有任何关系；单独使用的
- 不随滚动条滚动。
1.以浏览器的可视窗口为参照点移动元素。
- 跟父元素没有任何关系
- 不随滚动条滚动。
2.固定定位**不在占有原先的位置**。
- 固定定位也是**脱标**的，其实**固定定位也可以看做是一种特殊的绝对定位**。（认死理型）
- **完全脱标**—— 完全不占位置；
- 只认**浏览器的可视窗口** —— `浏览器可视窗口 + 边偏移属性` 来设置元素的位置；
- 跟父元素没有任何关系；单独使用的
- 不随滚动条滚动。
粘性定位（了解）
可以被认为是相对定位和固定定位的混合。
Sticky 粘性的
可以被认为是相对定位和固定定位的混合。
Sticky 粘性的
1.以浏览器的可视窗口为参照点移动元素（固定定位特点）
2.粘性定位占有原先的位置（相对定位特点）
3.必须添加 top 、left、right、bottom **其中一个**才有效
跟页面滚动搭配使用。 兼容性较差，IE 不支持
2.粘性定位占有原先的位置（相对定位特点）
3.必须添加 top 、left、right、bottom **其中一个**才有效
跟页面滚动搭配使用。 兼容性较差，IE 不支持
用来做导航栏，侧边栏，
进度条等等，用到的时候百度查询
进度条等等，用到的时候百度查询
1. **子绝父相** —— **子元素**使用**绝对定位**，**父元素**使用**相对定位**；
2. **与浮动的对比**：
* **绝对定位**：脱标，**利用边偏移指定准确位置**；
* **浮动**：脱标，不能指定准确位置，**让多个块级元素在一行显示**。
2. **与浮动的对比**：
* **绝对定位**：脱标，**利用边偏移指定准确位置**；
* **浮动**：脱标，不能指定准确位置，**让多个块级元素在一行显示**。
堆叠顺序
在使用**定位**布局时，可能会**出现盒子重叠的情况**。此时，
可以使用 **z-index** 来控制盒子的前后次序 (z轴)
可以使用 **z-index** 来控制盒子的前后次序 (z轴)
**注意**：`z-index` 只能应用于**相对定位**、**绝对定位**和**固定定位**的元素，
其他**标准流**、**浮动**和**静态定位**无效。
其他**标准流**、**浮动**和**静态定位**无效。
定位的应用
绝对定位盒子居中
1. `left: 50%;`：让**盒子的左侧**移动到**父级元素的水平中心位置**；
2. `margin-left: -100px;`：让盒子**向左**移动**自身宽度的一半**。
2. `margin-left: -100px;`：让盒子**向左**移动**自身宽度的一半**。
定位的特殊性
绝对定位和固定定位也和浮动类似。
1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
前面我们讲过， display 是 显示模式， 可以改变显示模式有以下方式:
- 可以用inline-block 转换为行内块
- 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
- 绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。
所以说， 一个行内的盒子，如果加了**浮动**、*
*固定定位**和**绝对定位**，不用转换，就可以给这个盒子直接设置宽度和高度等
1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
前面我们讲过， display 是 显示模式， 可以改变显示模式有以下方式:
- 可以用inline-block 转换为行内块
- 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
- 绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。
所以说， 一个行内的盒子，如果加了**浮动**、*
*固定定位**和**绝对定位**，不用转换，就可以给这个盒子直接设置宽度和高度等
脱标的盒子不会触发外边距塌陷
绝对定位（固定定位）会完全压住盒子
浮动元素不同，只会压住它下面标准流的盒子，
但是不会压住下面标准流盒子里面的文字（图片）
但是绝对定位（固定定位） 会压住下面标准流所有的内容。
浮动之所以不会压住文字，
因为浮动产生的目的最初是为了做文字环绕效果的。 文字会围绕浮动元素
但是不会压住下面标准流盒子里面的文字（图片）
但是绝对定位（固定定位） 会压住下面标准流所有的内容。
浮动之所以不会压住文字，
因为浮动产生的目的最初是为了做文字环绕效果的。 文字会围绕浮动元素
网页布局总结
### 6.1. 标准流
可以让盒子上下排列或者左右排列，**垂直的块级盒子显示就用标准流布局**。
### 6.2. 浮动
可以让多个块级元素一行显示或者左右对齐盒子，**多个块级盒子水平显示就用浮动布局**
### 6.3. 定位
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。
**如果元素自由在某个盒子内移动就用定位布局。**
可以让盒子上下排列或者左右排列，**垂直的块级盒子显示就用标准流布局**。
### 6.2. 浮动
可以让多个块级元素一行显示或者左右对齐盒子，**多个块级盒子水平显示就用浮动布局**
### 6.3. 定位
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。
**如果元素自由在某个盒子内移动就用定位布局。**
元素的显示与隐藏
display设置或检索对象是否如何显示
```
display: none 隐藏对象
display：block 除了转换为块级元素之外，同时还有显示元素的意思。
- 特点： display 隐藏元素后，**不再占**有原来的位置。
- 后面应用及其广泛，搭配 JS 可以做很多的网页特效。实际开发场景：
> 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
display: none 隐藏对象
display：block 除了转换为块级元素之外，同时还有显示元素的意思。
- 特点： display 隐藏元素后，**不再占**有原来的位置。
- 后面应用及其广泛，搭配 JS 可以做很多的网页特效。实际开发场景：
> 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
display: none 隐藏对象
隐藏之后，不在占用原来的位置
visibility可见性
visibility：visible ; 元素可视
visibility：hidden; 元素隐藏
隐藏元素后。继续占有原来的位置
visibility：hidden; 元素隐藏
隐藏元素后。继续占有原来的位置
overflow溢出
| **visible** | 不剪切内容也不添加滚动条 |
| ----------- | ------------------------------------------ |
| **hidden** | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
| **scroll** | 不管超出内容否，总是显示滚动条 |
| **auto** | 超出自动显示滚动条，不超出不显示滚动条 |
| ----------- | ------------------------------------------ |
| **hidden** | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
| **scroll** | 不管超出内容否，总是显示滚动条 |
| **auto** | 超出自动显示滚动条，不超出不显示滚动条 |
1. 清除浮动
2. 隐藏超出内容，隐藏掉, 不允许内容超过父盒子。
2. 隐藏超出内容，隐藏掉, 不允许内容超过父盒子。
精灵图：
**为了有效地减少服务器接收和发送请求的次数**，
**提高**页面的**加载速度**，
出现了 **CSS 精灵技术**（也称 CSS Sprites、CSS 雪碧）。
**为了有效地减少服务器接收和发送请求的次数**，
**提高**页面的**加载速度**，
出现了 **CSS 精灵技术**（也称 CSS Sprites、CSS 雪碧）。
原理将网页中的一些小背景
整合到一张大图中，这样服务器只需要请求一次就可以了
整合到一张大图中，这样服务器只需要请求一次就可以了
通过移动背景图片位置来实现， 此时可以使用 background-position 。
字体图标
展示的是图标，本质属于字体
展示的是图标，本质属于字体
**轻量级**：一个图标字体要比一系列的图像要小。一旦字体加载了，
图标就会马上渲染出来，减少了服务器请求
- 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
- 兼容性：几乎支持所有的浏览器，请放心使用
- 注意： 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。
图标就会马上渲染出来，减少了服务器请求
- 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
- 兼容性：几乎支持所有的浏览器，请放心使用
- 注意： 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。
使用步骤：先下载，在引入到html文件去
CSS三角形：使用边框画出来的，前提需要设置盒子宽和高为零，
需要保留一个边框的颜色，其他边框颜色设置为透明色，就可以了
需要保留一个边框的颜色，其他边框颜色设置为透明色，就可以了
CSS用户界面样式
更改用户的鼠标样式鼠标样式 cursor
表单轮廓
给表单添加 outline: 0; 或者 outline: none; 样式之后，
就可以去掉默认的蓝色边框。
给表单添加 outline: 0; 或者 outline: none; 样式之后，
就可以去掉默认的蓝色边框。
防止表单域拖拽
textarea{
resize: none;
}
textarea{
resize: none;
}
在实际开发中，文本域一般是不可以拖拽的
**vertical-align** 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。
官方解释： 用于设置一个元素的**垂直对齐方式**，但是它只针对于行内元素或者行内块元素有效。
语法：vertical-align : baseline | top（把元素的顶端与行中最高元素的顶端对齐） |
middle（） | bottom
官方解释： 用于设置一个元素的**垂直对齐方式**，但是它只针对于行内元素或者行内块元素有效。
语法：vertical-align : baseline | top（把元素的顶端与行中最高元素的顶端对齐） |
middle（） | bottom
图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。
此时可以给图片、表单这些行内块元素的 **vertical-align 属性设置为 middle**
就可以让文字和图片垂直居中对齐了。
此时可以给图片、表单这些行内块元素的 **vertical-align 属性设置为 middle**
就可以让文字和图片垂直居中对齐了。
解决图片底部默认空白缝隙问题
1.**给图片**添加 **vertical-align:middle | top| bottom** 等。 （提倡使用的）
2.把图片转换为块级元素 **display: block**;
2.把图片转换为块级元素 **display: block**;
溢出文字省略号显示
单行文本溢出显示省略号
/*1. 先强制一行内显示文本*/
white-space: nowrap; （ 默认 normal 自动换行）
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
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;
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结构
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宽度）
：即可指定为 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模糊处理 数值越大越模糊
filter: 函数(); --> 例如： filter: blur(5px);
--> blur模糊处理 数值越大越模糊
计算盒子宽度--calc函数
CSS3过渡
当元素从一种样式变换为另一种样式时为元素添加效果。
**过渡动画：** 是从一个状态 渐渐的过渡到另外一个状态
可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本）
但是不会影响页面布局。
我们现在经常和 :hover 一起 搭配使用。
**过渡动画：** 是从一个状态 渐渐的过渡到另外一个状态
可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本）
但是不会影响页面布局。
我们现在经常和 :hover 一起 搭配使用。
语法：transition: 要过渡的属性 花费时间 运动曲线 何时开始;
- 属性 ： 想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一个all 就可以
- 花费时间： 单位是 秒（必须写单位） 比如 0.5s
- 运动曲线： 默认是 ease （可以省略）
- 何时开始：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）
- **后面两个属性可以省略**
- **记住过渡的使用口诀： 谁做过渡给谁加**
- 花费时间： 单位是 秒（必须写单位） 比如 0.5s
- 运动曲线： 默认是 ease （可以省略）
- 何时开始：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）
- **后面两个属性可以省略**
- **记住过渡的使用口诀： 谁做过渡给谁加**
网站 favicon 图标
直接百度进行制作
使用link链接引入即可
TDK三大标签SEO优化（★★）
#### SEO是什么
**SEO（Search Engine Optimization）**汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。
**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 人员准备**
##### 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.制作结构，先有结构在有样式
2.分析页面中的行模块以及列模块
3.制作结构，先有结构在有样式
导航栏一般用是**用 li 包含链接(li+a)的做法**
**注意:**
1.让导航栏一行显示, 给 li 加浮动, 因为 li 是块级元素, 需要一行显示.
2.这个nav导航栏可以不给宽度,将来可以继续添加其余文字
3.因为导航栏里面文字不一样多,所以最好给链接 a 左右padding 撑开盒子,而不是指定宽度
1.让导航栏一行显示, 给 li 加浮动, 因为 li 是块级元素, 需要一行显示.
2.这个nav导航栏可以不给宽度,将来可以继续添加其余文字
3.因为导航栏里面文字不一样多,所以最好给链接 a 左右padding 撑开盒子,而不是指定宽度
移动web
平面转换概念：
使用transform属性实现元素的
**位移**、**旋转**、**缩放**等效果
使用transform属性实现元素的
**位移**、**旋转**、**缩放**等效果
位移
旋转
转换原点
多重转换
缩放
渐变
空间转换
空间位移
透视
空间旋转
立体呈现
空间缩放
动画
多组动画
移动端特点
分辨率
视口
百分比布局
Flex布局
移动适配
媒体查询
less
bootstrap框架布局
收藏
收藏
0 条评论
下一页
