黑马程序员技术交流社区

标题: ［持续更新］前端基础详细笔记大全！！！ [打印本页]
作者: 长沙-小知姐姐    时间: 2016-9-19 15:51
标题: ［持续更新］前端基础详细笔记大全！！！
免费视频教程：http://v.itcast.cn/course/88.html

HTML基础入门笔记
认识浏览器和服务器：什么是浏览器什么是服务器：
我们的认知：就是一个图标，可以双击打开，在地址栏中输入完内容之后会显示对应的页面。
我们看不到的内容：
当我们在浏览器的地址栏上面输入内容之后，浏览器会发送请求，到服务器，服务器接收并处理以后，将讲求的页面读取出来返回到浏览器，浏览器接收到响应回来的内容以后，浏览器的内核将内容渲染成一个完整的页面，并且显示出来。
什么是浏览器：
浏览器是指可以显示网页服务器或者文件系统的HTML文件（标准通用标记语言的一个应用）内容，并让用户与这些文件交互的一种软件。
什么是服务器：
服务器，也称伺服器，是提供计算服务的设备。由于服务器需要响应服务请求，并进行处理，因此一般来说服务器应具备承担服务并且保障服务的能力。

浏览器的分类：
主流浏览器：chrome，firefox，Safari，ie，opera····
注意：虽然市面上的浏览器有很多，我们在学习过程中主要使用到的浏览器是chrome、firefox
使用开发人员工具来查看请求和响应：１.1  右键，选择审查元素：
： [size=18.6667px]1.2 打开开发人员工具：
１.3  打开notwork:
１.4 浏览器发出的请求：
１.5浏览器请求的详细信息：
１.6浏览器请求数据的原理：
就是浏览器让请求的页面直接去服务器上找，找到了以后将这个文件中的内容通过repsonse响应回浏览器。
请求协议：http协议：１.1  请求报文。１.2  响应报文。１.3  Url:(地址)地址栏上我们输入的内容。
Url的组成：协议://服务器的ip地址:端口号/请求的页面
页面的本质：
虽然页面上只有一句，但是在源代码中有很多的内容：

原来浏览器所做的事情是将服务器响应回来的response进行从上到下的解析（渲染），将最后的页面效果显示出来。

浏览器内核：
内核（Rendering Engine）：可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页。
内核的分类：
Trident：ie , 猎豹安全浏览器,360极速浏览器,百度浏览器...
Gecko：Firefox
Webkit：Safari
Blink：Chrome，Opera
不同的内核在渲染同一内容的时候会有差别。
问题：为什么浏览器上只显示了一行代码，但是源代码中有6行代码？
Html：
Html：超级文本标记语言（HyperTextMarkup Language），在浏览器上运行的一种标记语言。
就是给文本加上含有语义的标签。
接下来应该学习更多具体语义标签：
结构（固定的结构）：
<html>
<head>
<title></title>
</head>
<body></body>
</html>
Html中的标签：
标签：用“<>”包起来的内容。
Html标签：<html></html>
由于现在学习的html页面还是很简单的，为了能够让页面更加的“充实”我们要学习更多的标签。
h系列的标签(Header)：h1,h2,h3,h4,h5,h6
作用：把页面上的文字加上标题的语义。
代码：
h1,h2,h3,h4,h5,h6:将文字放大，加粗.并且逐渐变小。（h1标签是最大的。）
注意：一个页面只能有一个h1标签。
p标签(Paragraph)：段落标签
作用：给页面的上一段文字加上段落的说语义
代码：
<p>这是段落</p>

特点：页面上的一个段落，单独占一行，并且与上下内容之间存在距离。
hr标签(Horizontal Rule)
作用：在页面显示一条横线。
代码：
<hr/>

特点：在页面显示一条横线，默认占整行。
br标签(break)
作用：换行。
代码：
<br/>

特点：换行。
b(Bold),u(Underlined),i(Italic),s(Strikethrough),strong,em,del,ins
作用：
b：加粗
u: 下划线
i:  倾斜
s: 删除线                        
建议不要使用，因为这些标签没有语义。
作用：
strong:加粗
ins:下划线
em:倾斜
del:删除线
可以使用
img标签(image)：
作用：在页面显示一张图片。
代码：
<imgsrc=”图片的路径” />

   特点：就是显示图片.
   属性：

  
src
  
图片显示的路径
  
alt
  
如果图片加载不出来会显示这个属性中的文字
  
title
  
介绍这张图片
a标签(Anchor)：锚
a标签的其它名称：
超级链接，超链接，锚链接。
作用：可以在一个页面跳转到另一个页面。
代码：
<ahref=”页面的路径”></a>

注意：在a标签之内必须要写上文字，如果没有，那么这个标签在页面上找不到。
a标签的其它用法：
1.0可以不跳转（跳转到当前页面）href=”#”
2.0可以跳转到另外的页面。
3.0可以在当前页面进行定位。
A.设置a标签的href属性为“#id名”，
B.在页面的指定位置加入一个目标标签（可以是任意标签）
C.必须给这个标签设置一个id名：<p id=”mubiao”>这是目标</p>
4.0在跳转的页面进行定位。
5.0可以进行下载。（强烈不推荐使用）
a标签的属性：
  
href
  
a标签跳转的目标地址
target
_blank:保留原始页面，再进行跳转
  
_self:在当前页面进行跳转
base
为页面上所有的a标签设置跳转的方式（base标签一般放在titile标签下面）
Html标签：
作用所有html中标签的一个根节点。
Head标签：
作用：用于存放：
title,meta,base,style,script,link
注意：每个head标签中都必须有一个有title标签，其它的可选。
Body标签：
作用：用于存放所有的html的结构标签：
p,h,a,b,u,i,s,em,del,ins,strong,ul,li,ol,
Title标签：
作用：让页面拥有一个属于自己的标题。
meta标签：
常用用法：
1.    Description：可以描述页面，可以用来使用百度程序（网络爬虫）来收录关键信息，以此提高页面的排名。
2.    Keywords：关键词，可以用来提高页。面的关健词的比重（前升排名的一种方式。）
3.    字符集（编码格式）：
<meta http-equiv="Content-Type"content="text/html;charset=UTF-8">
Charset（字符集的格式）：UTF-8.
注意：字符集（文字在电脑是存储的字典）：
电脑是不能直接存储文字的，一般情况下电脑存储的是这个文字在“字典”里对应的位置。
所有一般看到乱码的原因是因为查找的字典不对：
我们做了一个小的例子：文档的内容用的是utf-8格式，而我们的存放文档的这个文件的格式是gbk,
gbk,utf-8之间的区别：
相同点：都是字符的编码格式。
区别：
utf-8:收录是全世界所有的语言中的文字。
gbk:收录了汉字，片假名。
大小：
utf-8>gbk
性能：
uft-8<gbk
约定：将来我们在整个学习过程中都用utf-8;
utf-8存储一个汉字占3个字节，
gbk存储一个汉字上2个字节
标签的分类：
双标签：有开始有结束，开始和结束之间是存在内容
<h1></h1>,<p></p>
单标签：只有一个标签，自己闭合自己。
<hr /> ,<br />
标签与标签之间的关系：
嵌套关系：一个标签包含另外一个标签，他们之间构造父子关系。
并列关系：两个标签并列，他们构造兄弟关系。
注意：将来在书写代码的时候如果两个标签之间的关系是嵌套关系，最好通过代码直接反映出来（子元素相对于父元素有一个缩进）。如果是并列关系，最好要有对齐。
通过浏览器查看页面上的元素具体的标签：
查看页面元素的组成。
标签的属性：
<img src=”a.jpg”/>
属性为 HTML 元素提供附加信息，img标签中的src就是img标签的一个属性。
路径问题：
         第一种：绝对路径
带有盘符的路径：C:\上课内容\上课视频\01html第一天\4-源代码\1.jpg.
  第二种：相对路径
由页面是一个文件，图片 也是一个文件，而现在需要在页面上输出图片，所以需要得到图片相对于文件的路径.
a.如果页面与图片在同一目录下面：

<img src=”2.jpg” />
b.如果页面在图片一上级目录：
<img src=”image/1.jpg”/>

c.如果图片在页面的上一级目录：   
<img src=”../2.jpg” />
问题：那么将来我们在实际开发中到底是用绝对路径，还是用相对路径？？
只要不出意外情况都是用相对路径：因为相对路径的可移植性要强。
列表：
作用：页面有一些数据需要显示。
无序列表：
作用：显示一列没有排列顺序的数据。
语义：就是一组没有顺序的数据。
代码：ul:Unordered List li:List Item
<ul>
     <li></li>
     <li></li>
</ul>

注意：
1.0无序列表中的数据没有先后顺序之分。
2.0 ul标签最好不要单独出现。
3.0 ul标签是用来管理li标签。
4.0 ul标签中只能放li标签。
5.0 li标签中可以放其它标签。
6.0 li标签是一个容器。
有序列表：
作用：显示一段有顺序的数据。
语义：一组有顺序的数据。
代码：ol:Ordered List
<ol>
     <li></li>
     <li></li>
</ol>

注意：有序列表中的所有数据都是顺序的。
现在一般情况下ul标签用的比较多，ol标签用的比较少。
自定义列表：
作用：显示一段数据，格式自己定义
代码：dl:Definition List dt:Definition Term  dd:Definition Description
<dl>
     <dt></dt>
     <dd></dd>
</dl>

处理兼容性：
将所有的标签设置一个统一的样式。
表格
总结：在早期的网站开发中，表格的使用非常的泛滥。
表格：不是没你不可，而是有你更好。
作用：用来将数据以表格形式显示出来。
代码：
<table>
     <tr>
            <td></td>
            <td></td>
     </tr>
     <tr>
            <td></td>
            <td></td>
     </tr>
</table>
  
属性
  
作用
border
给表格加上了边框
width
给表格设置宽
height
给表格设置高
cellspacing
规定单元格之间的空白。
  
cellpadding
  
规定单元边沿与其内容之间的空白。
虽然我们可以使用table中的标签来设置标签的一些样式，但是最好不要用，因为将来凡是与样式相关内容都是由css来设置的。
表格中的其它标签：
  
标签
  
作用
特点
<th></th>
起到表头的作用
其中的文字加粗，居中
<caption></caption>
给表格设置标题
在表格的最上面显示标题
<thead></thead>
用来存放当前列的表头
如果没有加css页面默认将表头中的高度设置变小
<tbody></tbody>     
一般用来存放页面中的主体数据
如果不写会自动加上
<tfoot></tfoot>
一般情况不会出现

表单：
作用：收集信息。
表单元素
注册页面上能够填写的内容都是我们的表单元素。
作用：用来收集用户的信息，将来提交到服务器。
  
标签
  
属性
作用
input
type
  
text:文本框
  
password：密码框
  
hidden:隐藏域
  
radio:单选框
  
checkbox:多选框
  
button:按钮
  
reset:重置
  
image:图片按钮
  
submit:提交

value
用于设置默认值(text,password,button)
select
option
下拉框
textarea

文本域

注意点：如果想要多个radio或者checkbox组成一个选择集合，那么必须给每个radio以及checkbox都设置相同name属性。
如何给radion,checkbox设置默认值呢？
设置另外一个属性：checked=”checked”
   我需要给下拉框设置默认值？
selected="selected"

Form标签：
为什么占击reset没有效果啊？
因为type=resrt的按钮只能在Form之中才能起作用。
作用：用来管理页面上的表单元素，表单元素如果要起作用，必须要放在form标签中。
  
属性
  
作用
action
将所有的数据提交到action指定的页面


为什么提交之后没有将数据显示在地址栏上呢？
必须要给需要提交的标签加上name属性。
Html中空格的合并现象：
特点：无论在页面有同时出现多少个空格，缩进，换行，将来浏览器在解析的时候只会当一个空格显示。
结论：html中对空格，缩进，换行不敏感，如果同时出现多个空格缩进或者执行，页面只会把它们当作一个空格来解析。
特殊字符对应的转译符：
SEO与标签的语义化：
作用：用来优化网站，使用网站在搜索引擎上的排名先前。
百度是如何收录一个网站的信息的呢？
百度自己写的一个程序来收录每个网站的信息。
1）花钱买排名
a)    缺点：烧钱。
b)    优点：效果杠杠的。
2）将页面做成静态页面（html）..(了解)
3）发外链（网站就越受欢迎，将来被用户搜索出来的机会就要大）
4）页面的友好性（语义化规范）：
标签语义化的应用：每个html标签都有属于自己的语义，有使用标签时候要一定要了解每个标签的语义，合理使用。（在合适的地方使用合适的标签。）
语义化的好处：
01对搜索引擎的友好（将来网络爬虫进入页面之后可以很方便的得到页面的重要信息。）
02提升用户体验
03利于代码的可读、维护、提高开发效率.
没有语义的标签:
Html中大部分的标签都具有语义，所在使用的时候一定要注意。还有一部分标签没有语义，没有语义的标签一般只用来进行布局。
Div
<div></div>
特点：默认占一整行，并且一行里面只能显示一个。
Span
<span></span>
特点：大小由内容来决定，并且一行里面可以显示多个。
Div和span默认显示特点：
Div默认占一整行（根据浏览器的显示大小），div的高度是由div中的内容来决定的。
Span的宽度和高度都是由内容来决定。（行内元素，块级元素。）



Css初识：Css的存放位置：放在title标签下面所有的样式都放在同一个标签中：<style></style>在标签中放入对应的样式。了解css
Css:cascadingstyle sheets层叠样式表。
作用：用来给页面添加样式的（给人穿衣服，化妆）。
代码：（放在title下面）
<styletype=”text/css”>
            选择器 {
                   属性名1： 属性值1;
                   属性名2： 属性值2;
                   。。。
            }
</style>

type的含义，用来申明style标签只能用来存放css格式的文本。
一个属性名加一个属性值，一般我们称作键值对。
特点：css中跟html一样也对空格，换行，缩进不敏感
使用开发人员工具查看元素的样式：css注释.
作用：加入对代码的描述。
代码：
/*  注释代码   */

快捷键:ctrl+/;
请说出下面哪个是html中的注释

工具的使用：
与文本相关的那些属性：Font-size:设置文本的大小。Font-style:文本的样式
Italic:倾斜
Normal:正常的
Font-family:字体的格式
取值范围就是下拉菜单中的内容。
Font-weight:文本的粗细。
取值：
1.如果是数值：100-900（都是整百）
2.如果是关键字：
bold:加粗
bolder:比加粗更粗
lighter：细线
字体属性的连写：
格式
font: font-style font-weight font-size font-family;
注意：
这些属性中有两个属性是必写的font-size和font-family其它可选，注意不管怎么写，font-size font-family必须处于最后两个属性。
width,height,background
与颜色相关的内容：
Color:
注意：没有font-color属性。
赋值：
1.0使用具体的颜色来赋值：
Color: red;
Color: blue;
Color: yellow;
2.0十六进制表示法：
Color: #ff8400;
Color:#00CC33;
3.0rgb表示法：
rgb(0,0,0);(第一个对应的是红，第二个是绿，第三个是蓝)
注意：每个的取值是0-255;
4.0rgba表示法。

选择器：标签选择器：
作用：根据指定的标签名给对应标签的元素设置样式。
代码：
<styletype=”text/css”>
     标签名 {
            属性名1：属性值1
            属性名2：属性值2
            。。。。。
     }
</style>

缺点：只能给某一种标签的元素设置属性。
Class(类)选择器：
作用：根据类名来给对应的标签设置样式
代码：
<styletype=”text/css”>
     .class名 {
            属性名1：属性值1
            属性名2：属性值2
            。。。。。
     }
</style>

Id选择器：
作用：根据id名来给对应的标签设置样式
代码：
<styletype=”text/css”>
     #id名 {
            属性名1：属性值1
            属性名2：属性值2
            。。。。。
     }
</style>



类名：
每一个标签都可以设置一个属性，这个属性的属性名叫做：class，后面跟的属性值叫做class名（类名）。
Id名：
每一个标签都可以设置一个属性，这个属性的属性名叫做：id，后面跟的属性值叫做id名。
注意点：１.1  认清类名和id名
类名：相当于是标签的一个名字（可以重复）。
Id名：相当于是标签的身份号码（不可以重复）。
一般情况一个类名可以被多个标签使用，一个id名只能被一个标签使用。
总结：1.0不要在页面上写无用的样式。
2.0一个类名可以给多个标签，一个标签也可以多个类名。
3.0一个id名只可以给一个标签使用，一个标签也只可以有一个id名。
4.0命名的规范：命名的范围只能是英文字母，数字，下划线(“_”)，连接符（“-”），并且数字不能出现在名称的开头部分以及连接符加数字也不能出现在名称的开头部分。
其它选择器：通配符：
作用：用于作用于页面上所有的标签.
代码：
<style>
      * {
            属性名1：属性值1;
            属性名2：属性值2;
            .......
}
</style>

注意：通配符在进行选择的时候，会去遍历页面上所有的标签，并且给这些标签设置对应的属性。
缺点：性能太低。一般情况不建议使用。
基础班中有很长一段时间用这个选择器来做css的reset.
后代选择器：
作用：选择一个标签中所有后代标签里满足条件的标签。
代码：
选择器选择器 选择器 ｛
     属性名1：属性值1;
            属性名2：属性值2;
            .......

｝

子代选择器（子元素选择器）
作用：得到 当前标签中的直接子元素（直接放在标签下面没有经过任何标签的嵌套）
代码：
选择器>选择器｛
     属性名1：属性值1;
            属性名2：属性值2;
            .......
｝

并集选择器：
作用：将两种类型的元素全部选择出来。
代码：
选择器 ，选择器｛
属性名1：属性值1;
            属性名2：属性值2;
            .......
｝


交集选择器：
作用：从两个集合中选择中它们相同部分：
代码：
选择器选择器 {
            属性名1：属性值1;
            属性名2：属性值2;
            .......
}

注意：两个选择器之间是没有空格的。

P标签中不能放div。

Css的三大特性继承
作用：给父元素设置一个属性，然后子元素可以使用
应用：如果页面上有很多的文件都是红色，并且大小都是20px，那么这个时候给每个元素单独设置会很麻烦，所以可以考虑继承。
注意：将来在写代码的时候，我们的css初始化，与页面文字的整体颜色一般会先设置。
什么样的属性才可以继承呢？
凡是以line-,text-,font-开头的属性都是可以继承。
层叠
是页面处理冲突属性的一个能力。
如果多个选择器为同一个元素设置了不同的属性它们会同时作用于这个元素。
如果多个选择器为同一个元素调协了相同的属性它们会发生层叠。
层叠的最终结果跟优先级有关系。
优先级
优先级从大到小
！important>Id>类>标签>通配符>继承>浏览器默认
权重：
！Important:最高级。
作用：将对应选择器的优先级设置为最高级。
注意：！Important属性是不能继承的
如果选择器混合作用，那么如何确定我们的优先级？
通过权重来进行比较。
如何计算权重：
数标签：
先数id,如果id相等再数类如果id不相等id多的选择器权重高，权重越高，优先级越高。如果id选择器数量相同，再数类选择器，最后数标签。
注意：比较权重的时候一定要注意：我们的选择器一定要命中对应的标签才可能让标签拥有对应的属性。
层叠，优先以及权重之间的关系
层叠是css的一特性，如果两个相同的属性作用于同一标签，它们会发生层叠。如果多个复合选择器，同时作用于我们的同一标签，优先级就不好计算了，就要计算权重，通过比较权重，来先出优先级最高的选择器。
层叠是优先级的一种表现。
权重是优先级的计算法则。
背景：Background-color:背景颜色;
作用：设置背景颜色。
Background-image:背景图片
作用：设置背景图片，默认情况下是平铺（如果图片不能占满整个容器，所以会让图片铺满整个容器）
Background-repeat:是否平铺
作用：设置背景图片是否平铺。
取值：（no-repeat,repeat-x,repeat-y）
No-repeat:不重复。
Repeat-x:在x轴方向平铺
Repest-y:在y轴方向平铺
Background-position:背景图片的位置。
取值：
方位名词：
top :上   bottom:下  left:左 right: 右   center:中
两类：
水平方向：left：左  center:中   right: 右
垂直方向：top:  上  center: 中  bottom:下
具体的像素：
两个方向：水平方向，垂直方向
连写方式：
background:basckground-color background-image background-repeat background-postion;
元素的显示方式：块级元素：
特点：单独占一行，可以给这个元素设置宽高。
display(显示方式):block;
所属标签：div,p,h1,ul,li,ol,dl
行内元素：
特点：可以多个标签放在同一行，但是给标签设置宽高没有作用。
display(显示方式):inline;
所属标签：
span,b,u,i,s,ins,del,strong,em
行内块级元素：
特点：可以多个标签放在同一行，并且可以标签设置宽高。
display(显示方式):inline-block;
img
元素显示方式的转换：
只需要修改display属性就可以了。

新的属性：
text-indent:
作用：设置首行缩进。
用法：text-indent: 2em;
em:一个文本的距离。
text-align:
作用：设置文本的位置
取值：
center:设置内容在容器的水平方向上居中。
left:设置内容在窗口的水平方向上靠左
right:设置内容在容器的水平方向上靠右
text-decoration:  
作用：设置文本的装饰
取值：
none:没有任何装饰
underline:下划线
margin: 0 auto;
作用：设置容器自身水平居中。
伪类：
与类选择器相似，但是又有所不同。
锚伪类：a:link
代码：
a: link {
color: red;
font-size: 30px;
                }
作用：
给a标签设置没有被访问过的样式
a:visited
代码：
a:visited {
color: pink;
font-size: 40px;
                }
作用：
给a标签设置访问过的样式
a:hover
代码：
a:hover {
color: yellow;
font-size: 50px;
                }
作用：
给a标签设置鼠标悬停时的样式。
a:active
代码：
a:active{
color: green;
font-size: 60px;
                }
作用：
设置a标签被激活时的样式（被点击时的样式）。
注意：
a. 在使用的时候一定遵守这样的顺序：
a:link ,a:visited,a:hover,a:active
记忆方法：
爱恨原则：
love-hate
心理作用：
lv-ha
买了一个lv，心里乐哈哈
b.  有些锚伪类除了可以作用在a标签上还可以作用来其它标签上：
:link 只能用于a标签
:visited只能用于a标签
:hover 其它标签也可以使用这个伪类
:active 其它标签也可以使用这个伪类
行高（line-height）：
应用 ：如果行高等于容器的高度那么元素在父容器中垂直居中。
行高的定义：两行文本之间基线的距离就是做行高。

文本中的几条线：
盒子模型：
概念：在写一个html页面的时候，其实就相当于在这个页面中叠盒子。
思想：万物皆盒子。
具体内容：
盒子的挡板---------border
盒子的泡沫---------padding
盒子中的物品--------内容
盒子与盒子之间的距离---------margin
border(边框)---盒子的挡板 border-color:边框的颜色
border-top-color
border-right-color
border-bottom-color
border-left-color

border-width:边框的宽度
border-top-width
border-right-width
border-bottom-width
border-left-width

border-style:边框的样式
border-top-style
border-right-style
border-bottom-style
border-left-style

取值：
solid：实线。
dashed：虚线
dotted：点线
边框的连写方法：
border: border-width border-style  border-color;

border-collapse:collapse;/*去掉单元格之间的间隙*/盒子的填充：padding(内边距)
作用：设置盒子的内容与边框之间的距离。
取值：
padding: 40px;
给上右下左所有的内边距都设置了40像素的距离。
padding: 40px 80px;
给上下内边距设置了40像素，下左右边距设置了80像素
padding: 40px 60px 80px;
给上边距设置了40像素，给左右设置了60像素，给下设置了80像素。
padding: 40px 60px 80px 100px;
以顺时针方向进行设置，上为40px,右为60像素，下为80像素，右为100像素。
padding-top:padding-right:padding-bottompadding-left计算盒子的大小：
注意：padding（盒子中的填充物）会改变盒子的大小（跟日常生活中有区别）
计算盒子大小的公式：
盒子宽：border-left-width + padding-left + width + padding-right +border-right-width
盒子高：border-top-width + padding-top +height + padding-bottom +border-bottom-width
特殊情况下padding不会改变盒子的大小：
什么情况：当一个大盒子包含一个小盒子，并且大小盒子都是块级元素，而且小盒子的宽是继承自大盒子的话，那么设置小盒子的padding-left不会改变小盒子的大小。
新闻列表的案例
盒子与盒子之间的距离：margin（外边距）
作用：设置盒子与盒子之间的距离。
取值：
margin: 10px;
给上右下左所有的外边距都设置了10像素的距离。
margin: 10px 20px;
给上下外边距设置了10像素，下左右外边距设置了20像素
margin: 10 px 20px 40px;
给上设置10px外边距，给左右设置20px的外边距，给下设置40px外边距
margin:10px 20px 40px 80px;
给上10，右20，下40，左80

maring-topmargin-rightmargin-bottommargin-left注意点：
很多标签默认带有margin和padding，所以将来进行页面的布局的时候一定要清除这些标签的默认的margin和padding.
例如：
1)body标签默认带有margin: 8px的属性
2)p标签默认带有margin: font-size 0;
3)h标签也默认带有margin-top和margin-bottom
               4)ul默认带有上下的margin以及左边的padding
......
清除的方法：
* {
margin: 0;
padding: 0;
}

浮动浮动的初体验
问题：在页面上有两个盒子，一个盒子靠着屏幕左侧显示另一个盒子靠着屏幕的右侧显示？
作用：解决一行中显示多个盒子的问题（并且这些盒子的位置可控。）
浮动的代码：
float:left;
float:right;


浮动的特点
标准流：就是浏览默认摆放盒子的标准。
    浮动的元素会脱离标准流：
如果一个元素按照正常的标准流来显示，会在html中所属的位置占位，后面的元素会紧跟着它。但是浮动脱了标准流，将来在看到浮动的元素之后，不能以正常的标准流来进行判断。（在标准流中不占位置了，它是在标准流之上）
浮动以后的元素会覆盖在标准流的元素之上。浮动规则：浮动找浮动，不浮动找不浮动
浮动找浮动：只有写在同一个结构下面的浮动才会浮动找浮动。
浮动显示的位置与原本不浮动之前的位置是对应的：浮动的重点：浮动的元素只会影响下面的元素，不会影响上面的元素：浮动的元素会改变显示方式：
不管元素是行内元素还是块级元素将来在显示 的时候都会在同一行中显示。
浮动以后的元素可以设置宽高。
总结：浮动以后的元素的显示方式与行内块级元素一样。
清除浮动
浮动对页面的影响：
如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0.由于父盒子的高度为0，下面的元素会自动补位，所以这个时候要进行浮动的清除。
float: left;float: right;
清除浮动：clear:both;
     
使用额外标签法：   
在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响。
a.内部标签：会将这个浮动盒子的父盒子高度重新撑开
b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子。
注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签。
使用overflow属性来清除浮动：
先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响。
注意：一般情况下也不会使用这种方式，因为overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏（等我们学完overflow以后大家就明白了）。
使用伪元素来清除浮动：
.clearfix:after {
              content:"";//添加内容为空
              height: 0;//内容高度为0
              line-height: 0;//内容文本的高度为0
              display: block;//将文本设置为块级元素
              clear: both;//清除浮动
              visibility:hidden;//将元素隐藏
         }
         .clearfix {
              zoom: 1;/*为了兼容ie6*/
         }
伪元素：
伪元素：在页面上不存在的元素，但是可以通过css来添加上去。
种类：
:after（在。。。之后）
:before（在。。。之前）
注意：每个元素都有自己的伪元素。
定位：
问题：现在在页面上有两个盒子，其中第二个盒子将第一个盒子压住了一半。
作用：解决页面上盒子与盒子之间的层叠问题。
使用：
position:(位置)
取值：
static:静态的
position:static;静态定位。
所有的标准流中的元素都是静态定位。
relative:相对的
position：relative：相对定位。
使用的时候还要配合：top,left,right,bottom来使用。
特点：    如果设置了相对定位并且设置了trbl属性，那么将来盒子会以盒子原本的位置发生偏移。
以.two盒子原来的位置发生偏移，在水平方向向右移动了20像素，在垂直方向也向下移动 了20个像素。
1.0相对于原来的位置进行平移。
2.0设置了相对定位的元素在页面上占据了位置（没有脱离标准流）。
总结：想当年。
absolute:绝对的
position:absolute//绝对定位

使用的时候也要配合trbl属性来使用
特点：
1.0如果这个元素没有父元素，那么将来trbl是相对于body来定位的
         2.0如果绝对定位的元素有父元素，但是父元素没有定位，那么这个时候trbl还是相对于body来定位的。
3.0如果绝对定位的元素有父元素，而且父元素有定位（非static），那么这个绝对定位的元素偏移是以自己的父元素为基础。
4.0绝对定位之后的元素在页面不会占据位置（绝对定位以后的元素会脱离标准流）。
总结：看脸型。
将来在写页面的时候用的最多的既不是绝对定位也不是相对定位，而是绝对定位与相对定位一起使用：（规范）子绝父相。
子元素使用绝对定位，父元素使用相对定位。
fixed：固定
position:fixed。
使用的时候也要配合trbl属性来使用
特点：
1）不管页面有多大，trbl永远是相对于浏览器的边框来的。
2）固定定位的元素也脱离了标准流（不在页面上占据位置）
总结：死心眼型。
一. 补充：
如果文本与图片在同一行中，那么将来文字与图片的默认对齐方式是文字的基线对齐图片的底线。
vertical-align：设置文本与图片的对齐方式：
取值：   
middle:将中线对齐
2.0overflow:溢出
取值：
hidden：会将超出容器的部分隐藏起来
scroll：给容器加上滚动条
auto：根据具体情况判断容器是否要加上滚动条
3.0元素的隐藏：
overflow:hidden//将超出的部分裁剪掉
visibility: hidden//可以将元素隐藏，但是在页面上还保留着原来的位置。（停薪留职）
display: none;//可以将元素隐藏，并且在页面不占据位置。

diplay:none与display:block是一对反义词。



作者: 袁文博老师    时间: 2016-9-19 16:24
看着这一大堆熟悉又陌生的东西，，，好厉害的样子。
作者: 张婷老师    时间: 2016-9-19 16:30
好腻害
作者: 谢天成老师    时间: 2016-9-19 16:35
   这笔记必须走一波赞
作者: 长沙-小知姐姐    时间: 2016-9-19 16:43
来来来 大家关注走一波赞走一波 这么棒的笔记这么美丽的我
作者: 我心深处    时间: 2016-9-19 16:48
很棒，很受益
作者: 橘子哥    时间: 2016-9-19 17:57
哇，好多资源，小知姐姐好厉害！！！
作者: 长沙-小知姐姐    时间: 2016-9-23 15:27
橘子哥 发表于 2016-9-19 17:57
哇，好多资源，小知姐姐好厉害！！！

哎呀 橘子哥夸我了  我要去炫耀一下
作者: liuyi00805    时间: 2016-9-27 18:34
这么全的笔记,太赞了
作者: 五号青年    时间: 2016-9-27 18:45
笔记这么详细啊
作者: 张婷老师    时间: 2016-9-30 10:41
很实用，感谢分享哦
作者: acfr    时间: 2016-10-7 23:01
厉害啊，辛苦了
作者: oss1122    时间: 2016-10-9 10:58
感谢分数~厉害！
作者: 胡洁老师    时间: 2016-11-7 23:07
好腻害的样子
作者: 码农来了    时间: 2016-11-10 21:08
谢谢楼主分享
作者: 浮世散人    时间: 2016-12-27 09:06
很不错的资源
作者: yu_xin    时间: 2017-2-20 10:54
谢谢楼主分享，入门小白很受用
作者: LW1406332752    时间: 2017-7-8 21:23
感谢楼主，阿弥陀佛
作者: csm666    时间: 2017-7-29 09:47
6666666666666666
作者: hl7665395    时间: 2017-8-8 12:10
慢慢看
作者: ncx123    时间: 2017-8-8 13:48
作者: 蚂蚁L    时间: 2017-9-1 14:21
这个笔记才是比较全的
作者: 和宝宝    时间: 2017-9-2 00:46
啥时候可以自己总结出来就好罗
作者: newu    时间: 2017-10-8 10:40
好腻害{:5_275:}
作者: 星芒背刺    时间: 2017-10-14 00:16
感谢小姐姐
作者: 新新凯    时间: 2017-10-14 09:29
好好学习，天天向上
作者: qq1281826717    时间: 2017-12-1 20:51
我想要md文件
作者: IWantToBe...    时间: 2018-5-5 21:31
前来学习一下。。。。
作者: Port    时间: 2018-5-30 12:46
666666666666666666666666



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2