前端笔记

Posted fireporsche

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端笔记相关的知识,希望对你有一定的参考价值。

1.

display属性 :
block : CSS1 块对象的默认值。将对象强制作为块对象呈递,为对象之后添加新行   可以定义高度和宽度
none : CSS1 隐藏对象。与 visibility 属性的hidden值不同,其不为被隐藏的对象保留其物理空间
inline : CSS1 内联对象的默认值。将对象强制作为内联对象呈递,从对象中删除行
inline-block : IE5.5 将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内 inherit: 看display默认是不具备继承性的,使用inherit可以让其继承父对象的display属性。
2.
overflow属性:
参数是scroll时候,必会出现滚动条。
参数是auto时候,子元素内容大于父元素时出现滚动条。
参数是visible时候,溢出的内容出现在父元素之外。
参数是hidden时候,溢出隐藏。
3.
target属性:
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。
4.
Flash提供了ExternalInterface接口与javascript通信
两个方法:call和addCallback
作用:call让Flash调用js里的方法,addCallback是用来注册flash函数让js调用。
5.
alt属性和title属性
alt是html标签的属性,而title既是html标签,又是html属性。 
title标签这个不用多说,网页的标题就是写在<title></title>这对标签之内的。 
title作为属性时,用来为元素提供额外说明信息。例如,给超链接标签a添加了title属性,把鼠标移动到该链接上面是,就会显示title的内容,以达到补充说明或者提示的效果。 
而alt属性则是用来指定替换文字,只能用在img、area和input元素中(包括applet元素),用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。
6.
position属性
◆position:static 无定位
 
该属性值是所有元素定位的默认情况,在一般情况下,我们不需要特别的去声明它,但有时候遇到继承的情况,我们不愿意见到元素所继承的属性影响本身,从而可以用position:static取消继承,即还原元素定位的默认值。
 
 
◆position:absolute 绝对定位
 
使用position:absolute,能够很准确的将元素移动到你想要的位置,
 
 
◆position:fixed 相对于窗口的固定定位
 
这个定位属性值是什么意思呢?元素的定位方式同absolute类似,但它的包含块是视区本身。在屏幕媒体如WEB浏览器中,元素在文档滚动时不会在浏览器视察中移动。例如,它允许框架样式布局。在页式媒体如打印输出中,一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果,但大都数效果不是通过CSS来实现了,而是应用了JS脚本。
请特别注意,IE6不支持CSS中的position:fixed属性。真的非常遗憾,要不然我们就可以试试这种酷酷的效果了。
 
◆position:relative 相对定位
 
所谓相对定位到底是什么意思呢,是基于哪里的相对呢?我们需要明确一个概念,相对定位是相对于元素默认的位置的定位。既然是相对的,我们就需要设置不同的值来声明定位在哪里,top、bottom、left、right四个数值配合,来明确元素的位置。
7.
文档类型
DTD(文档类型定义)是一组机器可读的规则,他们定义 XML 或 HTML 的特定版本中允许有什么,不允许有什么。在解析网页时,浏览器将使用这些规则检查页面的有效性并且采取相应的措施。浏览器通过分析页面的 DOCTYPE 声明来了解要使用哪个 DTD ,由此知道要使用 HTML 的哪个版本。
 DOCTYPE 当前有两种风格,严格( strict )和过渡( transitional )。过渡 DOCTYPE 的目的是帮助开发人员从老版本迁移到新版本。
如果发送具有正确的 MIME 类型的 XHTML 文档,理解 XML 的浏览器将不显示无效的页面。

浏览器模式

    浏览器有两种呈现模式:标准模式和混杂模式(quirks mode)。在标准模式中,浏览器根据规范呈现页面;在混杂模式中,页面以一种比较宽松的向后兼容的方式显示。

DOCTYPE 切换

对于 HTML 4.01 文档,
  • 包含严格 DTD 的 DOCTYPE 常常导致页面以标准模式呈现。
  • 包含过度 DTD 和 URI 的 DOCTYPE 也导致页面以标准模式呈现。
  • 但是有过度 DTD 而没有 URI 会导致页面以混杂模式呈现。
  • DOCTYPE 不存在或形式不正确会导致 HTML 和 XHTML 文档以混杂模式呈现。

    8.
    1.效果
    border-style:none;//无边框         
    border-width:0;//边框宽度为0px  
    2.区别
    (1)性能差异
    border:0;浏览器对border-width、border-color进行渲染,占用内存。
    border:none;浏览器不进行渲染,不占用内存。
    Chrome:
    border:none;>> border:initial none initial;
    border:0;>> border:0 initial  initial ;
    Firefox、360:
    border:none; >>border:medium none;
    border:0;>> border:0 none;
    计算出的样式:
    border:0px none 元素color属性值;
    (2)浏览器兼容
    IE7-不支持border:none;
    W3C提示:请始终把border-style属性声明到border-color属性之前,元素必须在改变颜色之前获得边框。
    参考网站:https://segmentfault.com/q/1010000000694683/a-1020000001818777

以上是关于前端笔记的主要内容,如果未能解决你的问题,请参考以下文章

前端防扒代码片段

前端防扒代码片段

前端防扒代码片段

前端防扒代码片段

前端防扒代码片段

前端开发工具vscode如何快速生成代码片段