html5退出全屏触发的方法_好程序员web前端分享HTML5常见面试题集锦二
web前端分享HTML5常见面试题集锦第二篇,希望对大家有所帮助。
1.
方法1:
html,body{height: 100%;}
body{ margin: 0;display: flex; justify-content: center; align-items: center; }
.parent{ display: flex; justify-content: center; align-items: center;}
方法2:
html,body{height: 100%;}
body{ margin: 0;display: flex;}
.parent{ border: 1px solid red; display: flex;margin: auto;}
.child{ border: 1px solid blue; margin: auto;}
方法3:
body{ margin: 0;}
.parent{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
2.分别实现骰子中的 '一点' 和 '三点' 的布局。
一点的布局:
body{ margin: 0;}
div{width: 200px; height: 200px; border: 1px solid #000; display: flex; justify-content: center; align-items: center;}
span{width: 30px; height: 30px; background: #f00; display: block; border-radius: 50%;}
三点的布局
body{ margin: 0;}
div{width: 200px; height: 200px; border: 1px solid #000; display: flex; justify-content:space-between; padding: 20px;}
span{width: 30px; height: 30px; background: #f00; display: block; border-radius: 50%;}
div span:nth-child(1){ align-self: flex-end;}
div span:nth-child(2){ align-self:center;}
3.简述选择器~和+的区别。
1).相邻兄弟选择器。选择有相同父元素的两个挨着的元素的后一个元素。语法:元素1 + 元素2 {声明}
例如1:
h1 + p { color:red;}
HTML中:
······
·······
//可以匹配
······
·······
//不可以匹配
例如2:
li + li { color:red;}
HTML中:
- ······
- ······ //可以匹配,上一个
- 的兄弟
- ······ //可以匹配,上一个
- 的兄弟
2).普通兄弟选择器。选择有相同父元素的两个元素中,第一个元素后所有的第二个元素。语法:元素1 ~ 元素2 { 声明}
例如:
h1 ~ p { color:red;}
HTML中:
······
·······
//可以匹配
······
·······
//可以匹配
······
···
······ //不可以匹配
4.简述box-sizing的有效值以及所对应的盒模型规则。
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
语法:box-sizing: content-box|border-box|inherit;
1)box-sizing:content-box;这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。是默认值。如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px 宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中
2)box-sizing:border-box;为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说,如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding,内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。
3)box-sizing:inherit;;规定应从父元素继承 box-sizing 属性的值
5.flex中元素的margin是否会合并?
不会合并
6.简述align-items和align-content的区别。
align-items属性适用于所有的flex容器,它是用来设置每个flex元素在交叉轴上的默认对齐方式。如果是多行多行容器,多行和多行之间是有间距的。
align-content有相同的功能,但是align-content属性只适用于多行的flex容器,有一个重点就是多行,并且align-content在对齐的过程中,如果是多行多行容器,多行和多行之间的间距是没有的。
单行容器:
多行容器:
7.简述data:属性的用法(如何设置,如何获取);有何优势?
data-* 的值的获取和设置,2种方法:
1)传统方法
getAttribute() 获取data-属性值;
setAttribute() 设置data-属性值
2)HTML5新方法
例如 data-href
dataset.href 获取data-href属性值
dataset.href = 'http://baidu.com' 设置data-href属性值
传统方法无兼容性问题,但是不够优雅、方便
HTML5新方法很优雅、方便,但是有兼容性问题,可以在移动端开发或不支持低版本浏览器的项目中使用
优势:自定义的数据可以让页面拥有更好的交互体验(不需要使用 Ajax 或去服务端查询数据)。
8.简述title与h1的区别,b与strong的区别,i与em的区别。
1)title与h1的区别:
定义:title是网站标题,h1是文章主题
作用:title概括网站信息,可以直接告诉搜索引擎和用户这个网站是关于什么主题和内容的,是显示在网页Tab栏里的;h1突出文章主题,面对用户,是显示在网页中的.
2)b与strong的区别:
从视觉上效果观看b与strong是没有区别的,从单词的语义也可以分析得出,b是Bold(加粗)的简写,所以这个B标记所传达的意思只是加粗,没有任何其它的作用,而Strong我们从字面理解就可以知道他是强调的意思,所以我们用这个标记向浏览器传达了一个强调某段文字的消息,他是强调文档逻辑的,并非是通知浏览器应该如何显示。
3)i与em的区别:同样,I是Italic(斜体),而em是emphasize(强调)。
9.什么是标准文档流?
标准文档流:网页在解析的时候,遵循于从上向下,从左向右的一个顺序,而这个顺序就是来源于标准文档流。
标准文档流等级,分为两种等级:块级元素和行内元素;
块级元素:
1).霸占一行,不能与其他任何元素并列
2).能接受宽、高
3).如果不设置宽度,那么宽度将默认变为父亲的100%,即和父亲一样宽
行内元素:
1).与其他元素并排
2).不能设置宽、高。默认的宽度就是文字的宽度
10.z-index是什么?在position的值是什么时可以触发?
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面,当脱离文档流内容较多,并且相互重叠的时候,就有可能发生本想完全显示的内容被其他内容遮挡的结果,这时我们就需要人为指定哪个层在上面,哪个在下面,z-index属性就是干这个用的。注意:Z-index 仅能在定位元素上奏效.
在position的值是relative、absolute、fixed、sticky时候可以触发
11、PC端常用的布局方法
固定布局、浮动布局、定位布局、流式布局、弹性布局
12 布局 左边20% 中间自适应 右边200px 不能用定位
方法1:
body{ margin: 0; display: flex;}
.left{width: 20%; height: 200px; background: red;}
.center{height: 400px; background: blue; flex-grow: 1;}
.right{width: 200px; height: 600px; background: pink; }
方法2:
body{ margin: 0; }
.left{width: 20%; height: 200px; background: red; float: left;}
.center{height: 600px; background: blue; margin-left: 20%; margin-right: 200px;}
.right{width: 200px; height: 400px; background: pink; float: right;}
方法3:
body{ margin: 0; }
.left{width: 20%; height: 200px; background: red; float: left;}
.center{overflow: hidden; height: 400px; background: blue;}
.right{width: 200px; height: 600px; background: pink; float: right;}
html5退出全屏触发的方法_好程序员web前端分享HTML5常见面试题集锦二相关推荐
- html5退出全屏触发的方法_在实战中学??typescript - 实现浏览器全屏(100行)
学习一门新的语言, 最快速的方法还是看实战代码! 初学ts的时候, 大家都会问"有什么实际项目可以参考吗?". 好了! 满足大家的需求, 我计划定期用ts做一些业务常用小插件, 代 ...
- canvas clear 指定属性的元素_好程序员web前端分享CSS属性组成及作用
好程序员web前端分享CSS属性组成及作用 学习目标 1.css属性和属性值的定义 2.css文本属性 3.css列表属性 4.css背景属性 5.css边框属性 6.css浮动属性 一.css属性和 ...
- react组件卸载调用的方法_好程序员web前端培训分享React学习笔记(三)
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...
- 好程序员web前端分享DIV+CSS3和html5+CSS3有什么区别
为什么80%的码农都做不了架构师?>>> 好程序员web前端分享DIV+CSS3和html5+CSS3有什么区别,不管是DIV+CSS3还是html5+CSS3,他们都是我们对 ...
- 好程序员web前端分享常见html5语义化标签
为什么80%的码农都做不了架构师?>>> 好程序员web前端分享常见html5语义化标签,我们知道,创建结构清晰的页面可以建立良好的语义化基础,也降低了使用css的难度,下面总 ...
- js怎么在一个div中嵌入另一网站_好程序员web前端学习路线分享HTML5常见面试题集锦一...
好程序员web前端学习路线分享HTML5常见面试题集锦,接下来将会持续为大家分享几篇HTML5常见面试题. 1.布局 左边20% 中间自适应 右边200px 不能用定位 答案:圣杯布局/双飞翼布局或者 ...
- props写法_好程序员web前端培训React中事件的写法总结
好程序员web前端培训React中事件的写法总结,React的事件处理和DOM元素很相似,但是语法上是有不同的: 1.react事件采用驼峰命名法,而不是纯小写. 驼峰命名法(camelCase):命 ...
- window 程序报错 自动重启_好程序员web前端教程之详解JavaScript严格模式
好程序员web前端教程之详解JavaScript严格模式,严格模式(Strict mode)是由ECMA-262规范定义的新兴JavaScript标准,发布于2009年12月第五版.旨在改善错误检查功 ...
- 正则至少一个数字_好程序员web前端培训分享JavaScript学习笔记之正则
好程序员web前端培训分享JavaScript学习笔记之正则,正则表达式,又名 "规则表达式" 由我们自己来书写 "规则",专门用来检测 字符串 是否符合 &q ...
最新文章
- Redis优化MySQL
- 每日一皮:没有好好测试就运行,还自信的不得了...
- UVa11770 - Lighting Away(排序+DFS)
- “Hello World!”团队第二次会议
- 从代码内部:骆驼路由引擎第一部分
- 做大厂程序员是一种怎样的体验?这四位“百度程序员”说出了自己的看法!
- 带你学 Redis:Redis简介(一)
- Oracle 安装报错 [INS-06101] IP address of localhost...
- ExtJS视频教程1(上)
- Hibernate框架搭建
- 禧龙字王 v1.0 beta 4 工作站版 是什么
- h2数据库文件.mv.db
- 快速保存网页资料——fireshot与PDFdownload
- 耳机串音问题解决(crosstalk)
- stock 工具收集
- 前端进度报告(2018.6.3)
- ckc交易什么意思_股前加r是什么意思?股市kdj线图如何看?
- 实现翻页或查询后保持复选框勾选状态
- linux离线安装snap应用,Ubuntu使用snap安装常用软件
- java之学习记录 5 - 1 - 模拟拉勾项目介绍与后台系统搭建
热门文章
- pgsql数据库默认配置事务类型_PostgreSQL数据库事务出现未知状态的处理方法
- linux离线安装ftp_安装Kali Linux之后要做的前10件事
- postgresql测试题_PostgreSQL练习
- react 面试题 高级_高级前端面试题目大全(一)
- python识别12306验证码_Python3.4实现的12306最新验证码识别
- 设置按峰值带宽计费_腾讯云服务器按流量计费带宽值大小设置说明
- python爬_python爬虫--模拟登录知乎
- 别找了,这才是 Pyecharts 的正确打开方式!
- 用Python分析元旦旅游热门城市,告诉你哪些景点性价比更高
- 微软官方上线的Python教程,7个章节就把Python说通了!