你的名字
HTML
HTML基础
-
认识网页
- 文字
- 图片
- 链接······等元素
-
常见浏览器
- IE
- 火狐Firefox
- opera
- safari
-
常见浏览器内核
-
谷歌
- chromium/Blink
-
IE
-
Trident
360极速、百度浏览器
-
-
火狐
- Gecko
-
opera
-
blink
Blink其实是webkit的分支
-
-
safari
-
webkit
安卓手机大多使用webkit
-
-
-
web标准
-
优点
- 标准和统一化
- 让web的前景更广阔
- 内容能被更广泛地访问
- 更容易被搜索引擎搜索
- 减低网站流量费用
- 使网站易于维护
-
构成
-
结构
- 对网页元素进行整理和分类，主要为HTML
-
行为
- 表现用于设置网页元素的版式、颜色、大小等外观样式，主要是指CSS
-
表现
- 行为是指网页模型的定义和交互的编写，主要是指JavaScript
-
-
-
HTML的概念
-
HTML是指超文本标记语言（HyperText Markup Language），是用来描述网页的一种语言
-
HTML不是编程语言，是标记语言
-
标记语言是一套标记标签
-
HTML骨架
<html> <head> <title></title> </head> <body> </body> </html>
-
-
HTML标签的分类
-
常规元素（双标签）
<标签名> 内容 </ 标签名>
-
空元素（单标签）
<标签名 />
-
-
HTML标签的关系
- 嵌套关系
` <head>
<title>
<i></i>
</title>
<head>`
- 并列关系
<head></head>
<body></body>
-
HTML标签的语义化
- 根据标签的语义，在合适的地方放上合适的标签，使结构更加清晰
-
HTML常用标签
-
排版标签
-
标题标签h
<h1> 标题</h1>
<h2> 标题</h2>
<h3> 标题</h3>
<h4> 标题</h4>
<h5> 标题</h5>
<h6> 标题</h6>
- 段落标签p
<p> 内容</p>
- 水平线标签hr
<!-- <hr />是单标签 -->
- 换行标签br
<!-- <br />是单标签 -->
- div和span标签
<div>这是头部</div>
<!-- 一行只能放一个div，用来布局-->
<span>今日价格</span>
<!-- 一行可以放多个span，用来布局 -->
-
文本格式化标签
-
<b></b>和<strong></strong>- 文字以粗体显示
-
<i></i>和<em></em>- 文字以斜体显示
-
<s></s>和<del></del>- 文字以加删除线显示 -
<u></u>和<ins></ins>- 文字以加下划线显示
-
图像标签
<img src="图像url" />-
src
属性值为URL，是图像的路径
-
alt
属性值为文本，是图像不能显示时的替换文本
-
title
属性值为文本，时 鼠标悬停时显示的内容
-
width
属性值是像素，是设置图像的宽度
-
height
属性值是像素，是设置图像的高度
-
border
属性值是数字，是设置图像边框的宽度
-
-
链接标签
- 语法格式为
-
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
href属性用于指定链接目标的url地址，是必须属性，当为标签应用href属性时，它就具有了超链接的功能
target用于指定链接页面的打开方式，其取值有 _sel f和 _blank 两种，self为默认值，blank为在新窗口打开
“#”代表空链接
- 注释标签
<!-- 内容-->
- 路径
- 相对路径
- 以引用文件之网页所在位置为参考基础，而建立出的目录路径
- 同一级路径
- 直接写图像的名字即可
- 上一级路径
- 需要 ../ 表示上一级图像所在位置
- 下一级路径
- 需要 / 分隔表示下一级图像所在位置
- 绝对路径
- 不提倡，需要电脑的绝对的网络地址
-
HTML其他标签
-
锚点定位
-
通过创建锚点链接，用户能够快速定位到目标内容
-
创建锚点链接的步骤
- 1.使用相应的id名标注跳转目标的位置
<h3 id="two">第二集</h3> - 2.使用
<a href="#id名">链接文本</a>创建链接文本（被点击的）
- 1.使用相应的id名标注跳转目标的位置
-
-
base标签
- 语法为
<base target="_blank" />；放在标签中 - 可以设置整体链接的打开状态，把所有的链接都默认添加target=“_blank"
- 语法为
-
预格式化文本pre标签
-
标签可定义预格式化的文本
- 被包围在
标签元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体
- 由于不便整体控制，因而不推荐使用
-
-
-
特殊字符
-
一些特殊的字符，我们不便在HTML内直接使用，此时可以使用其替代代码
-
(此处为空格)
-
空格符
-  
-
-
<
-
小于号
- <
-
-
-
大于号
- >
-
-
&
-
和号
- &
-
-
￥
-
人民币
- ¥
-
-
-
乘号
- ×
-
-
······
-
表格
-
创建表格
- 基本语法
<table>
<tr>
<td>单元格内的文字1</td>
......
</tr>
<tr>
<td>单元格内的文字2</td>
......
</tr>
</table>
-
一个完整的表格有表格标签（table）、行标签（tr）、单元格标签（td）组成，没有列标签
- 中只能嵌套的单元格
- 表格的目的主要是用来显示特殊数据的
- 表头单元格
<th></th>- 作用：一般表头单元格位于表格的第一行或第一列，且文本加粗居中
- 语法：只需用表头标签替代相应的单元格标签即可
-
表格属性
-
border
-
设置表格的边框（默认border=“0”，无边框）
- 属性值为像素值
-
-
cellspacing
-
设置单元格与单元格边框之间的空白间距
- 属性值为像素值（默认2像素）
-
-
cellpadding
-
设置单元格内容与单元格边框之间的空白间距
- 属性值为像素值（默认1像素）
-
-
width
-
设置表格的宽度
- 属性值为像素值
-
-
height
-
设置表格的高度
- 属性值为像素值
-
-
align
-
设置表格在网页中的水平对齐方式
- 属性值为left、center、right
-
-
-
表格标题标签caption
- 定义和用法
<table>
<caption>我是表格标题</caption>
</table>
- 注意
- 1.caption元素定义表格标题，通常这个标题会被居中且显示于表格之上
- 2.caption标签必须紧随table标签之后
- 3.这个标签只存在于表格里面才有意义
-
合并单元格
-
合并单元格的两种方式
-
跨行合并
- rowspan=“合并单元格的个数”
-
跨列合并
- colspan=“合并单元格的个数”
-
-
合并单元格的顺序
- 合并的顺序按照 先上后下、先左后右 的顺序
-
合并单元格三部曲
- 1.先确定是跨行还是跨列
- 2.根据先上后下、先左后右的原则找到目标单元格，然后写上合并方式，以及合并的单元格的数量，如：
<td colspan="3"></td> - 3.删除多余 的单元格
-
-
表格划分结构
-
题头
<thead></thead>- 用于定义表格 的头部，用来放标题之类的东西，其内部必须有标签
-
正文
<tbody></tbody>- 用于定义表格的主体，放数据本体
-
脚注
<tfoot></tfoot>- 用于放表格的脚注之类
-
列表和表单标签
一.列表标签
-
概念
- 容器里装载着结构、样式一致的文字或图表的一种形式，叫列表，其特点是整齐有序，和表格类似，但组合自由度高
-
无序列表ul
- 无序列表的各个列表项无顺序之分，并列关系
- 语法结构
<ul>
<li>列表项1</li>
<li>列表项2</li>
......
</ul>
<ul></ul>中只能嵌套<li></li>；<li></li>之间相当于一个容器，可以容纳所有元素；自身带有样式属性，一般让CSS处理
-
有序列表ol
-
有序列表为有排列顺序的列表，应用比ul少很多
-
语法格式
-
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
<ol>
- 自定义列表
-
定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号
-
语法格式
-
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
......
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
......
</dl>
二. 表单标签
- 目标：1.能写出最常用的注册类表单；2.能说出input表单常见属性
- 目的：收集用户信息
- 表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等；提示信息：一个表单中还需要包含一些说明性的文字，提示用户进行填写和操作；表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过它定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。
- input控件
- 语法：
<input type="属性值" value=“xxx”> - 控件常用属性
- 语法：
- type
| 属性值 | 描述 |
|---|---|
| text | 单行文本输入框 |
| password | 密码输入框 |
| radio | 单选按钮 |
| checkbox | 复选框 |
| button | 普通按钮 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| image | 图像形式的提交按钮 |
| file | 文件域 |
-
name
由用户自定义控件的名称
主要作用是用于区别不同的表单
学习ajax和后台的时候是必须的 -
value
由用户自定义 input控件中的默认文本值
<input type="text" name="username" value="请输入用户名">value默认的文本值为 打开页面后默认显示的文字 -
size
正整数, input控件在页面中的显示宽度 -
checked
定义选择控件默认被选中的项 表示默认选中状态 -
maxlength
正整数
控件允许输入的最多字符数
-
label标签
- 目的是为了提高用户体验，label标签为input标签定义标注，其作用是用于绑定一个表单元素，当点击label元素的时候，被绑定的表单元素就会获得输入焦点
- 绑定元素
- 第一种法是用label直接包括input表单：
- 第二种用法是for属性规定label于哪个表单元素绑定
<label for="sex">男< /label>
<input type="radio" name="sex" id="sex">
- textarea控件（文本域）
- 语法：文本内容
- 作用：通过textarea控件可以轻松创建多行文本输入框；cols=“每行中的字符数” rows=“显示 的行数” ，实际开发不用
- select下拉列表
- 语法格式
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
select标签中至少包含一对option
在option中定义select="selected"时，当前选项即为默认选中项
-
form表单域
- 目的：在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器
- 语法格式
<form action="url地址" method=“提交方式” name="表单名称">
各种表单控件
</form>
- 常用属性
| action | url地址, 用于指定接受并处理表单数据的服务器程序的url地址 |
|---|---|
| method | get/post, 用于设置表单数据的提交方式，其取值为get或post |
| name | 名称, 用于指定表单的名称，以区分同一个页面中的多个表单 |
CSS
css样式表书写位置
-
行内式（内联样式）
其基本语法格式如下：
<标签名 style=“属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”> 内容 </标签名> -
内部样式表（内嵌样式表）
其基本语法格式如下：
<head>
<style type="text/CSS">
选择器（选择的标签） {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</style>
</head>
/*---------分隔符---------*/
<style>
div {
color: red;
font-size: 12px;
}
</style>
-
外部样式表（外链式）
其基本语法格式如下：
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中
CSS选择器
-
作用：找到特定的HTML元素
-
基础选择器
- 标签选择器
其基本语法格式如下：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签选择器 可以把某一类标签全部选择出来，是能快速为页面中同类型的标签统一样式
- 类选择器
其基本语法格式如下：
类名选择器
.类名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
标签
<p class='类名'></p>
可以为元素对象定义单独或相同的样式，可以选择一个或者多个标签
类选择器特殊用法- 多类名：
我们可以给标签指定多个类名，从而达到更多的选择目的。
-
id选择器
其基本语法格式如下：
id选择器
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签
<p id="id名"></p>
元素的id值是唯一的，只能对应于文档中某一个具体的元素。
- 通配符选择器
其基本语法格式如下：
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
就是 选择所有的标签 他是所有选择器中作用范围最广的，能匹配页面中所有的元素。
-
复合选择器
-
后代选择器
- 作用：用来选择元素或元素组的子孙后代
- 语法格式
-
/*-- 其写法就是把外层标签写在前面，内层标签写在后面，
中间用空格分隔，先写父亲爷爷，再写儿子孙子，如下：*/
.class h3 {
color:red;
font-size:16px;
}
注意：当标签发生嵌套时，内层标签就成为外层标签的后代。
-
子元素选择器
-
作用：子元素选择器只能选择作为某元素子元素(亲儿子)的元素。
-
语法格式
其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，如下：
-
.class>h3 {
color:red;
font-size:14px;
}
注意：这里的子指的是亲儿子，不包含孙子、重孙子之类。
-
交集选择器
- 条件：交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。
- 语法格式
h3.class {
color:red;
font-size:14px;
}
/*---其中第一个为标签选择器，第二个为class（类）选择器，
两个选择器之间不能有空格
相对来说比较少，不太建议使用 */
-
并集选择器
- 并集选择器（CSS选择器分组）是各个选择器通过
,连接而成的，通常用于集体声明。 - 语法格式
- 并集选择器（CSS选择器分组）是各个选择器通过
.class,h3 {
color:red;
font-size:14px;
}
注意：并集选择器通常用于集体声明 ，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为 和的意思。
-
链接伪类选择器
- 作用：用于向某些选择器添加特殊的效果
- 语法格式
a:link /* 未访问的链接 */
a:visited /* 已访问的链接 */
a:hover /* 鼠标移动到链接上 */
a:active /* 选定的链接 */
注意：写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序。否则可能引起错误。
CSS字体样式
-
font字体
-
font-size
-
作用：font-size属性用于设置字号
-
单位：可以使用相对长度单位，也可以使用绝对长度单位。
相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。谷歌浏览器默认的文字大小为16px;
尽量给一个明确值大小，不要默认大小。一般给body指定整个页面文字的大小
-
-
font-family
-
作用：font-family属性用于设置哪一种字体。
- 各种字体之间必须使用英文状态下的逗号隔开。
- 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
- 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;。
- 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
-
p { font-family: Arial,“Microsoft Yahei”, “微软雅黑”;}
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体， 如果都没有，则以我们电脑默认的字体为准。
-
CSS Unicode字体
1.在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。
2.font-family: “\5FAE\8F6F\96C5\9ED1”; 表示设置字体为“微软雅黑”。
3.字体名称英文名称Unicode 编码
宋体–SimSun–\5B8B\4F53
新宋体–NSimSun–\65B0\5B8B\4F53
黑体–SimHei–\9ED1\4F53
微软雅黑–MicrosoftYaHei–\5FAE\8F6F\96C5\9ED1
楷体–_GB2312KaiTi_GB2312–\6977\4F53_GB2312
隶书–LiSu–\96B6\4E66
幼园–YouYuan–\5E7C\5706
华文细黑–STXihei–\534E\6587\7EC6\9ED1
细明体–MingLiU–\7EC6\660E\4F53
新细明–PMingLiU–\65B0\7EC6\660E\4F53
-
-
font-weight
- 作用：font-weight属性用于设置字体粗细
- 400 等同于 normal，而 700 等同于 bold
-
font-style
-
作用：font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，
在html中如何将字体倾斜我们可以用标签来实现
字体倾斜除了用 i 和 em 标签，
可以使用CSS 来实现，但是CSS 是没有语义的 -
属性值
- normal:默认值，浏览器会显示标准的字体样式 font-style: normal;
- italic:浏览器会显示斜体的字体样式。
-
-
font:综合设置字体样式
-
基本语法格式
- 选择器 { font: font-style font-weight font-size/line-height font-family;}
-
注意事项
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
-
-
CSS外观属性
-
color
-
作用：color属性用于定义文本的颜色
-
取值方式
- 预定义的颜色值：red，green，blue，还有我们的御用色 pink
- 十六进制：#FF0000，#FF6600，#29D794…
- RGB代码：rgb(255,0,0)或rgb(100%,0%,0%)
-
-
text-align
-
作用：text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性
-
可用属性值
- left
- right
- center
-
注意：是让盒子里面的内容水平居中， 而不是让盒子居中对齐
-
-
line-height
-
作用：line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。
-
单位：line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px
-
技巧：一般情况下，行距比字号大7.8像素左右就可以了（line-height: 24px;）
-
测量方法：顶线、中线、基线、底线，其中基线和基线的距离为行高
-
注意：文字的行高等于盒子的高度可以让单行文本在盒子中垂直居中对齐。
-
行高与高度的关系
行高和高度的三种关系
如果 行高 等 高度 文字会 垂直居中
如果行高 大于 高度 文字会 偏下
如果行高小于高度 文字会 偏上
-
-
text-indent
- 作用：text-indent属性用于设置首行文本的缩进
- 属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值,
- 建议使用em作为设置单位。
-
text-decoration
-
作用：text-decoration属性用于给链接修改装饰效果
-
属性值
- none：默认定义标准的文本，取消下划线（最常用）
- underline：定义文本下的一条线，下划线 也是我们链接自带的（常用）
- overline：定义文本上的一条线（不用）
- line-through：定义穿过文本下的一条线（不常用）
-
CSS背景background
-
背景颜色color
- background-color:颜色值; 默认的值是 transparent 透明的
-
背景图片image
-
background-image : none | url (url)
背景图片后面的地址，url不要加引号。
-
-
背景平铺repeat
-
background-repeat : repeat | no-repeat | repeat-x | repeat-y
repeat背景图像在纵向和横向上平铺（默认的）
no-repeat背景图像不平铺
repeat-x背景图像在横向上平铺
repeat-y背景图像在纵向平铺
-
-
背景位置position
-
background-position : length || length
background-position : position || position
length：百分数 | 由浮点数字和单位标识符组成的长度值
position：top | center | bottom | left | center | right 方位名词
注意
1. 必须先指定background-image属性
2. position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
3. 如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
4. 如果只指定了一个方位名词，另一个值默认居中对齐。
5. 如果position 后面是精确坐标， 那么第一个，肯定是 x 第二的一定是y
6. 如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
7. 如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标 -
-
背景附着attachment
-
语法格式
background-attachment : scroll | fixed
-
scroll：背景图像是随对象内容滚动；fixed：背景图像固定
-
-
背景综合设置
-
基本语法格式
background: transparent url(image.jpg) repeat-y scroll center top ;
-
注意事项
background：属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：
background:
背景颜色 背景图片地址
背景平铺 背景滚动 背景位置;
-
-
背景透明CSS3
-
语法格式
background: rgba(0, 0, 0, 0.3);
-
注意
最后一个参数是alpha 透明度 取值范围 0~1之间
我们习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);
注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响
因为是CSS3 ，所以 低于 ie9 的版本是不支持的。
-
CSS三大特性
-
层叠性
-
概念
所谓层叠性是指多种CSS样式的叠加。
是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉 -
原则
样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
样式不冲突，不会层叠
-
-
继承性
-
概念
子标签会继承父标签的某些样式，如文本颜色和字号。
想要设置一个可继承的属性，只需将它应用于父元素即可。
简单的理解就是： 子承父业。 -
注意
恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。
子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
-
-
优先级
-
概念
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，
选择器相同，则执行层叠性
选择器不同，就会出现优先级的问题。 -
权重
- 权重计算公式
标签选择器 计算权重公式
继承或者* 0,0,0,0
每个元素（标签选择器）0,0,0,1
每个类，伪类 0,0,1,0
每个ID 0,1,0,0
每个行内样式 style="" 1,0,0,0
每个!important 重要的 ∞ 无穷大
值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）
div {
color: pink!important;
}- 权重叠加
数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。 - 继承的权重是0
- 权重计算公式
-
盒子模型
-
看透网页布局的本质
首先利用CSS设置好盒子的大小，然后摆放盒子的位置, 最后把网页元素比如文字图片等等，放入盒子里面。以上两步 就是网页布局的本质
-
盒子模型Box Model
- 盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。
- 盒子里面的文字和图片等元素是 内容区域
- 盒子的厚度 我们成为 盒子的边框
- 盒子内容与边框的距离是内边距（类似单元格的 cellpadding)
- 盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）
-
盒子边框border
-
语法
border : border-width || border-style || border-color
-
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位:px |
| border-style | 边框的样式 |
| border-color | 边框颜色 |
- 边框的样式
| none | 没有边框即忽略所有边框的宽度（默认值） |
|---|---|
| solid | 边框为单实线(最为常用的) |
| dashed | 边框为虚线 |
| dotted | 边框为点线 |
-
边框综合设置
border : border-width || border-style || border-color
没有顺序
-
盒子边框写法总结
-
上边框
border-top-style:样式; border-top-width:宽度; border-top-color:颜色; border-top:宽度 样式 颜色; -
下边框
border-bottom-style:样式; border- bottom-width:宽度; border- bottom-color:颜色; border-bottom:宽度 样式 颜色; -
左边框
border-left-style:样式; border-left-width:宽度; border-left-color:颜色; border-left:宽度 样式 颜色; -
右边框
border-right-style:样式; border-right-width:宽度; border-right-color:颜色; border-right:宽度 样式 颜色; -
表格的细线边框
- collapse 单词是合并的意思
- border-collapse:collapse; 表示相邻边框合并在一起。
- table，td { border-collapse:collapse; }
-
-
盒子内边距
-
padding属性用于设置内边距，是指边框与内容之间的距离。
属性 作用
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距 -
取值含义
值的个数 表达意思
1个值 padding：上下左右内边距;
2个值 padding: 上下内边距 左右内边距 ；
3个值 padding：上内边距 左右内边距 下内边距；
4个值 padding: 上内边距 右内边距 下内边距 左内边距 ； -
内盒尺寸大小
- 盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框 （不包括外边距！），所以内边距会撑大盒子
- 如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。
-
-
盒子外边距
-
margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离
-
设置
属性 作用
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下外边距 -
margin值的简写 （复合写法）代表意思 跟 padding 完全相同。
-
-
其他问题
-
块级盒子水平居中
可以让一个块级盒子实现水平居中必须：- 盒子必须指定了宽度（width）
- 然后就给左右的外边距都设置为auto。
实际工作中常用这种方式进行网页布局，示例代码如下：
.header{ width:960px; margin:0 auto;}
常见的写法，以下下三种都可以。
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
-
文字居中和盒子居中区别
- 盒子内的文字水平居中是 text-align: center, 而且还可以让 行内元素和行内块居中对齐
- 块级盒子水平居中 左右margin 改为 auto。
text-align: center;
文字行内元素 行内块元素水平居中
margin: 10px auto;
块级盒子水平居中 左右margin 改为 auto 就阔以了 上下margin都可以
-
插入图片和背景图片区别
- 插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin
- 背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position
-
img {
width: 200px;
/* 插入图片更改大小 width 和 height */
height: 210px;
margin-top: 30px;
/* 插入图片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px;
/* 插入当图片也是一个盒子 */
}
div {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-position: 30px 50px;
/* 背景图片更改位置 我用 background-position */
}
- 清除元素的默认内外边距(重要)
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
-
外边距合并
-
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
-
相邻块元素垂直外边距的合并
- 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom
- 下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和
- 取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
- 解决方案：尽量给只给一个盒子添加margin值。
-
嵌套块元素垂直外边距的合并（塌陷）
- 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
- 父元素的上外边距会与子元素的上外边距发生合并
- 合并后的外边距为两者中的较大者
- 解决方案：
- 可以为父元素定义上边框。
- 可以为父元素定义上内边距
- 可以为父元素添加overflow:hidden。
-
-
盒子模型布局稳定性
- 根据稳定性来分，建议如下： width > padding > margin
- 原因：
- margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。
- padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。
- width 没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做。
CSS布局（三种机制）
-
普通流（标准流）
块级元素会独占一行，从上向下顺序排列；
常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；
常用元素：span、a、i、em等 -
浮动
- 概念：元素的浮动是指设置了浮动属性的元素
-
脱离标准普通流的控制
-
移动到指定位置。
让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示；
行内块（inline-block）：
它可以实现多个元素一行显示，但是中间会有空白缝隙，不能实现盒子左右对齐-
作用
让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。
可以实现盒子的左右对齐等等…
浮动最早是用来控制图片，实现文字环绕图片的效果。 -
语法
-
选择器 { float: 属性值; }
属性值 描述
none 元素不浮动（默认值）
left 元素向左浮动
right 元素向右浮动
-
-
特点
- 加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。
- 加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。
- 浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙
- 浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐
-
应用
-
浮动和标准流的父盒子搭配
浮动是脱标的，会影响下面的标准流元素，此时，我们需要给浮动的元素添加一个标准流的父亲，这样，最大化的减小了对其他标准流的影响。
一个完整的网页，是 标准流 + 浮动 + 定位。
-
-
扩展
-
浮动元素与父盒子的关系
- 子盒子的浮动参照父盒子对齐
- 不会与父盒子的边框重叠，也不会超过父盒子的内边距
-
浮动元素与兄弟盒子的关系
在一个父级盒子中，如果前一个兄弟盒子是：
浮动的，那么当前盒子会与前一个盒子的顶部对齐；
普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。
浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。
-
-
清除浮动
-
作用
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
-
方法
在CSS中，clear属性用于清除浮动
-
额外标签法(隔墙法)
通过在浮动元素末尾添加一个空的标签例如
，或则其他标签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;
}
-
-
语法
-
选择器{clear:属性值;}
属性值 描述
left 不允许左侧有浮动元素（清除左侧浮动的影响）
right 不允许右侧有浮动元素（清除右侧浮动的影响）
both 同时清除左右两侧浮动的影响
-
-
清除浮动的时机
-
- 父级没高度
-
- 子盒子浮动了
-
- 影响下面布局了，我们就应该清除浮动了。
-
-
-
-
定位position
-
将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效
-
组成
-
定位 = 定位模式 + 边偏移
定位的盒子，是通过边偏移来移动位置的。
在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）
-
-
边偏移属性
-
描述
边偏移属性 示例 描述
toptop: 80px顶端偏移量，定义元素相对于其父元素上边线的距离。
bottombottom: 80px底部偏移量，定义元素相对于其父元素下边线的距离。
leftleft: 80px左侧偏移量，定义元素相对于其父元素左边线的距离。
rightright: 80px右侧偏移量，定义元素相对于其父元素右边线的距离
-
-
定位模式
-
语法
-
选择器 { position: 属性值; }
值 语义
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
-
-
静态定位(static)
静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none， 不要定位的时候用。
静态定位 按照标准流特性摆放位置，它没有边偏移。
静态定位在布局时我们几乎不用的 -
相对定位(relative)
相对定位的特点：（务必记住）
相对于 自己原来在标准流中位置来移动的
原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。 -
绝对定位(absolute)
绝对定位是元素以带有定位的父级元素来移动位置 （拼爹型）
完全脱标 —— 完全不占位置；
父元素没有定位，则以浏览器为准定位（Document 文档）。
父元素要有定位
将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。-
特点
绝对定位的特点：（务必记住）
绝对是以带有定位的父级元素来移动位置 （拼爹型） 如果父级都没有定位，则以浏览器文档为准移动位置
不保留原来的位置，完全是脱标的。 -
定位口诀
- 子绝父相：子级是绝对定位，父级要用相对定位。
-
-
固定定位(fixed)
-
特点
固定定位是绝对定位的一种特殊形式： （认死理型） 如果说绝对定位是一个矩形 那么 固定定位就类似于正方形
完全脱标 —— 完全不占位置；
只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；
跟父元素没有任何关系；单独使用的
不随滚动条滚动。
-
-
-
扩展
-
绝对定位的盒子居中
-
注意：绝对定位/固定定位的盒子不能通过设置
margin: auto设置水平居中。 -
方法
使用绝对定位时要想实现水平居中，可以按照下图的方法：
left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；
margin-left: -100px;：让盒子向左移动自身宽度的一半。
-
-
堆叠顺序（z-index）
-
使用
在使用定位布局时，可能会出现盒子重叠的情况。
加了定位的盒子，默认后来者居上， 后面的盒子会压住前面的盒子。
应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。 -
特点
z-index 的特性如下：
属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
如果属性值相同，则按照书写顺序，后来居上；
数字后面不能加单位。
注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。
-
-
定位改变display属性
-
注意事项
display 是 显示模式， 可以改变显示模式有以下方式:
可以用inline-block 转换为行内块
可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。
所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。 -
注意2
浮动元素、绝对定位(固定定位)的元素都不会触发外边距合并的问题。
（我们以前是用padding border overflow解决的）
也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。
-
-
圆角矩形设置4个角
-
语法
- border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px; - border-radius: 左上角 右上角 右下角 左下角;
- border-top-left-radius:20px;
-
-
-
-
布局总结
一个完整的网页，有标准流 、 浮动 、 定位 一起完成布局的。每个都有自己的专门用法。
1). 标准流
可以让盒子上下排列 或者 左右排列的
2). 浮动
可以让多个块级元素一行显示 或者 左右对齐盒子 浮动的盒子就是按照顺序左右排列
3). 定位
定位最大的特点是有层叠的概念，就是可以让多个盒子 前后 叠压来显示。 但是每个盒子需要测量数值。
标签显示模式display
-
概念
- 标签显示模式：标签以什么方式进行显示
- 标签的分类：HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。
-
块元素block-level
-
常见的块元素
常见的块元素有
~
、
、
、-
、
- 、
- 等，其中
标签是最典型的块元素。
-
、
-
特点
块级元素的特点
（1）比较霸道，自己独占一行
（2）高度，宽度、外边距以及内边距都可以控制。
（3）宽度默认是容器（父级宽度）的100%
（4）是一个容器及盒子，里面可以放行内或者块级元素。 -
注意
只有 文字才 能组成段落 因此 p 里面不能放块级元素，特别是 p 不能放div
同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
-
-
行内元素line-level
-
常见的行内元素
常见的行内元素有、、、、、
、、、等，其中标签最典型的行内元素。有的地方也成内联元素、 -
特点
（1）相邻行内元素在一行上，一行可以显示多个。
（2）高、宽直接设置是无效的。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。 -
注意
链接里面不能再放链接。
特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。
-
-
行内块元素inline-block
-
在行内元素中有几个特殊的标签——、、，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素
-
特点
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。
-
CSS高级技巧
-
元素的显示与隐藏
-
display 显示（重点）
-
display 设置或检索对象是否及如何显示
display: none 隐藏对象
display：block 除了转换为块级元素之外，同时还有显示元素的意思。
-
特点
- 隐藏之后，不再保留位置。
配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
-
-
visibility 可见性 (了解)
-
设置或检索是否显示对象。
visibility：visible ; 对象可视
visibility：hidden; 对象隐藏
-
特点
- 隐藏之后，继续保留原有位置。
-
-
overflow 溢出(重点)
-
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
属性值 描述
visible 不剪切内容也不添加滚动条
hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll 不管超出内容否，总是显示滚动条
auto 超出自动显示滚动条，不超出不显示滚动条 -
实际开发场景
1.清除浮动
2.隐藏超出内容，隐藏掉, 不允许内容超过父盒子。
-
-
-
CSS用户界面样式
-
鼠标样式cursor
- 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
属性值 描述 default 小白 默认 pointer 小手 move 移动 text 文本 not-allowed 禁止-
效果示例
- 我是小白
- 我是小手
- 我是移动
- 我是文本
- 我是文本
-
轮廓线 outline
- 是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
- outline : outline-color ||outline-style || outline-width
但是我们都不关心可以设置多少，我们平时都是去掉的。
最直接的写法是 ： outline: 0; 或者 outline: none; -
防止拖拽文本域resize
-
-
vertical-align 垂直对齐
-
- 有宽度的块级元素居中对齐，是margin: 0 auto;
-
-
让文字居中对齐，是 text-align: center;
-
vertical-align 垂直对齐，它只针对于行内元素或者行内块元素
vertical-align : baseline |top |middle |bottom
注意：
vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，
特别是行内块元素， 通常用来控制图片/表单与文字的对齐。 -
图片、表单和文字对齐
默认的图片会和文字基线对齐。
-
去除图片底侧空白缝隙
-
原因
- 原因：图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。
就是图片底侧会有一个空白缝隙。
- 原因：图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。
-
方法
- 解决的方法就是：
给img vertical-align:middle | top| bottom等等， 让图片不要和基线对齐。
- 解决的方法就是：
-
-
-
溢出的文字省略号显示
-
white-space
-
white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容
white-space:normal ；默认处理方式
white-space:nowrap ； 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。
-
-
text-overflow 文字溢出
-
设置或检索是否使用一个省略标记（…）标示对象内文本的溢出
text-overflow : clip ；不显示省略标记（…），而是简单的裁切
text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（…）
一定要首先强制一行内显示，再次和overflow属性 搭配使用
-
-
总结三步曲
- /1. 先强制一行内显示文本/
white-space: nowrap;
/2. 超出的部分隐藏/
overflow: hidden;
/3. 文字用省略号替代超出的部分/
text-overflow: ellipsis;
- /1. 先强制一行内显示文本/
-
-
CSS精灵技术（sprite)
一张大图中包含很多需要使用的小图
-
目的
- 为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。
-
对象
-
css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的。
精确测量，每个小背景图片的大小和 位置。
给盒子指定小背景图片时， 背景定位基本都是 负值。
我们需要使用CSS的
background-image、
background-repeat
background-position属性进行背景定位，
其中最关键的是使用background-position 属性精确地定位。
-
-
一般都由美工制作精灵图
-
-
滑动门
-
核心技术
- 核心技术就是利用CSS精灵（主要是背景位置）和 盒子padding撑开宽度, 以便能适应不同字数的导航栏。
-
一般的经典布局
HTML
- 导航栏内容
CSS
-
{
padding:0;
margin:0;}
body{
background: url(images/wx.jpg) repeat-x;
}
.father {
padding-top:20px;
}
li {
padding-left: 16px;
height: 33px;
float: left;
line-height: 33px;
margin:0 10px;
background: url(./images/to.png) no-repeat left ;
}
a {
padding-right: 16px;
height: 33px;
display: inline-block;
color:#fff;
background: url(./images/to.png) no-repeat right ;
text-decoration: none;
}
li:hover,
li:hover a {
background-image:url(./images/ao.png);
}
-
-
-
总结
总结：
a 设置 背景左侧，padding撑开合适宽度。
span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。
之所以a包含span就是因为 整个导航都是可以点击的。
-
拓展
-
margin负值之美
-
负边距+定位：水平垂直居中
一个绝对定位的盒子， 利用 父级盒子的 50%， 然后 往左(上) 走 自己宽度的一半 ，可以实现盒子水平垂直居中。
-
压住盒子相邻边框
-
-
CSS三角形之美
-
示例程序
div {
width: 0;
height: 0;
line-height:0；
font-size: 0;
border-top: 10px solid red;border-right: 10px solid green;
border-bottom: 10px solid blue;
border-left: 10px solid #000;
}
-
做法
我们用css 边框可以模拟三角效果
宽度高度为0
我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;
-
-
实践项目细则
常见图片格式
- jpg图像格式：
JPEG（.JPG）对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式的 - gif图像格式：
GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果 - png图像格式
是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景 - PSD图像格式
PSD格式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计草稿。
PS切图
PS切图 可以 分为 利用切片工具切图 以及 利用PS的插件快速切图。
CSS属性书写顺序
布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …XMind: ZEN - Trial Version
- jpg图像格式：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
