day03面试题总结-CSDN博客

本文链接：https://blog.csdn.net/2301_79318078/article/details/133093302

一.link与@import区别

1.link属于html标签。@import在css中使用表示导入外部样式表；
2.页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
3.import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
4.link方式的样式的权重高于@import的权重；
5.link 支持使用javascript改变样式（document.styleSheets），后者不可；

二.HTML5和css3新特性

1.选择器

常规选择器

:last-child 选择元素最后一个孩子
:first-child 选择元素第一个孩子
:nth-child(1) 按照第几个孩子给它设置样式
:nth-child(even) 按照偶数
:nth-child(odd) 按照奇数
:disabled 选择每个禁用的dom元素
:checked 选择每个被选中的dom元素
:not(selector) 选择非 selector 元素的每个元素
::selection 选择被用户选取的元素部分

伪类

:last-child 选择元素最后一个孩子
:first-child 选择元素第一个孩子
:nth-child(1) 按照第几个孩子给它设置样式
a:link {color: #FF0000} 未访问的链接
a:visited {color: #00FF00} 已访问的链接
a:hover {color: #FF00FF} 鼠标移动到链接上
a:active {color: #0000FF} 选定的链接

伪元素

::before {} 选择器在被选元素的前面插入内容和定义css，使用 content 属性来指定要插入的内容。
::after {} 选择器在被选元素的后面插入内容和定义css，使用 content 属性来指定要插入的内容。
:first-letter 选择该元素内容的首字母
:first-line 选择该元素内容的首行
::selection 选择被用户选取的元素部分

2. 背景和边框

背景

1.background-size：规定背景图片的尺寸（cover：填充；100% 100%：拉伸）
2.background-origin：规定背景图片的定位区域对于 background-origin 属性，有如下属性背景图片可以放置于content-box、padding-box 或 border-box 区域

边框

1.border-radius：圆角
2.box-shadow / text-shadow：阴影
3.border-image：边框图片

3.文本效果

text-shadow   向文本添加阴影
text-justify   规定当 text-align 设置为 “justify” 时所使用的对齐方法
text-emphasis   向元素的文本应用重点标记以及重点标记的前景色
text-outline   规定文本的轮廓
text-overflow   规定当文本溢出包含元素时发生的事情
text-wrap   规定文本的换行规则
word-break   规定非中日韩文本的换行规则
word-wrap   允许对长的不可分割的单词进行分割并换行到下一行
text-decoration 文本修饰符：overline、line-through、underline 分别是上划线、中划线、下划线

4.2D/3D 转换

1.变形transform

2.动画animation

3.过渡transition

5.H5 新特性

语义化标签：header、footer、section、nav、aside、article
增强型表单：input 的多个 type
新增表单属性：placehoder、required、min 和 max
音频视频：audio、video
canvas 画布
地理定位
拖拽
本地存储：
localStorage 没有时间限制的数据存储；
sessionStorage， session 的数据存储，当用户关闭浏览器窗口后，数据会被删除
新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
WebSocket：建立持久通信协议