html/css知识点总结

最新推荐文章于 2024-05-27 00:00:00 发布

爱码喵

最新推荐文章于 2024-05-27 00:00:00 发布

阅读量755

点赞数

文章标签： html/css

本文链接：https://blog.csdn.net/ccq2y/article/details/81533017

版权

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(回流与重绘)

repaint(重绘) ，repaint发生更改时，元素的外观被改变，且在没有改变布局的情况下发生，如改变outline,visibility,background color，不会影响到dom结构渲染。
reflow(回流，渲染)，与repaint区别就是他会影响到dom的结构渲染，同时他会触发repaint，他会改变他本身与所有父辈元素(祖先)，这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多效果越明显。
例：
display:none才会产生reflow；（dom结构发生改变）
visibility:hidden只会产生repaint。（dom结构未改变）

5. css 选择器优先级

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

在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
例：
关键字!important必须放在一行样式的末尾并且要放在该行分号前，否则就没有效果

div{
     margin-left:20px!important;
     margin-left:40px;
}

作为style属性写在元素内的样式（权重：1000）
id选择器（权重：100）
类选择器（伪类选择器）（权重：10）
标签选择器（权重：1）
通配符选择器
权重计算：
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>

8.@import url()和link

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参数

overflow：scroll   //必会出现滚动条 
overflow：auto  //子元素内容大于父元素时出现滚动条
overflow：visible  //溢出的内容出现在父元素之外
overflow：hidden  //溢出隐藏

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：//用户是否可以手动缩放。

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