html&css合集

前言：作为一名前端小白。html与css的入门很重要，以下资料大多是跟李南江老师学习记录并加上自己的一些见解。

什么是浏览器

浏览器是安装在电脑里面的一个软件， 能够将网页内容呈现给用户查看，并让用户与网页交互的一种软件。 就好比QQ一样都是安装在电脑里面的一个软件， 只不过功能不同而已

• 作用：1.渲染网页给用户查看 2.使得用户与网页交互

浏览器内核

浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容，从而导致了浏览器兼容性问题出现

• IE内核 Trident
• 谷歌内核 WebKit / Blink
• 火狐内核 Gecko
• Safarri内核 WebKit
• 欧朋内核 Presto

什么是服务器

服务器是专门用于存储数据电脑，只不过是比我们的电脑配置更高的电脑，并且24小时不断电， 访问者可以访问服务器获得服务器上存储的资源服务器一旦关机，访问者就无法访问 。

URL组成

• 网络协议类型 http://
• 服务器IP地址 127.0.0.1
• 服务器端口号 :80
• 资源路径 网页在服务器上的路径
• 资源名称 index.html

HTML

• 它是专门用来描述文本的语义的. 也就是说我们可以利用HTML来告诉浏览器哪些是标题, 哪些是段落.

基本结构

标签的注意事项

img标签：

- img标签添加的图片默认不是占一整行空间；如果想让图片等比拉伸, 只写高度或者宽度即可

br:

- br的意思是不另起一个段落进行换行, 而网页中99.99%需要换行时都是因为另起了一个段落, 所以应该用p来做

a标签：

跳转到指定网页：一定要加http:// 或者https://
如果每个a标签都想在新页面中打开,那么逐个设置a标签的target属性比较麻烦, 这时我们可以使用base和a标签结合的方式,一次性设置有a标签都在新页面中打开
格式: 但是base必须嵌套在head标签里面，如果标签上指定了target,base中也指定了target,那么会按照标签上指定的来执行

- a标签的href也可以是是图片，点击图片进行跳转
假链接(本质是跳转到当前页面)博客 会自动跳到网页顶部
格式博客 不会有任何反应 是个死狗
跳转到页面指定位置(锚点链接)
格式跳转到指定位置

a标签的伪类选择器
link：默认状态。未曾访问
visited：被访问过
hover：鼠标悬浮
active:长按显示模式
table标签
伪类选择器可以单独出现，也可以一起出现，一起出现需要按照上述的顺序编写
伪类选择器可以简写，即a{}此时仅仅表示前两者 link以及visited，一般伪类选择器紧随标签选择器。

基本结构

    
表格的标题
    

        

            
每一列的标题
        
    
    

        

            
数据
        
    
    

        

            
数据
        
    

也就是tr是不变的，th是取代td的东东。但是只是对第一行起作用哦。
th标签：表头单元格: 给每一列设置标题, 内容会自动加粗，居中
caption标签:给整个表格设置标题，一定要嵌套在talbe标签内部才有效
thead标签:用来存放当前列的表头, 如果没有加css页面默认将表头中的高度设置变小。tbody标签:一般用来存放页面中的主体数据, 如果不写会自动加上。tfoot标签:用来存放表格的页脚（脚注或表注), 如果没有加css页面默认将表头中的高度设置变小, 一般不会出现
表格中的一些属性
宽度与高度属性：table 与td可以使用
width: 默认情况下表格的宽度是由内容自动计算出来的, 可以通过width属性指定表格的宽度
height:默认情况下表格的高度是由内容自动计算出来的, 可以通过height属性指定表格的高度
水平对齐align与垂直对齐valign：table、tr、td
给table设置align属性, 是让表格在浏览器中居左/居右/居中
给tr设置align属性, 是让当前行中所有内容居左/居右/居中
给td设置align属性,是让当前单元格中所有内容居左/居右/居中

如果td中设置了align属性, tr中也设置了align属性, 那么单元格中的内容会按照td中设置的来对齐

给table设置valign属性, 无效
给tr设置valign属性, 是让当前行中所有内容居上/居中/居下
给td设置valign属性,是让当前单元格中所有内容居上/居中/居下
如果td中设置了valign属性, tr中也设置了valign属性, 那么单元格中的内容会按照td中设置的来对齐
内边距与外边距属性：table
cellspacing: 外边距. 默认情况下单元格之间有2个像素的间隙, 可以通过cellpadding指定表格之间的间隙
边框：
border: 默认情况下表格的边框宽度为0看不到, 通过border属性给表格指定边框宽度
cellpadding: 内边距. 默认情况下单元格边缘距离内容有1个像素的内边距, 可以通过cellpadding属性指定单元格边缘和内容之间的内边距
bgcolor:规定表格的背景颜色
给table设置bgcolor属性, 是给整个表格设置背景颜色
给tr设置bgcolor属性, 是给当前行设置背景颜色
给td设置bgcolor属性, 是给当前单元格设置背景颜色

制作细线表格
使用指定外边距是0实现细线表格是不靠谱的，其实他是把两条线合并，还是两条线。cellspacing默认是2px
解决：设置table的bgcolor=black cellspacing=1px tr的bgcolor=white

 

                    

                        
1.1
                        
1.2
                    
                    

                        
                        
2.2
                        
2.3
                    
                

表格的合并 合并只能向后或者向下进行

水平方向：

     
            

                    

                        
                        
                        
1.1
                        
                        
                        
1.3
                    
                    
 
                        
2.1
                        
2.2
                        
2.3
                    
                

垂直方向

    
            

                    

                        
1.1
                        
1.2
                    
                    

                        
2.1
                        
2.2
                    
                

两个方向合并

            

                    

                        
1.1
                        
1.2
                        
1.3
                    
                    

                        
2.1
                        
2.2
                        
                    
                    
                    

                            
3.1
                            
                            
                        
                
先水平 后垂直即可

form表单标签

表单元素要提交：
1.说明哪些元素需要提交 使用name属性
2.提交到哪里 定义form的action属性
所有表单元素都需要写进form中

• type=radio 单选按钮，天生是不互斥的，如果想互斥，必须要有相同的name属性
• 指定radio和checkbox默认值, 前提是同一组内容必须设置相同name属性
  label
• type=hidden 用于悄悄收集用户的信息，隐藏域是不会显示在页面的
• type=img/button
  -type=reset 清空表单中的数据
• 表单元素要有一个id，然后label标签就有一个for属性，for属性和id相同就表示绑定了 或者直接包裹标签绑定当前的框
• input 的img标签实际上是按钮
• 要想通过submit提交数据到服务器, 被提交的表单项都必须设置name属性默认明文传输(GET)不安全, 可以将method属性设置为POST改为非明文传输
• fieldset与legend标签

datalist

给datalist列表标签添加一个i,给输入框添加一个list属性,将datalist的id对应的值赋值给list属性才可以使用该标签

非表单元素 selecet textarea

• 可以给下拉列表select通过optgroup标签添加分组
• textaera: resize: none;

section (内容加标题)

article

frame(框架)

iframe（内联框架）

HTML实体

 ；<；

路径问题

使用/反斜杠

淘汰的标签

b===strong=== :
i=== em ====
s===del ===text-decoration:line-through
u=== ins ===text-decoration:underline

css样式

文字

font    简写属性。作用是把所有针对字体的属性设置在一个声明中。
属性值： style weight size family;sytle  weight可以省略，而且style和weight的位置可以交换 size，family不能省略，而且 size一定要写在family的前面, 而且size和family必须写在所有属性的最后
font-family 设置字体系列。 属性值：字体名称（中文需要使用引号）
font-size   设置字体的尺寸。 属性值: px(像素 pixel)
font-size-adjust    当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
font-stretch    对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style  设置字体风格。   normal ： 正常的， 默认值
italic :  倾斜的
font-variant    以小型大写字体或者正常字体显示文本。
font-weight 设置字体的粗细。bold 加粗
bolder  比加粗还要粗
lighter 细线， 默认就是细线 100-900之间整百的数字

tips

如果设置的字体不存在, 那么系统会使用默认的字体来显示
默认一般使用宋体
如果设置的字体不存在, 而我们又不想用默认的字体来显示怎么办?
可以给字体设置备选方案
格式:font-family:"字体1", "备选方案1", ...;
如果想给中文和英文分别单独设置字体, 怎么办?
但凡是中文字体, 里面都包含了英文
但凡是英文字体, 里面都没有包含中文
也就是说中文字体可以处理英文, 而英文字体不能处理中文
注意点: 如果想给界面中的英文单独设置字体, 那么英文的字体必须写在中文的前面

text

color   设置文本颜色
direction   设置文本方向。
line-height 设置行高。
letter-spacing  设置字符间距。
text-align  对齐元素中的文本。
text-decoration 向文本添加修饰。属性值none 什么都没有, 去掉超链接的下划线
text-indent 缩进元素中文本的首行。 其中em是单位, 一个em代表缩进一个文字的宽度
text-shadow 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform  控制元素中的字母。
unicode-bidi    设置文本方向。
white-space 设置元素中空白的处理方式。
word-spacing    设置字间距

背景属性

background    作用是将背景属性设置在一个声明中。
背景颜色 背景图片 平铺方式 关联方式 定位方式;
background-attachment   背景图像是否固定或者随着页面的其余部分滚动。
 scroll 背景图片随着滚轮滚动而滚动 fixed 图片位置固定 并不会改变
background-color    设置元素的背景颜色。
background-image    把图像设置为背景。
如果图片的大小没有标签大，那么图片会自动的水平以及竖直进行平铺和填充，当图片比较大的时候, 可以通过定位属性保证图片永远居中显示
如果网页上出现了图片, 那么浏览器会再次发送请求获取图片
background-position 设置背景图像的起始位置。
background-repeat   设置背景图像是否及如何重复
background-color:属性设置标签的背景颜色

背景图片与插入图片

同一个标签可以同时设置背景颜色和背景图片。不过背景图会覆盖背景颜色，可以通过背景图片的平铺来降低图片的大小, 提升网页的访问速度
-背景图片仅仅是一个装饰, 不会占用位置 插入图片会占用位置
-背景图片有定位属性, 所以可以很方便的控制图片的位置
插入图片没有定位属性, 所有控制图片的位置不太方便

• 插入图片的语义比背景图片的语义要强, 所以在企业开发中如果你的图片想被搜索引擎收录, 那么推荐使用插入图片

行高 line-height

行所占据的高度，要是内容并没有设置高度与宽度，使用行高会直接给标签撑起来高度，这时候内容的高度就是行高，设置内容的高度后，行高也设置后，此时文本是在设置的行高中垂直居中，所以想要内容垂直居中，设置行高等于height.
要是文字是两行以上，就需要设置padding，注意padding改变元素的宽高也会改变。
注意：

1. 文字在行高中默认垂直居中
2.只有单行文字的居中可以使用行高与height相同，此方法并不适用于多行，如果多行文字，需要设置padding属性。

• 列表属性 list

list-style  简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image    将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
marker-offset

• 表格属性 tablle

border-collapse 设置是否把表格边框合并为单一的边框。
border-spacing  设置分隔单元格边框的距离。
caption-side    设置表格标题的位置。
empty-cells 设置是否显示表格中的空单元格。
table-layout    设置显示单元、行和列的算法。

• 轮廓outline

outline 在一个声明中设置所有的轮廓属性。    
outline-color   设置轮廓的颜色。    
outline-style   设置轮廓的样式。    
outline-width   设置轮廓的宽度。

• 内边距 padding

padding 简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom  设置元素的下内边距。
padding-left    设置元素的左内边距。
padding-right   设置元素的右内边距。
padding-top 设置元素的上内边距。

边框 border

border  简写属性，用于把针对四个边的属性设置在一个声明。
border-style    用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width    简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color    简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom   简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color   设置元素的左边框的颜色。
border-left-style   设置元素的左边框的样式。
border-left-width   设置元素的左边框的宽度。
border-right    简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color  设置元素的右边框的颜色。
border-right-style  设置元素的右边框的样式。
border-right-width  设置元素的右边框的宽度。
border-top  简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color    设置元素的上边框的颜色。
border-top-style    设置元素的上边框的样式。
border-top-width    设置元素的上边框的宽度。

• 外边距 margin

margin  简写属性。在一个声明中设置所有外边距属性。
margin-bottom   设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right    设置元素的右外边距。
margin-top  设置元素的上外边距。

盒子

我们将html的一个小整体称之为盒子。类似于实际中的盒子，有盒子自身的内容，盒子的边框 ，盒子的填充物，盒子与盒子之间的外边距。
盒子这里主要有以下几个概念：
边框：边环绕在标签宽度和高度周围的线条
两种定义：
第一种：设置所有边框
border: 边框的宽度 边框的样式 边框的颜色;
颜色属性可以省略, 省略之后默认就是黑色，样式不能省略, 省略之后就看不到边框了，宽度可以省略, 省略之后还是可以看到边框。
第二种：分别设置每条边
border-top: 边框的宽度 边框的样式 边框的颜色;
第三种：按照要素设置
border-width: 上 右 下 左;
第四种：独自设置
非连写(方向+要素)border-top-width: ;
宽度、高度分为三个：
内容：就是通过width/height属性设置的宽度和高度
元素：宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框也是通过控制台看见的尺寸大小
元素空间的宽度和高度：就是你看见的实际宽度

注意：

由等式可见。增加了padding/border之后**元素的宽高**也会发生变化，想保持元素的宽高, 那么就必须减少内容的宽高。
解决方式：
1.在内容中进行宽高的增减
2.设置box-sizing属性为border-box
这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变

内边距：就是盒子内容与其边框之间的距离。就是填充在内容外部与边框之间的填充物。可以单独设置padding-top或者连续设置padding

注意：

给标签设置内边距之后, 标签占有的宽度和高度会发生变化
给标签设置内边距之后, 内边距也会有背景颜色

外边距：盒子与盒子之间的距离 标签和标签之间的距离就是外边距
注意

外边距的那一部分是没有背景颜色的
外边距合并现象:默认布局的垂直方向上外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的
如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来
如果外面的盒子不想被一起顶下来,那么可以给外面的盒子添加一个边框属性
margin:0 auto;是让盒子自己水平居中

我的见解

 
当我们将标签的所有默认边距清空之后，看见的是实际内容的宽高，对其设置内边距，就是给他在外围包裹一层，设置边框，就是在padding外面又包裹一层，设置外边距，就是设置它与其他盒子的位置关系。
比如嵌套的两个盒子，均排列在页面的左上角，设置外面盒子的内边距，视觉上看起来就是内部的盒子被顶走了，其实是因为padding也具有背景颜色的缘故，实际上只是给外面的盒子内容套了一层填充物而已。
当给小盒子设置margin属性，会移动，脱离左上角的位置，但是margin-top会对两个盒子都起作用，所以大盒子也会移动，就是上面提到的margin-top问题。

            .small{
         /* width: 100px;
          height: 100px; */

            width:60px;
            height: 60px;
            padding: 20px; 
            /* 增加padding属性就相当与挤内部元素，其实是因为padding与背景一样具有相同的颜色。但是由于padding的加入导致元素的宽高变化，所以设置内容的宽高，或者设置
            box-sizing: border-box*/
            background-color:blueviolet;
             /* 增加border属性就相当给元素添加外壳*/
            border:10px solid blueviolet ; 
            }

CSS的特性

1. 继承性
   给父元素设置一些属性, 后代也可以使用, 这个我们就称之为继承性
   只有以color/font-/text-/line-开头的属性才可以继承
   a标签的文字颜色和下划线是不能继承的 也不是通过继承得到的
   h标签的文字大小是不能继承的 也不是通过继承得到的
   2.层叠性
   Cascading StyleSheet (层叠式样式表), 其中的层叠就是指层叠性
   层叠性就是CSS处理冲突的一种能力
   3.优先级
   间接选中就是指继承。如果是间接选中, 那么就是谁离目标标签比较近就听谁的
   相同选择器(直接选中)如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的
   不同选择器(直接选中)如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠
   id>类>标签>通配符>继承>浏览器默认
   通配符选择器也是直接选中

权重

只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的

!important

提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高

块级元素与行内元素 行内块级元素

块级元素

1. 独占一行
   2.如果没有设置宽度, 那么默认和父元素一样宽，如果设置了宽高, 那么就按照设置的来显示
   行内元素
   1.不会独占一行
   2.如果没有设置宽度, 那么默认和内容一样宽，行内元素是不可以设置宽度和高度的。注意这里只有宽度，并没有高度，高度是被内容撑起的，没有内容就没有高度。
   行内块级元素：既能够不独占一行, 又可以设置宽度和高度,

创建css

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有4种：

1. 在使用外部样式表的情况下。每个页面使用 link标签链接到样式表。link标签在（文档的）头部.
   缺点：HTML页面不纯净，文件体积大，不利于蜘蛛爬行，后期维护不方便。
2. 内部样式表（内嵌样式） 使用style标签 写在head标签里，与titile元素是兄弟哦。
   优缺点：页面使用公共CSS代码，也是每个页面都要定义的，如果一个网站有很多页面，每个文件都会变大，后期维护难度也大，如果文件很少，CSS代码也不多，这种样式还是很不错的。
3. 内联样式(行内样式) 相关的标签内使用样式（style）属性。多个属性使用分号非开，大家都包含在一个引号里。

    

    This is a paragraph
    

优缺点：实现了页面框架代码与表现CSS代码的完全分离，使得前期制作和后期维护都十分方便

4. 导入样式
   @import
   导入样式和链接样式比较相似，采用@import样式导入CSS样式表，在HTML初始化时，会被导入到HTML或者CSS文件中，成为文件的一部分，类似第二种内嵌样式。

3. 多重样式
   如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
   样式的优先级：内联>内部样式表>外部样式表>继承>浏览器默认

标准流

就是我们普遍意义上定义的文档布局类型，在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版。标准流又将元素分为块级元素/行内元素/行内块级元素。如果是块级元素，就是垂直排版。行内与行内块级就是水平排版。

浮动流

定义：依赖于标流的半脱靶（脱标）排版方式，在浮动流中是不区分块级元素/行内元素/行内块级元素的，所以元素都可以设置宽高，所有元素都是水平排版。

• 浮动流中没有居中对齐, 也就是没有center这个取值
• 在浮动流中是不可以使用margin: 0 auto;
• 脱标 ：当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标
• 后果：有两个并列的元素，比如div.如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元素会将后面的元素覆盖住。
  在标准流中，内容的高度是可以撑起父元素的高度的，而浮动流不可以.

浮动流中的排列规则

1. 相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面
2. 不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动
3. 浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定

浮动元素贴靠现象

• 如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示
• 如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠， 如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边

浮动元素字围现象

浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位

清除浮动

一个块级元素如果没有设置height，那么其高度就是由里面的子元素撑开，如果子元素使用浮动，脱离了标准的文档流，那么父元素的高度会将其忽略，如果不清除浮动，父元素会出现高度不够，那样如果设置border或者background都得不到正确的解析

清除浮动的方式：
1）给浮动元素的第一个盒子设置高度，给前面的父盒子添加高度
在企业开发中能不写高度就不写高度, 所以这种方式不常用
1)在浮动元素下加子元素

然后设置样式.clear{ height:0px;font-size:0;clear:both;}；
利用clear:both;属性清除前面浮动元素的影响
使用clear:both之后margin属性会失效, 所以不常用
2)在两个有浮动子元素的盒子之间添加一个额外的块级元素
在外墙法中可以通过设置额外标签的高度来实现margin效果
搜狐中大量使用了这个技术, 但是由于需要添加大量无意义的标签, 所以不常用
）在前面一个盒子的最后添加一个额外的块级元素
内墙法会自动撑起盒子的高度, 所以可以直接设置margin属性
和内墙法一样需要添加很多无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦

4)overflow:hidden的作用是清除溢出盒子边框外的内容
给前面一个盒子添加overflow:hidden属性
由于overflow:hidden可以撑起盒子的高度, 所以可以直接设置margin属性
IE8以前不支持利用overflow:hidden来清除浮动, 所以需要加上一个*zoom:1;

实际上*zoom:1能够触发IE8之前IE浏览器的hasLayout机制

优点可以不用添加额外的标签又可以撑起父元素的高度, 缺点和定位结合在一起使用时会有冲突
5)给前面的盒子添加伪元素来清除浮动

.clearfix:after {
            /*生成内容作为最后一个元素*/
            content: "";
            /*使生成的元素以块级元素显示,占满剩余空间*/
            display: block;
            /*避免生成内容破坏原有布局的高度*/
            height: 0;
            /*使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互*/
            visibility: hidden;
            /*重点是这一句*/
            clear: both;
        }
        .clearfix {
            /*用于兼容IE, 触发IE hasLayout*/
            *zoom:1;
        }

本质上和内墙法一样, 都是在前面一个盒子的最后添加一个额外的块级元素
添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性
CSS中还有一个东西叫做伪类, 伪元素和伪类不是同一个东西
7)给前面的盒子添加双伪元素来清除浮动
添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性
先知道有这些方式, 原理需要学习到BFC和hasLayout才能明白
支持BFC的浏览器（IE8+，firefox，chrome，safari）通过创建新的BFC闭合浮动；
不支持 BFC的浏览器 （IE5-7），通过触发 hasLayout 闭合浮动。

作者：极客江南
链接：https://www.jianshu.com/p/3c3bfcc37de6
来源：
著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

定位流

1.相对定位
2.绝对定位
3.固定定位
4.静态定位

相对定位(属于标准流)

相对于自己以前在标准流中的位置来移动position:relative+top/left/bottem/right
相对定位注意点:

• 在相对定位中同一个方向上的定位属性只能使用一个top/bottom 只能用一个left/right 只能用一个
• 相对定位是不脱离标准流的, 会继续在标准流中占用一份空间,由于相对定位是不脱离标准流的, 所以在相对定位中区分块级元素/行内元素/行内块级元素,所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局.、

绝对定位（定位流）

• 绝对定位就是相对于body或者某个定位流中的祖先元素来定位
  position: absolute;

绝对定位的元素是脱离标准流的, 不会占用标准流中的位置，所以绝对定位的元素不区分块级元素/行内元素/行内块级元素

绝对定位参考点:
默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点,如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点相对于body定位会随着页面的滚动而滚动
如果一个绝对定位的元素有祖先元素, 并且祖先元素中有一个是定位流中的元素, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点
如果一个绝对定位的元素有祖先元素, 并且祖先元素中有多个是定位流中的元素, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点

注意点：与浮动流类似
绝对定位不能使用margin: 0 auto;让盒子自身居中
解决方法：可以使用left: 50%; margin-left:-元素宽度一半px;
一个绝对定位的元素会忽略祖先元素的padding
### 固定定位（定位流）
- 让某个盒子不随着滚动条的滚动而滚动 position: fixed;
固定定位的元素是脱离标准流的, 不会占用标准流中的位置，元素不区分块级元素/行内元素/行内块级元素，IE6不支持固定定位
## 静态定位（标准流）
默认情况下标准流中的元素position属性就等于static, 所以静态定位其实就是默认的标准流
### z-index属性
用于指定定位的元素的覆盖关系
默认情况下定位的元素一定会盖住没有定位的元素
默认情况下写在后面的定位元素会盖住前面的定位元素
默认情况下所有元素的z-index值都是0, 如果设置了元素的z-index值, 那么谁比较大谁就显示在前面
####定位元素的从父现象
父元素没有z-index值, 那么子元素谁的z-index大谁盖住谁
父元素z-index值不一样, 那么父元素谁的z-index大谁盖住谁

css3新增属性

过渡模块 transition

使用hover的时候变换太快，没有缓冲，太生硬。
给元素添加transition-property属性:属性值是需要进行过渡的属性。
transition-duration 告诉系统过渡时长
三要素：

1. 必须有属性改变 一般使用hover监听
2. 告诉系统哪个属性需要执行过渡(原有标签填写) /给元素添加过渡名称属性 transition-property：属性1，属性2.......
   3.告诉系统过渡时长/给元素添加过渡时长属性 transition-duration
   transition-property：告诉系统哪个属性需要执行过渡，多个属性使用逗号隔开
   transition-duration：告诉系统过渡时长
   transition-timing-function：过渡的运动速度 ease linear ease-in ease-out ease-in-out
   transition-delay:延迟时间
   transition过渡属性 过渡时长 运动速度 延迟时间
   注意：多个属性需要过渡，与分开写一样，需要使用逗号分开,因为css的层叠性
   后面两个属性可以省略，因为前面两个满足过渡的三要素了
   当拥有多个属性时，所有属性的过渡时间 过渡速度以及延迟时间都相同的时候，可以使用 transition all 延迟时间;
   transition all 0;

转换模块(2D):transform属性：取值有以下几种，这里的取值都是函数，因为都需要接受参数

translate():平移
rotate(xxdeg)：旋转（默认是Z轴旋转）
rotateX() rotateY()
transform-origin:旋转的中心点
scale()：缩放 水平与垂直的缩放如果一致就可以缩写为一个
只要父元素被拉伸，子元素也会被拉伸
其他属性：
skew()
matrix()
综合旋转：多个属性使用空格分开 而且2D的转换是会转换坐标系的

转换模块(3D)

2D与3D的区别：
2d只有长度与高度，3d还有厚度。想要元素显示3d效果，就要设置显示元素的父元素的transform-style属性值为preserve-3d
transform-style:preserve-3d

动画模块

动画三要素：
1.告诉系统需要执行哪个动画 animation-name:
2.告诉系统我们需要自己创建一个动画 @keyframes 可以使用from to 或者百分比来分段
3.告诉系统动画持续时长 animation-direction:
animation: name duration timing-function delay iteration-count direction fill-mode;
name :动画名称
duration ：持续时间
timing-function：运动速度
delay:延迟多久执行动画
iteration-count ：执行次数
direction ：是否需要往返 alternate表示需要 注意往返是两次
fill-mode：定义等待与结束时的状态 backward：等待状态显示为第一帧动画
forward:结束状态保持动画的最后一帧
简写：animation: name duration
animation-play-state属性：告诉系统当前动画是否需要暂停
running：执行动画 pause:暂停动画

新增属性

边框属性：
box-shadow边框阴影
box-shadow: 水平偏移 垂直偏移 模糊度 扩展大小 颜色 内外边框;
默认是外阴影，这里的阴影颜色是与盒子内容颜色一致的。并不是默认黑色。
缩写：box-shadow: 水平偏移 垂直偏移 模糊度
同理：文字阴影也这样
text-shadow: 水平偏移 垂直偏移 模糊度 阴影颜色
border-radius 圆角边框
border-image 边框图片
背景：
background-size：宽度 高度
cover:背景图片等比拉伸 需要拉伸到全填满元素
contain:背景图片等比拉伸 需要拉伸到其中一个方向填满。
background-origin:背景图什么区域开始描绘 默认是padding-box 还有border-box content-box
多重背景：backgroud
多张照片使用逗号隔开即可。先添加的背景图片覆盖后来的背景图片。
可分开编写：
backgroud-image
backgroud-repeat
backgroud-position

HTML 简介

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

基本结构

• !DOCTYPE html 声明为 HTML5 文档

• html 元素是 HTML 页面的根元素

• head 元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8

• title 元素描述了文档的标题

• body元素包含了可见的页面内容

• h1 元素定义一个大标题

• p 元素定义一个段落

• a 定义链接 这是一个链接

最简单的结构

我的第一个标题
我的第一个段落。

HTML的标签

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式.标签带有箭头，属性是没有箭头的。

special

div与span

html速查列表

升级版的XHTML

XHTML 是以 XML 格式编写的 HTML。XML 是一种必须正确标记且格式良好的标记语言

input 标签

 标签规定了用户可以在其中输入数据的输入字段。

 元素在 
 元素中使用，用来声明允许用户输入数据的 input 控件。

输入字段可通过多种方式改变，取决于 type 属性

input的属性

button 标签

 在  元素内部，您可以放置内容，比如文本或图像。这是该元素与使用  元素创建的按钮之间的不同之处。

• Button对象的属性

  disabled    设置或返回是否禁用按钮。
  form      返回对包含按钮的表单的引用。  
  name      设置或返回按钮的名称。 
  type      返回按钮的表单类型。  
  value     设置或返回显示在按钮上的文本。