奉行卓越设计
打造国际品质

新闻中心 Case真实、正向、传递价值

当前位置:主页 > 新闻资讯 > 网站建设 >

html5基础知识点总结

日期:2018-06-12 / 点击:

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

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

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

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

  scrolling

  yes

  no

  auto

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

  <iFrame scrolling=“yes” frameborder=“0” ></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{background:red;}匹配任何在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页中的轮播图就可以获取宽度做自适应了。