前端学习笔记
1.学习方法
编程来源于生活
学会偷懒解决问题
遇到问题解决问题
别人怎么做，我就怎么做
2.学习难度：
HTML就跟学认数字一样
CSS就像看图说话
JS就像老鹰捉小鸡
3.认识网页（web）
网页的元素有哪些：图片 文字 视频 音频 flash 按钮
4.Web标准 Web标准就是做网页的规范：主要包括三部分： 结构 表现 行为
4.1结构
结构就是我们的HTML： HTML是我们网页的内容：文字+图片
4.2表现
表现就是美化网页的，将文字和图片处理的好看。改变颜色、大小，位置。
4.3行为
行为就是网页上的动画效果。常见的有图片的切换，鼠标操作。
5.认识浏览器
浏览器类型有很多种： 做网页开发，至少得装火狐和谷歌。这两个浏览器运行没问题，可以保证绝大多数浏览器能正常浏览。
6.开发工具
工欲善其事必先利其器。
Dreamweaver(DW) 记事本 sublime HBulider
7.DW基本设置
打开DW，并打开首选参数(Ctrl+U): 设置代码字体大小
设置代码补全提示：
选择代码视图：
使用浏览器运行网页：快捷键F12
如果window窗体没有工具菜单，按住alt键，然后选择工具-> 文件夹选项
取消勾选
8.HTML简介
HTML全称： 超文本标记语言。
解释： 带有特殊标记的文本，超表示超链接。
这些特殊的标记也可以称之为标签。
特殊标记：就是<英文> 然后它就有特殊的含义
<strong></strong> 可以让中间的内容加粗
/表示闭合标签。
恭喜大家，HTML代码就学会。
步骤1：写一个代码标签的文本
步骤2：将文件的后缀名修改为html
步骤3：双击用浏览器代码
将<strong></strong>翻译为加粗效果，作用在它中间的文字上。
总结： 语言的本质都是翻译。代码也不例外。
翻译需要有对应的意思：hello 你好 one 一 two 二
代码： strong 加粗 h1 标题1
学HTML其实就是学标签（认识就行了）。
9.HTML骨架
HTML骨架就是告诉浏览器我是一个网页。
DOCTYPE: 表示文档类型，也就是网页的类型
<html> 表示网页的根节点。
<meta> 表示网页的描述信息，也就是网页的简介。
<title> 表示网页的标题，也就是网页的名字
<head> 表示网页的头部信息。
<body> 表示网页的内容信息。
在写网页代码的时候，写错有时候也能正确显示。但是这是不可控的，要遵守规范。
要在网页上显示内容，必须将HTML结构写在body中，这样内容才能够正确显示到网页上。
Charset: char 表示字符 set表示集合 简称字符集 设置网页的编码。
编码： UTF-8 （国际编码） 简体中文 GB2312 简繁体中文 big5 繁体
网页的类型：html5 html4 html3 html2 html1
Html4进行了语法规范 比如：基本骨架一定要有，标签必须闭合，区分大小写
Html4.0.1 建议写标准的规范，但是也能够容忍小的规范。 HTML过渡类型，XHTML
W3C： 万维网联盟，主要负责制定网页技术的规范。
不该记的不记，不想记的也不记。老师说的要练的，一定要练。
10.HTML常用标签
学HTML就是认识标签。我们HTML早期是将报纸上的内容搬到网页上来。
10.1标题标签（h1-h6）
标题标签红h1到h6表示。 标签的格式用<>包裹
<h1><h1> 表示一级标题
<h2></h2> 表示二级标题
<h3></h3> 表示三级标题
…….
<h6></h6> 表示六级标题
学习的时候，犯错误时理所当然的，不犯错误才不正常。
Bug: 错误漏洞，小虫子，甲壳虫
10.2段落标签(p)
表示一段文字：用段落标签
<p> 我是一段文字</p>
10.3 换行标签(br)
<br/> 表示换一行，可以写多个
/ 最好写上。
10.4 水平线标签(hr)
<hr /> 表示一条水平线。
10.5 注释标签
<!--我是注释的内容--> 前后两个横岗，最开始一个感叹号
10.6标签的种类
比如： p标签 <p>我是段落</p> 双标签（双标记）
换行标签 <br /> 单标签(单标记)
在我们的HTML中绝大多数标签是双标签。
环绕标签： ctrl+T
11.几对文字标签
加粗效果： <strong></strong> <b></b>
斜体效果： <em></em> <i></i>
下划线效果： <ins></ins> <u></u>
删除线： <del></del> <s></s>
标签的语义化：让搜索引擎更好的理解，这个标签的内容很重要。
12.插入图标签
一图胜千言。
<img src=”图片的路径”/>
12.1属性的写法
宽度 200
高度 200
边框 5
Width=”200”
Height=”200”
Border=”5”
属性=值
这种写法叫键值对。
12.2 图片的常用属性
图像标签的常用属性
src 图片的地址 source
width 宽度 宽高只需要设置其中一个即可，另外一个等比例缩放
heigth 高度
title 设置图片的名字，鼠标移动上去显示出来
alt 提示文本 在网页不显示的时候提示
border 设置图片的边框
13.路径（找图片）
路径：就是图片的位置。
13.1同级相对路径
如果图片和网页文件在同一个文件夹下，直接使用图片的名字找到图片。
13.2下一级相对路径
例如： 小明在教室外面，小王在教室里面，小明要找小王，
进入到教室里面，然后叫小王的名字。
/ 表示下一级目录
13.3上一级相对路径
上一级目录用： ../
13.4绝对路径
绝对路径就是绝对不会变的地址。
一般有两个：
本地磁盘的地址C:\Users\itcast_UI\Desktop\HTML第一天\资料\mao.jpg
网络上的图片地址：
https://img.alicdn.com/tps/i2/TB1bNE7LFXXXXaOXFXXwFSA1XXX-292-116.png_145x145.jpg
14.body的属性
Bgcolor 设置背景颜色
Background 设置背景图片
背景图片在背景颜色的上面。
15.总结
16.HTML标签汇总
HTML标签
标签名称 作用 其他
h1 h2 h3 h4 h5 h6 标题
p 段落
hr标签 水平线 单标签
br标签 换行 单标签
u strong 字体加粗
I em 字体斜体
u ins 下划线
s del 删除线
img 图片标签 Src属性写图片地址
Width =”100”
Height=”100”
Title=”提示文本”
Alt=”替换文本”
Border=”1”
注意：所有的标签都是小写，并且所有符号都是英文下的符号。
17.错误原因：
1.单词写错误了
2.中英文字符不对
HTML笔记第二天
1.复习
1.web标准： 结构（html） 表现（css） 行为（JS）
2.HTML的基本骨架 html head title body meta
3.HTML的常用标签: h1 标题 p段落 br换行 strong 加粗 em 斜体
4.图片标签: <img src=”图片的地址” /> 注意：是ｓｒｃ 不是 scr
5.相对路径： 就是图片的位置 上一级目录 ../ 下一级 /
6.Body的属性： 背景颜色bgcolor 背景图片background
2.链接(a)
网页上的跳转在变成中叫链接。链接在网页中必须存在。
2.1链接的基本使用
<a href=”跳转的地址”>添加跳转的内容</a>
链接和其他标签是共生关系。
Href表示跳转的地址，必须存在。
工作中常用链接有三种： 文字链接，图片链接， 空链接
在本地电脑上： 自己的网页之间也可以跳转，还可以跳转到图片。
2.2锚点链接(跳转到自己身上)
锚点是一个链接。
<a href=”#mao”>我是一个锚点</a>
在页面上找一个带有mao这个名字的标签。Id取的名字。
<p id=”mao”>我是顶部</p>
如果页面的高度不大一一屏，跳转看不到效果。
2.3图片热点
图片热点就是在一张图上加多个链接。
第一步：在body中添加一个图片
第二步: 选择设计视图，然后点击图片，找到属性窗口，找到选取按钮
第三步：点击选取，在图片上选择区域，然后添加链接，保存。
热点图片的使用方法：
<img> 中的 usemap 属性可引用 <map> 中的 id 或 name 属性（由浏览器决定），所以我们需要同时向 <map> 添加 id 和 name 两个属性
新建一个html页面，在body里面插入如下代码：<a href="#"><img src="test.jpg" ismap="ismap"></a>
注意这个“ismap=’ismap‘”，有了这个属性后，然后打开这个html页面，把光标移到图片上任意位置，网页的左下角状态栏会显示当前坐标值
area的三个属性：
shape：
rect(矩形)：coords的四个数值分明别表示左上角、右下角两个点横纵坐标，单位为像素。
circle(圆形)：coords的三个数值分明别表示圆心横纵坐标及半径，单位为像素。
poly(多边形)：coords的多个数值分别表示各个顶点的横纵坐标，单位为像素。
3.列表（10-100）
列表是用来处理大量数据的。
列表分为三种类型： 无序列表，有序列表和自定义列表
3.1无序列表(ul)
无序列表示使用的ul标签
li表示列表中的每一项
语法格式如下：
<ul>
<li>我是第一项</li>
<li>我是第二项</li>
</ul>
3.2有序列表(ol)
有序列表的使用跟无序列表一样，只是前面不是原点，而是编号。
3.3自定义列表（可以任意多列）
自定义列表是可以有多列的。
列表区域：用dl表示
每一列的标题： 用dt表示
列表中的每一项： 用dd表示
4.特殊字符
在HTML中经常要用到空格，但是浏览器只认识一个空格， 
特殊字符 描述 字符的代码
? 空格符
<? 小于号 <
>? 大于号 >
& 和号 &
￥ 人民币 ¥
? 版权 ©
? 注册商标 ®
° 摄氏度 °
± 正负号 ±
× 乘号 ×
÷ 除号 ÷
2 平方2（上标2） ²
3 立方3（上标3） ³
5.表格（100）
表格是一组数据的集合。
5.1 表格的基本结构
table表示表格
tr 表示表格中的一行
td 表示表格中的一个单元格
5.2表格的相关属性
表格的属性
名称 作用 其他
width 宽度 Table tr td 都可以
height 高度
border 边框
align 内容水平对齐方式 left right center
bgcolor 背景颜色
background 背景图片
Cellspacing 单元格与单元格之间的距离
Cellpadding 单元格与内容之间的距离
Valign 内容垂直方向对齐方式 Top middle bottom
colspan 跨列
Rowspan 跨行
5.3 用DW快捷键画表格
1.创建表格的快捷键：ctrl+ alt + T 输入几行几列
2.点击设计视图，然后选择表格，在下方的属性面板中进行操作
6表单 (写信)
表单就是提交数据给后台的标签。表单主要包括三部分： 表单域，表单元素，表单验证。
6.1表单域（信封）
要提交给后台的地址，以及提交方式。
<form action=”提交后台的地址”method=”表单提交的方式”> 表单的元素
</form>
提交后台的地址，如果没有的话写空（#）.
提交方式，有两种：get post get类似于顺丰 post 德邦物流，一般写get就可以了
在写网页阶段，是不需要提交数据给后台的，所以不写页可以。
6.2表单元素（信纸上的内容）
常用表单
元素 标签 说明
文本框 <input type=”text” name =”username”/> text表示文本, name表示文本框的名字(name值可以随便写)
密码框 <input type=”password” name=”password” password表示密码
单选按钮 <input type=”radio” name=”sex” /> Radio表示单选按钮,name表示按钮的名字（name名字要一致）
多选按钮 <input type=”checkbox” name=”check”/> Checkbox表示多选框,name也要一组
下拉框 <select>
<option>第一项</option>
<option>第一项</option>
</select> 默认选中，需要写selected=selected
文本域 <textarea></textarea> text是文本，
area是区域
cols=10 rows=”10”
按钮 <input type=”button” value=”注册”/> Value表示按钮的显示内容
按钮 <button>注册</button>
7.总结
CSS笔记第一天
1.复习
1.学HTML就是认识标签。
2.标题标签h1 段落标签p 换行标签br 水平线标签hr 加粗标签strong 斜体 em
3.Web标准 ： 结构 表现 行为
4.图片标签： <img src=””/> 宽width 高 height 边框border 提示文本title 替换文本 alt
5.路径：相对路径 同一文件夹直接写图片名字，上上一级文件夹 ../../ 下一级文件夹/
6.Body的 bgcolor 背景颜色 background 背景图片
第二 天
1.链接 a标签 <a href=”跳转的地址”>添加链接的内容</a>
2.链接的锚点： 在页面之内进行跳转 href属性等于 #锚点的名字 在任意标签中添加id=”锚点的名字”；
3.图片热点功能： 使用dw设计视图进行完成。
4.列表：无序列表（ul）、有序列表(ol)，自定义列表(dl)。
5.无序列表 ul li
6.有序列表 ol li
7.自定义列表 dl dt dd
8.表格标签： table tr td
9.表单元素： input type的类型有： text password radio checkbox submit file
2.学习方法
HTML就像认识数字。
CSS就是看图说话。看到什么效果，怎么用代码表示出来，这就是我们要学的CSS语言。
网页元素：文字、图片、链接 （列表、表格、表单）
学CSS其实就是改变文字的，大小，颜色，对齐方式、字体类型 、图片的大小、图片的边框、背景颜色、背景图片、层次、位置、盒子。
1.认识它
2.知道什么意思
3.怎么写？
4.怎么用？
当学习遇到困难的时候：
1.找会的人
2.百度
3.休息一下，暂时放过它
3.CSS简介
CSS: 层叠样式表（级联样式表）
CSS的作用： 美化页面结构。
4.CSS代码的位置
在HTML中写CSS样式，需要写在<style></style>标签中。Style标签，必须在title标签的下面和</head>之上。
5.CSS语法规范
选择所有的h1标签，给他们添加颜色为红色，字体大小为25px
选择器{属性名：属性的值； 属性名： 属性值；}
CSS基本就学会了。
6.实体化三属性
在HTML中，其实所有的标签都可以看做是一个盒子。
如果想让这个盒子能够看见，必须包括三个属性： 宽度 高度 背景颜色。这个盒子一定看的见。
<div></div> 标签：直接写的话没有任何效果。 给了宽高以后，div独占一行
<span></span> 标签：直接写的话没有任何效果。 没有宽高 可以在一行上有多个。
7.显示模式及模式转换
在现实生活中，根据资产的多少分为： 富人，穷人， 中产阶级。
那么在网页中我们有N多标签。 这些标签根据效果的不同也分为三类： 块级元素，行内元素，行内块元素。
区分条件有两个：
1.是否独占一行、
2.是否有宽高
7.1块级元素（富人）
块级元素的特点：
有宽高 并且独占一行。
常见的块级元素有： div p h1 ul li
7.2行内元素（穷人）
特点：
不会独占一行（可以与其他元素在一行上显示）
没有宽高
常见的行内元素： span strong em a标签
7.3行内块元素（中产阶级）
特点：
有宽高，但是不会独占一行。
常见的行内块元素有： img input
7.4.显示模式转换（display属性）
王侯将相宁有种乎？ 关键在于你是否努力。
Display属性可以让标签转换模式。
块级元素用block表示
行内元素用inline表示
行内块元素用inline-block表示
行内块元素在工作中用的是最多的。
8.基础选择器(找人)
在现实生活中，有很多人，那么我们要找某个人的话，有很多方法。
在代码中也是一样的， 通常我们的网页里面的标签有很多。，要想操作它们，必须先找到他们。
在CSS中找标签有很多种方法：其中比较常用的：标签选择器，类选择器，id选择器 通配符选择器。
8.1 标签选择器（根据性别找人）
标签选择器必须找已经存在的标签，而不是自己取的名字。
div p strong h1 table img
8.2 类选择器（根据名字找人class）
类选择器就是，我们自己取名字，将标签进行分类。
第一步：在CSS中取类的名字： 用点标识类 .one{ width:100px;}
第二步： 需要将类名添加到标签上 ，需要用class来标识 class=”one”
注意：第二步骤是最容易忘掉的。
注意：类选择器可以写多个，在CSS中有一个就近原则。
8.3 类选择器的命名（取名字）
正确的命名方法：
1.使用字母、数字、下划线或者横杠，数字不能开头，不能是中文，不能使用关键字
2.使用点+ 相应的样式效果描述，比如 .nav . header .footer
工作中常用的命名：
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
8.4 id选择器（根据身份证号找人）
Id选择器在页面只能有一个。可以重复，但是极其危险。
用法跟类选择器相似。只是标识不同：
第一步：定义一个id选择器的样式 ,用#标识， #one{width:100px;}
第二步： 给标签添加id=”one”
8.5 类选择器和id选择器的区别
1. 写法就不一样 类选择器 点+class id选择器用的是： #+id
2. 类选择器可以作用在多个标签上，id选择器不允许。
3. 类选择器和id选择器的权重不一样
8.5 通配符选择器（通知，找所有人 *）
在CSS中通配符选择器用的最多的只有一个 就是星号 * 表示所有的标签。
通常通配符选择器用来清除浏览器默认样式。
*{margin:0; padding:0; list-style:none;}
还可以用来做测试： *{width:100px; height:100px; background:red;}
9. CSS代码的三种书写方式
CSS并不是一门独立的语言，必须添加到HTML上面才有效果。
现实生活中，根据钱的多少，我们会选择放在不同的地方。钱包，支付宝 ，银行卡
9.1 内嵌样式表（支付宝）
当CSS代码量中等的时候，我们选择使用内嵌样式表。
9.2 行内样式表（钱包）
行内样式表，就是代码量非常少的效果，直接写在HTML标签上。但是必须style属性。
在工作中，行内样式表用的比较少。
9.3 外部样式表（银行）
外部样式表就是将所有的CSS代码放到另外一个文件中。，然后在HTML中引用这个样式文件。引用语法格式：
<link type=”text/css”rel=”stylesheet”href=”样式表的名字”/>
第一步：创建HTML代码
第二步：创建CSS文件
第三步：在HTML代码的head结束标签上面引入CSS样式表（link）。
10.基础选择器的权重
标签选择器 < 类选择器 < id选择器
10 100 1000
权重就是权力的大小，位高权重。
同样权重的情况下，遵循就近原则。权力不同的时候，不遵循。
权重虚拟的概念，但是权重是可以叠加的。
11.总结
1.语法： CSS的位置，CSS的语法: 选择器{ 属性名：属性值; 属性名：属性值;}
2.实体化三属性： 宽高 背景颜色
3.标签的类型： 块级元素 行内元素 行内块元素
4.标签的类型之间可以进行转换： display属性，值有三种： block inline inline-block
5.基础选择器： 标签选择器 类选择器 id选择器 通配符选择器
6.CSS样式的三种书写方式： 行内样式 内嵌样式 外部样式。
7.基础选择器的权重： id选择器 > 类选择器 > 标签选择器
CSS排错方法：
/*现象：审查元素没有样式*/
/* 1.样式名字写错了
2.排除法：删除干扰元素或者是注释不相关的代码
3.重写样式，
4.重新创建一个页面
5.对比个别标签*/
浏览器兼容、比如软件重启、系统重启
CSS笔记第二天
1.复习
没有对象，能嫁人？ 没有学基础知识，能写网页？ 那你们急个啥？
THML就是认识标签， 也就是认数字。
CSS就是看到的效果， 看图说话。
将我们所有看到的东西转换成代码。
这世界上本没有困难，只是你从来没有真正努力过。
1.选择器
2.显示模式
3.CSS的三种写法。
2.复合选择器
选择器的唯一目的就是找标签。
复合选择器就是基础选择器的组合。
基础选择器： 标签选择器 类选择器 id选择器
2.1标签指定式选择器(即..又..)
标签.类名{ 属性：属性值;}
p.one{ color:red;}
必须是这个标签，并且这个标签还有这个类。
找所有的p标签，让他们之中有one这个类的标签颜色为红色。
注意： 中间是没有空格的
2.2.后代选择器
后代：儿子 孙子 曾孙子
在CSS中，后代表示盒子的包裹关系。
选择器A 选择器B{属性:属性值；}
div strong{ color:red;}
表示： 选择器A下面的选择器B
表示：div下面的strong标签为红色。
2.3 并集选择器
在写CSS时候，可能会出现效果一模一样的标签。
选择器1,选择器2，选择器3{属性：属性值；}
div, p, h3{ color:red;}
表示 div 和p 和h3标签的颜色都为红色。
注意： 并集选择器中间用逗号分隔，可以有空格。
3.伪类(a链接的4种状态)
伪类： 可以实现类的效果，但是本质不是类。
:link 链接的正常状态
:hover 鼠标移上链接的状态（重点）
:active 鼠标按下链接的状态
:visited 链接被访问过的状态
伪类必须作用在其他标签上才有效果，用的最多的就是a标签。
A标签默认状态是蓝色的
注意：工作中hover效果用的是最多的，其他的可以忽略。
4.行高的基本使用
line-height:值
值可以是： 像素 20px
相对单位: 2em 200%
不带单位的数字： 2
必须掌握像素单位的写法。
口诀： 行高等于高度时，文字垂直方向居中。
注意： 行高不是一行的高度。
Text-align 表示水平方向居中（针对内容）
Line-height: 表示可以垂直方向居中
4.1行高的原理
行高：指的是基线之间的距离。
4.2行高的单位计算
浏览器默认的字体大小： 16px 最小字体12px 宋体
Line-height: 200px 表示行高就是200px
Line-height: 2em 表示以父亲的字体大小为参考
Line-height:2 表示以自己的字体大小为参考。
行高最终只是一个高度。只需要能够算出来实际的像素高度是多少
4.2行高会影响盒子的高度
当盒子没有高的时候，直接给行高，会将盒子撑开，并且类似于： 行高=高，也就是文字垂直方向居中。
行高不是高，效果一样，本质不一样。
5.层叠性
长江后浪推前浪，前浪死在沙滩上。
在我们的CSS中，有三大特性： 层叠性 继承性 优先级
层叠性：多个样式作用在一个标签上，会出现叠加，样式相同会覆盖。
6. 继承性
龙生龙凤生凤，老鼠的儿子会打洞。
在现实生活中，继承表示获得父辈财产。
在CSS中继承表示，子级标签，继承了父级标签的样式。
但是，不是所有的样式都能继承。
1.能继承的属性： 宽度 字体的大小 字体的颜色 行高（一般字体属性都可以）
2.不能继承的属性： 高度 浮动 定位
6.1 a标签的颜色不能继承（倔强的a标签）
在CSS中 a标签的颜色不能继承。所以在工作： a标签通常都需要单独去设置颜色。
7. 权重的优先级
标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
10 100 1000 10000 ∞
权重可以叠加，但是不能越级。
<style>
.one div{background: blue;}
.two{background: pink;}
</style>
<div class="one two"><div >我是文字内容</div></div>
权重叠加，.one和div的顺序不能反，如果写成div .one 就是定位到div的one类标签上，没有叠加权重
7.1 权重的计算
.one div 110
.one .two 200
div .one 110
div div 20
#one div 1010
注意：在CSS中，如果层级嵌套太多，找标签，建议写3层以内。
.one ,four
8 背景属性（background）
背景属性是设置背景颜色 背景图片 背景是否平铺 背景图的位置
background-color: red； //背景颜色
background-image: url(图片地址) //背景图片
background-repeat:不平铺 水平 垂直平铺
background-position：位置 //背景图的位置
background: url(yu.jpg) no-repeat red center center;
张三 的姓名
张三的年龄
张三的身高
张三的联系方式
个人信息：张三 18 168 12345678901
注意：背景图片都会平铺，如果小了，能看到，大了看不到而已。
注意： 背景图片的位置，必须用空格隔开
注意： 要显示背景图片必须有显示区域（要有宽高）
9.字体属性
字体也是复合属性：
Font-size：20px
font-weight: normal bold（粗）
Font-family: “微软雅黑” “宋体”
font-style: normal italic（斜体）
line-height: 200px;
字体粗细： 400 表示normal 700表示bold
字体颜色是color 设置
字体类型： 可以写中文，也可以英文 ，并且字体可以设置多个
注意： 我们的字体复合属性：严格遵守顺序。必须包括 字体大小和字体类型，而且顺序不能随意更换。
10.总结
层叠性 ，继承， 优先级 字体属性 背景属性
CSS笔记第三天
1.复习
编写网页实现思路：
1.看图说话
4个盒子 盒子上有文字 文字居中 垂直方向也居中 每个盒子背景不一样，每个盒子的宽高一样 字体的颜色白色
鼠标移上背景图片
2.选择合适的标签： 是一个链接
3.先实现结构，去掉HTML不需要的效果，让它变成我们想要的效果。
4.添加样式： 添加<style>标签 并且找到需要操作的 标签，然后加样式
5.辅助操作：添加背景颜色，找到理论支撑。
6.查漏补缺
通过理论支撑，找出错误，并寻找解决办法。
重点： 选择器： 标签指定式 后代选择器 并集选择器
层叠性
继承性
权重优先级
问题： 如何选择背景图和插入图？？
相同点： 两者都可以显示一张图
不同点：
1. 插入图本身就是一个标签， 背景图是一个样式，需要作用在其他标签上
2.插入图示结构，而背景图示一个样式
3. 背景图上可以放内容，而且背景图的标签需要有宽高
结论：喜欢用哪个就用哪个，效果能出现就行。
2.盒子模型基本概念
所有的元素都可以看做一个盒子。
其实写网页就是摆盒子的过程。
盒子模型主要包括三部分： 边框 内边距 外边距
3.边框(border)
边框的位置：是盒子的上下左右4条线
border: 边框的宽度 边框的类型 边框颜色；
border: 2px solid red;
表示：边框粗细2像素，线条类型为实线，线条颜色为红色。
边框的类型主要有三种： 实线（solid） 虚线(dashed) 点线（dotted）
边框可以分别设置任意一条边。
border-top: 1px solid red; //上边框
border-bottom: 1px solid red; //下边框
border-left: 1px solid red; //左边框
border-right:1px solid red; //右边框
4.内边距(padding)、
Padding的本质：就是控制文字距离盒子边缘的距离
1.必须知道内边距的位置在哪里？？
padding:值；
padding:20px;
表示内容距离盒子边缘上下左右都是20像素
padding:垂直方向 水平方向;
padding: 20px 50px;
表示内容距离盒子上下20像素 左右50像素
padding: 上 左右 下；
padding: 20px 50px 100px;
表示内容距离盒子 上20像素 左右50像素 下边 100像素
padding: 上 右 下 左;
padding: 20px 30px 40px 50px;
表示内容距离盒子上20像素，右30像素 下40像素 左 50像素。可以理解为顺指针方向。
padding-top: 30px； 设置上内边距30px；
padding-bottom:30px;
padding-left:30px；
padding-right:30px;
4.1padding会撑大盒子.
盒子实际看到的大小： 设置的宽高 + padding + border
结论： 内边距和边框会撑大盒子，一般我们会在宽高中减去其大小，保证盒子原来的大小不变。
4.2 继承的宽度不受padding影响
高度还是一样的撑开。
见怪不怪。
5.外边距(margin)
外边距：控制盒子之间的距离
内边距：控制盒子里面的距离
5.1外边距的基本用法
除了效果不一样外，使用方法完全一致。
margin:20px;
表示盒子外面的上下左右距离为20像素
margin: 垂直方向 水平方向；
margin: 20px 50px;
表示 盒子上下的外边距为20像素，左右的外边距为50像素
Margin: 上 左右 下；
margin: 20px 50px 100px;
表示盒子的上外边距 20像素 左右外边距50像素 下外边距100像素
margin: 上 右 下 左；
margin: 20px 30px 40px 50px;
表示： 盒子的上外边距20 右外边距30 下外边距40 左外边距50
margin-top: 30px;
margin-bottom: 30px;
margin-left:30px;
margin-right:30px;
表示盒子某一个方向上的外边距大小。
5.2同级外边距合并
同级外边距合并的现象只会出现在垂直方向，不会出现在水平方向。
当上面一个盒子的下外边距 为100px 下面一个盒子的上外边距为50px，最终他们之间的距离为，两者之间的最大值。
解决办法：避免这种写法。
5.3父子级外边距合并
父级盒子有一个上外边距，子级盒子也有一个上外边距，那么取两者之间的最大者。
父子级外边距合并的现象是： 塌陷。
解决办法:
给父盒子添加overflow:hidden;
Overflow在CSS中是一个神一样的存在。
6. 内容居中和盒子居中
Text-align:center; 内容水平方向居中
line-height: 高度； 内容垂直方向居中
margin:0 auto; 盒子水平方向居中
没有方法，目前只能margin-top移动
后面我们可以用定位来使盒子垂直方向居中。
注意： 让盒子居中，首先这个盒子必须有宽，margin:0 auto才会有效果。
7.清除浏览器默认样式
因为HTML标签本身自带一些特性。而这些特性在不同的浏览器上效果还不一样。所以为了保证在所有浏览器上看到的效果一样。清除浏览器的默认样式，全都自己写。
*{margin:0; padding:0; list-style:none; text-decoration:none;}
*号表示所有标签。
前期我们写效果的时候： *{margin:0; padding:0;}
8. firebug的安装和调试
打开firefox 点击附加组件
点击安装即可。
8 CSS常见属性
基本属性：
Width
Height
Color
Text-align:
背景属性：
Background 背景颜色 背景图片 背景位置 背景平铺
字体属性：
Font 字体大小 字体类型 字体粗细 字体种类 行高
方位属性：
内边距 外边距 浮动 定位
特殊属性：
A标签的下划线 a标签颜色
9.总结
在一个效果的步骤： 从大到小，从外到里，从上到下。
在CSS中，优先使用宽高 其次是 内边距 其次 外边距。 因为兼容性情况。
高度剩余法
CSS笔记第四天
1.复习
1.盒子模型： 边框(border) 内边距(padding) 外边距(margin)
2. 内边距：找到内边距的位置，什么时候用内边距，想让里面的内容有些距离
3. 外边距：找到外边距的位置，什么时候用外边距，盒子之间产生一个距离，可能会出现： 合并 塌陷。
4. 清除浏览器默认样式，做项目的时候必须要有。 *{margin:0; padding:0;}
1.观察效果：分析样式效果： 结构，样式
1盒子有多少个7+1
2 样式：从大到小，从外到里
大盒子：150 240 li 150 39 1下外边距
文字链接没有宽高
背景箭头是li
2．写结构标签： 先写盒子（一个个添加），再写内容
布局原则：外层盒子控制位置和大小，内层盒子控制颜色，边距
Background-image: 设置背景图片
Background-repeat: 背景平铺
Background-color: 背景颜色
Background-position: 背景图的位置
一般背景图片默认都会在左上角，默认都会平铺，所以在使用背景图片的时候，通常最少要三个样式，图片，位置，不平铺
Background:url() no-repeat center center;
如果要改背景效果：background:url(); 表示其他四个属性不要了
如果要改其中的某一个效果：
改背景图的位置： background-position: top center;
改背景的颜色： background-color: red;
改背景的图片： background-image:url(图片地址);
总结： background是一个复合属性，如果写一个表示其他几个全部不要。
2 overflow隐藏溢出
它是一个神一样的存在。
隐藏溢出：当子级元素超出父元素范围的时候，不显示。
作用： 为了保证盒子之间的独立，互不干扰。
overflow:hidden;
作用：
1.隐藏溢出
2.清除浮动
3.解决外边距塌陷
4.遇到问题，可以一试
3.标准文档流
这世界上本没有路 ，走的人多了也就成了路。
这世界上本没有标准流，只是有了浮动和定位，才给他取了个名字。
标准流是什么？
前面我们所写的都叫标准流。
标准流是原图。
特点： HTML+CSS自带的效果。 从上往下排列，块级独占一行，行内多个可以在一行显示。
非标准流： 浮动和定位
总结：浮动和定位是非标准流，其他的都是标准流。
4.浮动的基本使用
浮动解决了一个问题：
多个行内块之间会有一个缝隙。
使用行内块元素，经常会出现垂直方向无法移动或者不能对齐。
float:left; 左浮动
float:right； 右浮动
浮动的本质： 是一个新的图层，元素自动排列，左浮动：自动靠左排列，右浮动：自动靠右排列
5.浮动的作用
1.浮动可以让盒子在一行上显示。
2. 浮动的元素会漂浮起来，本质是一个新图层，所有浮动元素都在一个图层上
3.浮动会将元素自动转换为行内块效果。
经验： 一般如果大盒子里面有一个元素浮动，那最好，都浮动。
6.常见的网页布局
在进行一个网页布局的时候：
步骤1： 搭建盒子
步骤2： 添加内容
步骤3： 修改样式和解决问题。
经验：任何内容都需要在盒子中包裹，外层盒子负责位置，内层盒子负责效果。
在网页布局中： 每个版心的盒子需要单独写，不要一个网页代码全放一个盒子中了。
注意：
慎重使用标签选择器, 标签选择器跟类选择器一起使用
6.1上下布局
6.2上左右下布局
7. 清除浮动
在工作中：很多最外层盒子负责位置，高由内容撑开。
一般：宽度是要给的，但是高度可以不给
特殊现象：
当大盒子没有给高的时候，里面的元素都浮动了，大盒子高度为0；
解决问题： 子盒子都浮动了，导致父盒子没有高
解决办法：主要有三种： 给固定高度 overflow 伪元素清除浮动
7.1 固定高度
给父盒子添加固定高度高度：
优点： 方便，简单，好用 so easy
缺点： 影响性能 内容不能随意增加
7.2 overflow清除浮动（推荐）
给父盒子添加overflow:hidden;（因为是神一样的存在）
有点： 也很简单
缺点： 隐藏溢出，导致超出盒子的内容不显示
7.3 伪元素(clearFix)
其实CSS本身想了一个解决办法，提供了一个clear:可以清除浮动。但是它来晚了
clear:both;
在工作中，任何网页，清除浮动的代码都是一样。
.clearfix:after{
content:””;
display:block;
height:0;
line-height:0;
clear:both;
visibility:hidden;
}
.clearfix{ zoom:1;}
使用方法：在需要清除浮动的盒子上添加clearfix类
<div class=”clearfix”>我需要清除浮动</div>
这种方法：人工实现的，没有任何的副作用
优点：没有任何的副作用
缺点： 写的太多了，还好可以复制粘贴
8. 案例练习
1．搭盒子
2.加内容
3.加样式
顺序：从上到下，从左到右
在网页中logo一般都会添加一个h1标签包裹，来提高权重。
9.总结
浙公网安备 33010602011771号