html/css知识点总结

1. 单位转换

1M=1024KB 1K=1024B,1B=8b(it);
B是字节,b也就是bit,是位,KB跟Kb是不一样的。

2.

Cookie:通过在客户端 ( 浏览器 ) 记录信息确定用户身份,最大为 4 kb ;
url :参数用的是 get 方法,从服务器上获取数据,大小不能大于 2 kb ;
Session: 是服务器端使用的一种记录客户端状态的机制 ;
post :是向服务器传送数据,数据量较大;

local Storage :也是 HTML5 的本地存储,将数据保存在客户端中(一般是永久的),
写入字段有三种方式:
localStorage[“a”]=1;
localStorage.b=1;
localStorage.setItem(“c”,3);
读取字段也有三种方式:
var a= localStorage.a;
var b= localStorage[“b”];
var c= localStorage.getItem(“c”);

3. margin-top,padding-top

当margin-top、padding-top的值是百分比时,分别是如何计算的?
相对最近父级块级元素的width,相对最近父级块级元素的width;
为什么不是height?
采用height,就可能导致一个无限循环,父元素的height会增加,以适应后代元素上下外边距的增加,而相应的,上下外边距因为父元素height的增加也会增加。

4. reflow和repaint(回流与重绘)
  1. repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲染。

  2. reflow(回流,渲染),与repaint区别就是他会影响到dom的结构渲染,同时他会触发repaint,他会改变他本身与所有父辈元素(祖先),这种开销是非常昂贵的,导致性能下降是必然的,页面元素越多效果越明显。
    例:
    display:none才会产生reflow;(dom结构发生改变)
    visibility:hidden只会产生repaint。(dom结构未改变)

5. css 选择器优先级

嵌入(行内)>ID选择器>Class选择器=伪类>标签名称选择器
一般来说,选择器的优先级(从上往下依次降低)是:

  1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
    例:
    关键字!important必须放在一行样式的末尾并且要放在该行分号前,否则就没有效果
div{
     margin-left:20px!important;
     margin-left:40px;
}
  1. 作为style属性写在元素内的样式(权重:1000)
  2. id选择器(权重:100)
  3. 类选择器(伪类选择器)(权重:10)
  4. 标签选择器(权重:1)
  5. 通配符选择器
    权重计算:
    ul#related span 的权重为 1+100+1=102
6. css 伪类

:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时,向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
触发顺序:
link–>visited—>hover—>focus—>active

7. css 结构
<dl>
<dt> </dt><!--definition title-->
<dd> </dd><!--definition description-->
</dl>

1,@import url()机制是不同于link的,link是在加载页面前把css加载完毕,而@import url()则是读取完文件后在加载,所以会出现一开始没有css样式,闪烁一下出现样式后的页面(网速慢的情况下)。
2,@import 是css2里面的,所以古老的ie5不支持。
3,当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
4,link除了能加载css外还能定义RSS,定义rel连接属性,@import只能加载css

9. 无font-color,text-color

字体颜色统一用color,加上就近原则

10. 置换元素和非可置换元素

置换元素:
是指:浏览器根据元素的标签和属性,来决定元素的具体显示内容。
<img> <input> <textarea> <select> <object>都是置换元素,这些置换元素往往没有实际内容,即是一个空元素。
非可置换元素:
<p> <label>

11. document.querySelectorALL()

该方法返回匹配的元素集合,如果没有匹配项,返回空的nodelist(节点数组)
该方法接受三种类型的参数:id(#),class(.),标签 ,用法如下:

document.querySelectorAll('.file/#file/div')[0]

12. 图片格式

网页html文档支持的图片格式有jpg , gif , png 和 bmp

13. 可继承和不可继承属性

可继承:
color,font相关的,line-height
不可继承:display、margin、border、padding、background、height、width、overflow、position、left、right、top、 bottom、z-index、float、clear
所有元素可继承:
visibility和cursor。

14. table的cellpadding,cellspacing

这里写图片描述              这里写图片描述

15. 添加css样式
  • 内联式:即直接加在标签上的样式 如:<div style="width:100px;"></div>

  • 导入样式:@import url("css/style.css")

  • 嵌入式:即用<style> </style>标签括起来写在页面中的样式

  • 外部引用式:即将样式单独放到一个文件夹中,然后用link标签引入页面的形式,如:<link rel="stylesheet" type="text/css" href="Css.css" />

16. 块级元素,行内元素
  • 块级元素
    这里写图片描述

  • 行内元素
    这里写图片描述

17. 层级显示优先级

优先级:
frameset(帧元素) > 表单元素(如文本输入框,密码输入框,单选框) > 非表单元素(a,div,table,span)
有窗口的元素总是显示在无窗口元素的前面

18. H5新增标签
article: 标签定义外部的内容。
aside:标签定义 article 以外的内容。a
audio:h5新增音频标签。没有高宽属性。
canvas:h5新增画布标签。
command: 定义命令按钮(未测试)
datalist:标签定义选项列表。
datalist 及其选项不会被想显示出来,它仅仅是合法的输入值列表。
details:标签用于描述文档或文档某个部分的细节。
figure:标签用于对元素进行组合。
figcaption:定义 figure 元素的标题。
footer:定义 section 或 document 的页脚。
header:定义 section 或 document 的页眉。
hgroup:用于对网页或区段(section)的标题进行组合。
keygen:标签规定用于表单的密钥对生成器字段
mark:标签定义带有记号的文本。
meter:通过min="0" max="20"的方式定义度量衡。仅用于已知最大和最小值的度量。
nav:定义document或section或article的导航。
output:定义不同的输出类型,比如脚本。
progress:定义任何类型的任务的进度。
rp:定义若浏览器不支持 ruby 元素显示的内容
rt:定义 ruby 注释的解释
ruby:定义 ruby 注释
section:标签定义文档中的节、区段。比如章节、页眉、页脚或文档中的其他部分。
source:audio和video的属性之一。为audio和video定义媒介源。
summary:为details定义标题。
time:定义日期或时间。
video:h5新增视频标签。具有高宽属性。
19. CSS3之转化(transform),过渡(transition)

这里写图片描述
transition 属性是一个简写属性,用于设置四个过渡属性:transition-property、transition-duration、transition-timing-function、transition-delay
这里写图片描述

transition:all 0.5s;
20. ::after, ::before的用法
div::after{
  content:"123";/*content属性必须有*/
}

注:::after,::before的内容是添加在被选择元素的内容(不是被选择元素)的前后,上述例子123会显示在div内部。

21. border和::after画三角形
<style >
            .wrap{
                width: 100px;
                height: 100px;
                position: relative;
                background-color: yellowgreen;          
            }

            .wrap::after{
                content: ""; /*!!!!*/
                width: 0;
                height: 0;
                position: absolute;
                left: 100px;
                border: solid 50px;
                border-color: transparent transparent transparent blue;
            }
        </style>

<body>
    <div class="wrap"></div>
</body>

效果如下:
这里写图片描述

22. line-height和height

line-height为行高,若div的line-height:20px,则其实际高度取决于它有多少行;
当line-height和元素height一样时,可实现文字垂直居中。

23. css Sprites

合并后的图片小于各图片之和

24. overflow参数
overflowscroll   //必会出现滚动条 
overflowauto  //子元素内容大于父元素时出现滚动条
overflowvisible  //溢出的内容出现在父元素之外
overflowhidden  //溢出隐藏
25. target=”_blank”
<a href="/XXXX"  target="_blank" >打开</a>
_blank      在新窗口中打开被链接文档。
_self       默认。在相同的框架中打开被链接文档。
_parent     在父框架集中打开被链接文档。
_top        在整个窗口中打开被链接文档。
framename   在指定的框架中打开被链接文档。
26. hover之后的事件
.tooltip{
            display: none;
        }

/*hover之后改变toolitip的样式,当tooltip和input为兄弟节点时*/       
input:hover+.tooltip{
        display: block; 
        }   
/*当toolitip和input为父子节点时*/
input:hover .tooltip{
        display: block; 
    }   
27. viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width://控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height://和 width 相对应,指定高度。
initial-scale//初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale//允许用户缩放到的最大比例。
minimum-scale//允许用户缩放到的最小比例。
user-scalable//用户是否可以手动缩放。

事件捕获->事件处理->事件冒泡

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值