html5 css3知识点,HTML5和CSS3知识点总结

1. 首先要分别创建html,img和css3的文件夹。css

2. html和css3的首页放在文件夹外面。还能够创建一个公共css，好比导航和页脚能够放在公共css里面，在每一个页面加上公共css超连接就能够了。减小代码的编写。html

3. 文件夹的名称要写成英文形式。也不要写成汉语拼音，html识别不出来汉字。html5

4.class与id的区别：css3

(1)、在CSS文件里书写时，ID加前缀"#"；CLASS用"."(2)、id一个页面只可使用一次；class能够屡次引用。(3)、ID是一个标签，用于区分不一样的结构和内容，就象名字，若是一个屋子有2我的同名，就会出现混淆；class是一个样式，能够套在任何结构和内容上，就象一件衣服；(4)、从概念上说就是不同的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。(5)目前的浏览器还都容许用多个相同ID，通常状况下也能正常显示，不过当你须要用JavaScript经过id来控制div时就会出现错误。浏览器

5.html中一些常见的特殊符号须要记住：空格©©;>><

6.Html5中position的定位主要分为绝对定位，相对定位，静态定位，固定定位，继承父级定位，语法分别为position：absolute|relative|static|fixed|inhret，定位以后能够设置top，bottom，left，right四个属性值，其中优先级：top>bottom,left>right工具

一．绝对定位布局

它是相对不是static最近一级父元素来进行定位的，被定位元素会脱离文档流，而后咱们能够经过left,right,top,bottom来调整元素的位置动画

特色：spa

1.彻底脱离文档流，

2.提高层级等级，

3.针对父级定位，若是父级没有定位，那就找父级上一级定位，若是父级上一级没有定位，最终以docment进行定位，

4.绝对定位通常配合相对定位使用，相对定位是父级，绝对定位是子级，

5.支持全部CSS样式，

6.提高定位元素层级的命令 z-index数字越大，越向上显示，

7.若是绝对定位的子集有浮动，能够不作清除浮动操做。

二．相对定位

也就是相对于本身在文档流中的位置进行定位。

特色：

1.不脱离文档流，原有空间位置被保留，

2.针对本身自己位置进行定位，

3.不影响元素自己属性的设置

注意：

1.若是一个定位元素，同时设置了top和bottom，top的优先级更高，会显示top的值，

2.若是同时设置Left和right的值，优先级取决于网页语言，在英语网页中left的优先级更高，会显示left的值，在阿拉伯语言网页中right的优先级更高，

3.若是一个元素设置了相对定位(甚至是作了偏移)，其余元素排版时参考的依然是那个原有位置(没有设置偏移前的位置)，

4.若是一个元素设置了相对定位，它的原有位置空间被保留。即便该元素作偏移，其余元素也不会占据它原有的(偏移前)的位置。

三．固定定位

是相对浏览器窗口(docment)进行定位的，一样也是脱离文档流，能够经过left，top，right，bottom来调整元素所在的位置。

特色：

1.通常用来作页面的导航部分与底部，

2.能够用来网页中插入广告和商业推广。

注意：在使用时候，尽可能使用在页面的底部，由于即便脱离文档流也不会影响布局

四，几种定位简单比较总结

1.position：relative;不会脱离文档流

2.position：absolute|fixed；脱离文档流

3.absolute是相对于父级非static进行定位

4.fixed始终是相对于浏览器窗口进行定位

定位的用途：

1.图片的叠加

2，元素的垂直居中

3.布局位置的改变

4，广告植入

8.后代选择器语法：最高代 下一代 ...子代(全部的子级)

代与代之间用空格隔开

子选择器语法：最高代>下一代>...>子代(相邻的子级)

代与代之间用>隔开

相邻兄弟选择器：同级

用+隔开

4.margin:

(1)上右下左

(2)上下，左右

(3)上，左右，下

(4)上，右，下，左

auto

浏览器计算外边距。在网页设计当中能够加一个大的div，而后设置margin：0 anto wight:xxx

length

规定以具体单位计的外边距值，好比像素、厘米等。默认值是 0px。

%

规定基于父元素的宽度的百分比的外边距。

inherit

规定应该从父元素继承外边距。

7.过渡属性(Transition)

8.html中link标记容许当前文档和外部文档之间创建链接，可是只能在head标签里面用。href设置或获取目标 URL ，rel设置或获取对象和连接目的的关系，type设置或获取对象的 MIME 类型，media设置或获取媒体类型。all 就表示all全部媒体类型的样式

11.块元素与内联元素的区别？

块级元素：div、h1-h6标题、form(只能用来容纳其余块元素)、hr、p、table、ul、ol

内联元素：aspaninput img

(1)块元素，老是在新行上开始；内联元素，和其余元素都在一行上。(2)块元素，能容纳其余块元素或内联元素；内联元素，只能容纳文本或者其余内联元素。(3)块元素中高度，行高以及顶和底边距均可控制；内联元素中高，行高及顶和底边距不可改变。

12.block(块)元素的特色：①老是在新行上开始；②高度，行高以及外边距和内边距均可控制；③宽度缺省是它的容器的100%，除非设定一个宽度。④它能够容纳内联元素和其余块元素

13.inline元素的特色：①和其余元素都在一行上；②高，行高及外边距和内边距不可改变；③宽度就是它的文字或图片的宽度，不可改变④内联元素只能容纳文本或者其余内联元素

14.逗号

(1)css中 用逗号隔开表示两个不一样类的样式类名用同一个样式；

(2)空格隔开表示从属包含关系，是当前的元素子元素；

(3)逗号隔开表示并列关系，二者之间没有任何关系，可使用同一个样式。

15. 标签的target属性规定在何处打开连接文档。

16.CSS 伪类用于向某些选择器添加特殊的效果

(1)伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。

(2)伪元素的由两个冒号::开头，而后是伪元素的名称。

17.清除浮动的三种方法：

(1).在最后一个div后面加上一个空的div，而后在css中给定 clear：both;content:’’

(2).在css中跟最后一个浮动的div加上clear：both;

(3).在css中跟最后一个浮动的div加上display:flow-root;

18.锚连接(锚连接通常用于本页面的跳转，好比页面太长，到了尾部要瞬间到顶部，就能够用锚连接)。

19.csscss3动画有哪些实现方式？Transitions 、transforms和 Animations1.Transitions特色：平滑的改变CSS的值

2.transforms特色：变换主要实现(拉伸，压缩，旋转，偏移)3.Animations特色：适用于CSS2，CSS3

transform:translate(0,50px)沿x轴方向不变，沿y轴方向向下移动50像素；transform:scale(1.1,1.1)放大1.1倍；

Transform:rotate(90deg)   transform:rotateX(30deg) rotateY(30deg)

20.伪类、伪元素以及它们的区别伪类：一、锚伪类

二、：first-child伪类

三、：lang伪类

伪元素：一、：first-line伪元素

二、：first-letter伪元素

三、：before

四、：after

21.单位有：pc mm cm px ex em

(1).16px=1em=100%

22.使用雪碧图的优势有如下几点：

(1)将多张图片合并到一张图片中，能够减少图片的总大小

(2)将多张图片合并到一张图片后，只需一次网络请求就能够将所需的资源所有下载，减少创建链接的消耗，在移动端尤其明显

雪碧图的制做与使用方法：

(1)使用图像编辑软件如Photoshop将多张图放到同一个图层并导出或使用自动化构建工具自动拼接合并后的图片

(2)引用图片时，图片地址为合并后的图片地址，经过background-position调整背景图的位置，并经过容器的宽高共同做用，来选出所需的图片