html5基础知识点总结

久违了，诸位上仙，最近一直忙于学习新的技能包，未能持续更新，敬请谅解。

您关心的，正是我关注的，闭关修行，只为分享更好的东西给您，谢谢支持。

display:none 不为被隐藏的对象保留其物理空间 visibility：hidden 为被隐藏的对象保留其物理空间

也就是display:;当他的值变成block 的时候，它所在的结构才会被加载进来。

而visibility就会在加载页面的同时就已经把它加载进来了，因为他的值为hidden的时候，它所占的空间还在。

2、不再使用frame框架，由于框架对网页可用性存在负面影响。所以废除。只可以用iFrame 或， 用服务器方，在同一个页面加载不同页面。

scrolling

yes

no

auto

规定是否在 iframe 中显示滚动条。

3.新增类型属性

新增类型（type属性）

Search Tel url Email Number Range Color date pickers (date, month, week, time, datetime, datetime-local)

浮动、定位、overflow

overflow

用于规定当内容超过当前可显示的范围时，采用什么样的表现方式

属性值

auto

滚动条，当内容超过元素区域的时候，会出现滚动条

scroll

滚动条，当内容超过元素区域的时候，会出现滚动条

hidden

溢出隐藏

overflow在某些浏览器中，滚动条的显示偶尔会发生错误，将滚动条的宽度在内容中减去，

例如：原本宽高是300x300 出现错误后，会自动减少17px的滚动条位置内容内容会变成283*283

overflow-x:hidden

水平方向溢出

overflow-y:hidden

竖直方向溢出

现在方向已无效

visibility

visibility：none

让元素消失，但是还在原本位置上还占据位置

select

双标签

语义：下拉菜单

属性

selected="selected"

用于控制默认的选项是哪一个

选项：option

代码

子主题 1

float

语义：说白了就是飘起来

属性

left

左浮动

right

右浮动

none

不浮动

特性

1.如果说没有宽度，浮动元素的内容会去撑开宽度，并且排列在同一排

2.会使浮动元素支持所有的css样式（内联元素本不支持宽高，浮动之后支持宽高）

3.使元素脱离文档流

4.提升层级“半级”

5.浮动元素碰到父级元素或者其他浮动元素边界就会停

清除浮动的原因

因为设置了浮动，外层div无法根据父级去撑开高度所以我们需要去清除浮动让他重新撑开高度

清除浮动的方法

1.给父级重新设置可以容纳子集的高度（不推荐使用，拓展性差）

应用情况：当已知内部所有子元素的高度

缺点：拓展性差

2.给父级设置浮动（不推荐使用）

应用情况

确定父级浮动不会对下一个产生影响

缺点：父级浮动会对下一个产生影响

3.overflow：hidden

注意

1.得有宽度

2.低版本浏览器中不支持overflow

3.超出部分会直接隐藏

很多时候都会直接用这种方法

不推荐使用

4.给父级display：inline-block

不使用

5.clear

left：清除左浮动

right：清除右浮动

both：同时清除左右浮动

每一次都需要找到当前浮动元素产生影响的哪一个元素

none：不清除

6.在当前标签后面添加一个内容

使用情况比较多，用于设置给内部浮动元素的父级

定位

是什么

用于固定位置

可以做什么

1.用于布局

2.实线悬浮广告

属性

static

默认值，不定位

relative

相对定位

属性

left

right

top

bottom

特性

1.不会使元素脱离本身的文档流，元素的位置移动之后，原始的位置会保留

2.相对定位不会影响元素本身的特性

3.如果不去设置偏移数值，则对元素本身没有任何影响（配合绝对定位使用）

注意

1.当同时设置top和bottom的时候，top会生效

2.当同时设置left和right 的时候，left会生效

3.相对定位是参考于自身原始的位置

absolute

绝对定位

属性

left

right

top

bottom

特性

1.使元素完全脱离文档流

2.使内联元素完全支持宽高

3.使块元素内容去撑开宽高

块元素默认继承父级宽度，当设置绝对定位之后，使块元素内容去撑开宽高

不会继承父级宽高

4.绝对定位元素的位移是参考于离他最近，设置了定位的父级（除去static）

先看其父级有无设定位，如果设定位就相对于这个父级，如果这个父级没有设置，就继续往上找父级的父级，直到找到设置定位的父级，参考其进行定位

fixed

固定定位

几乎和绝对定位一模一样，跟绝对定位有不一样的地方，固定定位参考的一直都是浏览器位

z-index

用于定位层级，具体数值为数字

可以通过设置z-index去更改他们的层级关系

注意：

1.建议在兄弟标签中去比较层级

2.建议大家不要设置 负数（只能看，不能点击）

opacity

透明度

数值

0—1

关于定位和浮动的解释说明

1.position：relative；和position：absolute

都可以改变元素在文档流中的位置，同时可以激活

top，right，bottom，left这四个属性。

在未激活之前也可以写出来，但是没有实际效果。

z-index 未设置之前全部是auto

2.网页看起来是二维结构，但实际上是存在Z轴的，

Z轴的大小由z-index决定

默认情况下，所有的元素全部处于 z-index=0

这一层，元素根据自己的display类型，长和宽以及内边距

等属性来决定如何排列在z-index为0的这一层。

这一层我们称之为“文档流”

3.设置了绝对定位和浮动后，我们的元素会“浮”起来

也就是z-index大于0，他会改变正常状态下的文档流，但是

相对定位会改变自己在z-index中的位置，虽然偏离了原本的位置，

可是还是存在于文档流中的

但是绝对定位会使元素完全脱离文档流，不在z-index=0中

4.而我们的浮动元素不会让元素“上浮”到另一层，他依然在z-index=0

折一层，可是会改变正常的文档流

从而影响到其他元素

小知识

控制光标样式

cursor：

move

移动光标

text

文本

pointer

小手

自定义图片

1.url（“路径”），备选项

2.图片格式最好为cur格式，其他图片有兼容性

3.图片尺寸必须小于64*64

文本居中

水平居中

text-align：center

垂直居中 vertical-align：middle

display除了可以设置inline-block和inline和block这三种基础类型之外，还可以设置一些特殊的类型 例如 table、 table-cell、flex

我们可以修改他们的类型，让我们的标签具有他们的某些特征 垂直对齐方式

垂直居中的其他属性

baseline

基线对齐

top

顶部对齐

bottom

底部对齐

middle

居中对齐

css3选择器

同级元素通用选择器

选择器1~选择器2{}

匹配任何在元素1之后的同级元素2

例如：p~ul匹配任何在p元素之后的同级ul元素

相邻兄弟选择器

选择器1+选择器2

可选择紧接在另一个元素之后的元素，且二者有相同的父元素

注意：两个元素必须紧挨着

例如：h1+p{ }；选择紧跟在h1之后p元素，中间不可以有其他标签元素

属性选择器

[target] 选择具有target的属性的所有属性

[target=_blank] 选择带有target=“_blank”的属性的所有元素

css3伪类选择器

：before

p:before{}

在每个p元素之前插入内容

：after

p：after

在每个p元素之后插入内容

：nth-child(n)

p：nth-child(2)

选择属于其父元素的第二个子元素的p元素

：nth-last-child(n)

p：nth-last-child(2)

选择属于其父元素的第二个子元素的p元素

：nth-of-type(n)

p：nth-of-type(2)

选择属于其父元素的第二个p元素

：nth-last-of-type(n)

p：nth-last-of-type(2)

选择属于其父元素的倒数第二个p元素

：last-child

p：last-child

选择属于其父级的最后一个p元素

css3背景属性

新特性

透明背景

渐变背景

背景圆点控制

背景剪切控制

background-clip

将背景图片做适当的裁剪

background-clip指定背景绘制区域

值

content-box

padding-box

border-box

裁剪方法

根据设置的分支部分，图片在这个部分的边缘以外的部分都不可见

background-origin

决定图片的原始起始位置

值

content-box

padding-box

border-box

注意

如果背景图片backgrond-attachment是固定，这个值没有任何效果

css3边框属性

border-radius

边框圆角度

示意图

案例

box-shadow

阴影效果

box-shadow: 10px 20px 30px #000;

box-shadow:inset 0px 0px 100px #000;

inset代表内阴影

10px;横向偏移量

20px;纵向偏移量

30px;模糊程度

#000；阴影颜色

text-shadow

文字阴影

text-shadow: 10px 20px 30px #000;

transform

transform:translate(100px,100px)

位移

transform:(1.5)

缩放

transition

动画过度

transition：all 0.3

select

双标签

语义：下拉菜单

属性

selected="selected"

用于控制默认的选项是哪一个

选项：option

代码

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

做了一个tab导航栏，点击一个tab页其它tab页隐藏，这时候第一想法是使用display：none来控制显示隐藏，写了之后发现使用display会有一个问题，就是第二个tab页的轮播图是在页面渲染时获取第二个tab页中某个元素的宽度来做自适应效果，因为已经隐藏，宽度为0，所以导致轮播图的高度也为0，后来把display:none改为visibility：hidden就正常显示和播放了。

display:none和visibility:hidden的区别是：

1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；

2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。

所以我使用visibility:hidden，在页面渲染时第二个tab页中的轮播图就可以获取宽度做自适应了。

快，关注这个公众号，一起涨姿势～

已经把曾经深深爱你的人，从记事本里划掉了吧。

你已经被自己深深爱着的人，从记事本里划掉了吧。

你已经在很多个记事本里，被划掉了吧。

你已经把划掉的名字，回想过很多次了吧。

在这个漆黑的夜，很多人的愿望是在心里下一场刀子雨，把赖在里边不走的人剁为肉泥。

——张嘉佳《从你的全世界路过》