全是面试精心整理的,供大家参考!
display几种方式以及原理
- Block(块级元素):块级元素通常以新行的形式开始,占据整个可用的宽度,可以设置宽度、高度、内外边距等属性。块级元素可以包含其他块级元素或行内元素。常见的块级元素有 div、p、h1-h6 等。
- Inline(行内元素):行内元素不会以新行开始,只占据它对应标签的边框所包含的空间,无法设置宽度、高度、内外边距等属性。行内元素只能包含文本或其他行内元素。常见的行内元素有 span、a、img、input 等。
- Inline-block(行内块元素):行内块元素具有行内元素的特点,但可以设置宽度、高度、内外边距等属性。行内块元素可以包含其他行内块元素或行内元素。常见的行内块元素有 button、input[type="button"]、input[type="checkbox"] 等。
- Flex(弹性盒子布局):弹性盒子布局是一种响应式布局方式,可以方便地实现元素的对齐、排列、分布等。弹性盒子布局可以设置主轴方向、主轴对齐方式、交叉轴对齐方式等属性。常见的弹性盒子布局属性有 display: flex、justify-content、align-items、flex-direction 、flex-wrap等。
- Grid(网格布局):网格布局是一种二维布局方式,可以方便地实现元素的对齐、排列、分布等。网格布局可以设置行、列、单元格大小、位置等属性。常见的网格布局属性有 display: grid、grid-template-columns、grid-template-rows、grid-column、grid-row 等。
CSS3新特性
- 选择器:CSS3 引入了一些新的选择器,如属性选择器、伪类选择器、伪元素选择器等,可以更精确地选中需要的元素。
- 盒模型:CSS3 中的盒模型引入了 box-sizing 属性,可以更方便地控制元素的盒模型,包括 content-box(默认值)、border-box 等。
- 边框:CSS3 中引入了 border-image 属性,可以让开发者使用图片来定义元素的边框样式。
- 颜色:CSS3 引入了 HSL 和 HSLA 颜色模式,可以更方便地定义颜色。
- 渐变:CSS3 中引入了渐变,包括线性渐变(background: linear-gradient(to right, red, blue))和径向渐变(background: radial-gradient(circle, red, blue)),可以让开发者更方便地实现元素的背景渐变效果。
- 文字:CSS3 中引入了 text-shadow 属性,可以让开发者为文字添加阴影效果。
- 动画:CSS3 中引入了动画效果,包括 transition 属性和 animation 属性,可以让开发者更方便地实现元素的动画效果。
- 布局:CSS3 中引入了弹性布局(Flexbox)和网格布局(Grid),可以更方便地实现元素的布局效果。
- 媒体查询:CSS3 中引入了媒体查询,可以根据不同设备的屏幕大小、分辨率等特性,为不同设备提供不同的样式。
属性选择器是一种在CSS中使用的一种选择元素的方法。它允许你根据元素的属性值来选择并应用样式。
属性选择器有以下几种形式:
- [attribute]:选择具有指定属性的所有元素。 例如:a[href] 将选择所有具有 href 属性的 <a> 元素。
- [attribute=value]:选择具有指定属性和值的元素。 例如:input[type=text] 将选择所有 type 属性为 text 的 <input> 元素。
- [attribute^=value]:选择具有以指定值开头的属性值的元素。 例如:img[src^=https] 将选择所有 src 属性以 https 开头的 <img> 元素。
- [attribute=value]:选择具有以指定值结尾的属性值的元素。 例如:`a[href=value]:选择具有以指定值结尾的属性值的元素。例如:‘a[href=.pdf]将选择所有href属性以.pdf结尾的<a>` 元素。
- [attribute*=value]:选择具有包含指定值的属性值的元素。 例如:input[name*=user] 将选择所有 name 属性包含 user 的 <input> 元素。
属性选择器可以与其他选择器组合使用,以进一步精确地选择特定的元素。
CSS 中的可继承属性
CSS 中的可继承属性是指在父元素上设置某个属性时,该属性可以被子元素继承并应用于子元素。
以下是一些常见的 CSS 可继承属性:
- 字体相关属性:font、font-family、font-size、font-style、font-weight等。
- 文本相关属性:text-align、text-indent、line-height、color等。
- 元素盒模型属性:margin、padding、border等。
- 列表属性:list-style、list-style-type、list-style-position等。
- 表格属性:border-collapse、border-spacing等。
- 元素可见性属性:visibility。
- 元素的基线属性:vertical-align。
- 元素的文本装饰属性:text-decoration等。
需要注意的是,并非所有的属性都是可继承的。例如,背景相关属性(background)和定位属性(position)就不是可继承的。
DOM和BOM
- DOM(document object model)是一个页面结构的api
文档对象类型,获取或设置文档标签的属性
Js可以通过DOM获取哪些标签,标签有哪些属性,内容有哪些
DOM操作的对象是文档,和浏览器无关,关注网页本身内容
- 获取标签名:document.getElementByTagName()
- 获取类名:document.getElementByClassName()
- 获取id属性名:document.getElementById()
- 获取选择器名:document.querySelector()
- 通过父元素获取子元素:可以使用 DOM 元素的 children 属性获取其所有子元素,返回一个类数组对象。
- BOM(browser object model)控制浏览器行为的api
浏览器对象模型,提供独立于内容与浏览器窗口进行交互的对象
管理窗口与窗口之间的通讯,核心对象是window,比如打开关闭窗口、收藏等操作
location(用于url相关的操作)、history(用于历史相关的操作)、navigator(包含浏览器相关的信息)
HTML5增添了哪些新特性
- 新元素
H5增加了新的元素,这些元素可以更好地描述文档结构,提高可访问性和语义性,同时也有助于SEO优化
<header>和<footer>:用于定义页面或者文章的头部和底部,通常包含网站的标志、导航栏、版权信息等。
<nav>:用于定义导航栏,通常包含站点的主要导航链接。
<section>:用于将文档分成一个个独立的部分,通常包含一组相关的内容,如文章的章节、博客的文章列表等。
<article>:用于定义独立的文章或者内容块,通常包含一篇文章、一段新闻、一组评论等。
<aside>:用于定义页面或文章的侧边栏内容,通常包含一些与主要内容相关的补充信息,如广告、标签云、相关文章等。
<main>:用于定义页面或文章的主要内容区域,一个页面只能有一个<main>元素。
<figure>和<figcaption>:用于定义一组相关的媒体内容,如图片、音频或视频,<figcaption>用于为<figure>元素添加标题。
<time>:用于标记时间,可以显示日期、时间、日期和时间的组合,还可以使用datetime属性指定时间的精度。
<progress>:用于显示进度条,可以用于显示下载进度、表单提交进度等。
<meter>:用于显示某个值的度量,如电池电量、音量、温度等。
- 表单控件
H5提供新的表单控件,例如<input type="color"> 选填email、date、time、number、file等,可以更好的与用户交互
- 视频和音频
H5增加了新的视频和音频元素,可在不需要插件的情况下在网页中播放音视频
- 图像绘制
H5提供canvas元素,允许开发者在网页上绘制2D元素
- 本地存储
H5提供本地存储功能,可让网页上应用不连接服务器的情况下存储数据
- 地理定位
提供了地理定位功能(Geolocation)可获取用户位置信息
- WebSocket
HTML5引入了WebSocket API,可以在浏览器和服务器之间建立实时的双向通信,提高应用程序的性能和响应速度。
应用场景:
Cookie:
- 判断用户是否登陆过网站,以便下次登录时能够实现自动登录(或者记住密码)。
- 保存上次登录的时间、页面等信息。
- 浏览计数
localStorage:
- 长期登录,判断用户是否已登录
- 历史搜索记录
- 用户习惯
sessionStorage:
- 网上商城中的购物车
- 保存用户登录信息
- 将某些数据放入session中,供同一用户的不同页面使用
- 敏感账号一次性登录