HTML+CSS高频面试题
HTML+CSS
文章目录
- HTML+CSS
-
-
- 1.link标签和import标签的区别?
- 2.简述一下你对HTML5语义化的理解
- 3.块级元素、行内元素、行内块级元素的区别
- 4.盒子水平垂直居中
- 5.三栏式布局
-
- 圣杯布局
- 双飞翼布局
- flex布局
- 定位
- 6.Flex布局
-
- Flex布局是什么?
- Flex父项属性
- flex子项属性
- 7.CSS优先级计算
- 8.盒模型
- 9.BFC
- 10.margin重叠
- 11.HTML5和CSS3有哪些新特性
- 12.清除浮动的几种方式
- 13.script标签中defer和async都表示了什么?
- 14.doctype标签和meta标签
- 15.display: none, visibility: hidden, opacity: 0 的区别
- 16. 自适应布局和响应式布局
- 17.CSS选择器分类
- 18.请说明px,em,rem,vw,vh,rpx等单位的特性,rem 和em 的区别
- 19.前端动画怎么做?
- 20.position定位属性和相关的关系
-
1.link标签和import标签的区别?
- link属于html，而@import属于css。
- 页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
- link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。
- link方式样式的权重高于@import的。
2.简述一下你对HTML5语义化的理解
（1） 用正确的标签做正确的事情。
（2） html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
（3） 即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;
（4） 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO ;(搜索引擎优化)
（5） 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
3.块级元素、行内元素、行内块级元素的区别
块级元素（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot
行内元素（display：inline）：a、span、small、strong、em、i、code、
行内块元素（display：inline-block）：img、input
区别：
-
块级元素:元素独占一行,宽高内外边距皆可设置,宽高默认是父级宽度
-
行内元素:相邻行内元素在一行上,一行多个;宽高直接设置无效,默认高度是它本身内容的高度
-
行内块元素:相邻行内块元素在一行上,一行多个默认宽度就是它本身内容的宽度（行内元素特点）.宽高内外边距皆可设置
-
块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；行内元素不能包含块级元素，只能容纳文本或者其他行内元素。
4.盒子水平垂直居中
//方案一:宽高确定,设置盒子外边距
//对于宽高确定,块级元素margin:0 auto ,行内元素或行内块元素text-align:center实现元素水平居中,line-height=height实现文本垂直居中
<style>
div {
position: absolute;
width: 200px;
height: 100px;
top: 50%;
left: 50%;
margin: -50px 0 0 -100px;
background-color: pink;
}
</style>
<body>
<div>前端加油</div>
</body>
//方案二:宽高不确定,display:flex
<style>
body {
/* body缺少高度，100%的高度是不起作用的，最好使用100vh来设置，这样就可以解决这个问题了 vh基于视窗的高度计算,1vh等于视窗高度的百分之一 */
height: 100vh;
/*父元素设置flex属性*/
display: flex;
/*水平主轴居中*/
justify-content: center;
/*垂直交叉轴居中*/
align-items: center;
}
div {
background: pink;
}
</style>
<body>
<div>前端加油</div>
</body>
//方案三:宽高不确定,利用transform属性
<style>
div {
position: absolute;
top: 50%;
left: 50%;
/* 没有宽高,里面的内容自动撑开盒子 */
transform: translate(-50%, -50%);
background-color: pink;
}
</style>
<body>
<div>前端加油</div>
</body>
5.三栏式布局
我们有时设置一个对象盒子时候避免对象没有内容时候不能撑开，但内容多少不能确定所以又不能固定高度，这个时候我们就会需要css来设置min-height最小高度撑高对象盒子。当内容少时候最小高度能将内容显示出，如果内容多余最小高度能装下时候，对象也会再随内容增多而增高。
圣杯布局
圣杯布局(左耳、右耳、中间部分三者一体)
要求:三栏布局;中间宽度自适应,两边内容定宽。
好处：重要的内容放在文档流前面可以优先渲染
原理：利用相对定位、浮动、负边距布局，而不添加额外标签
<style>
.container {
height: 100%;
padding: 0 200px;
}
.left,
.right {
width: 200px;
min-height: 200px;
background-color: blue;
}
.right {
background-color: red;
}
.center {
/* 父盒子container的宽度 */
width: 100%;
min-height: 400px;
background-color: pink;
}
.left,
.center,
.right {
float: left;
}
.left {
/* margin-left设置百分比是相对于父元素宽度的，这个宽度是不包括padding在内的*/
margin-left: -100%;
/* 相对于自己的位置移动 */
position: relative;
left: -200px;
}
.right {
margin-right: -200px;
}
</style>
<body>
<div class="container">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
双飞翼布局
双飞翼布局（一个人+两翅膀），是圣杯布局的一种改良
原理：主体元素上设置左右边距，预留两翼位置。左右两栏使用浮动和负边距归位置
<style>
.left,
.container,
.right {
float: left;
}
.container {
width: 100%;
}
.container .center {
margin: 0 200px;
min-height: 400px;
background-color: pink;
}
.left,
.right {
width: 200px;
min-height: 200px;
background-color: blue;
}
.right {
background-color: red;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -200px;
}
</style>
<body>
<div class="container">
<div class="center"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
flex布局
<style>
.container {
display: flex;
/* 三栏布局 */
justify-content: space-between;
height: 100%;
}
.left,
.right {
/* 放大倍数 缩小倍数 占用的宽度*/
flex: 0 0 200px;
height: 200px;
background-color: blue;
}
.right {
background-color: red;
}
.center {
flex: 1;
min-height: 400px;
background-color: pink;
}
</style>
<body>
<div class="container">
<div class="left"></div>
<!-- 顺序不能乱 -->
<div class="center"></div>
<div class="right"></div>
</div>
</body>
定位
<style>
.container {
position: relative;
height: 100%;
}
.center {
margin: 0 200px;
min-height: 400px;
background-color: pink;
}
.left,
.right {
position: absolute;
top: 0;
width: 200px;
min-height: 200px;
background-color: blue;
}
.left {
left: 0;
}
.right {
right: 0;
}
</style>
<body>
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
6.Flex布局
Flex布局是什么?
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以被设定为Flex布局.
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"，它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目".
原理:通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
Flex父项属性
容器默认存在两根轴：水平方向的主轴（main axis）和垂直方向的交叉轴（cross axis），主轴的开始位置叫做main start，结束位置叫做main end。交叉轴的开始位置叫做cross start，结束位置叫做cross end。
容器的6个属性：
flex-direction：设置主轴的方向
默认主轴方向就是x轴方向，水平向右,默认侧轴方向就是y轴方向，水平向下
flex-direction: row(从左到右) | row-reverse(从右到左) | column(从上到下) | column-reverse(从下到上);
justify-content：设置主轴上的子元素排列方式
使用这个属性之前一定要确定好主轴是哪个
justify-content: flex-start(从头部开始如果主轴是x轴，则从左到右) | flex-end(从尾部开始排列)) | center（如果主轴是x轴则水平居中）)| space-between(平分剩余空间) | space-around(先两边贴边再平分剩余空间);
flex-wrap：设置子元素是否换行
flex-wrap: nowrap(默认值,不换行)|wrap(换行)
align-items：设置侧轴上的子元素排列方式（单行）
该属性是控制子项在侧轴（默认是y轴）上的排列方式在子项为单项的时候使用
align-content: flex-start(默认值从上到下) | flex-end(从下到上) | center (垂直居中)| streth(拉伸)
align-content：设置侧轴上的子元素的排列方式（多行）
设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。
flex-start(默认值在侧轴的头部开始排列) | flex-end(在侧轴的尾部开始排列) | center(在侧轴中间显示)| space-between(子项在侧轴平分剩余空间) | space-around(子项在侧轴先分布在两头，再平分剩余空间) | stretch(设置子项元素高度平分父元素高度);
flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
flex子项属性
- flex子项目占的份数
flex属性定义子项目分配剩余空间，用flex来表示占多少份数。默认为0,表示子项不占份数
- align-self控制子项自己在侧轴的排列方式
align-selt属性允许单个项目有与具他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有元素，则等同于stretch.
- order属性定义子项的排列顺序（前后顺序）
数值越小，排列越靠前，默认为0
7.CSS优先级计算
- !importent: 无穷
- 行内样式：1000
- id选择器： 100
- 类/属性/伪类选择器：10
- 标签/伪元素选择器：1
8.盒模型
盒模型有两种,IE怪异盒模型和标准盒模型；
盒模型是由 内容(content)、内边距(padding)、边框(border)、外边距(margin) 组成的。
标准盒模型的宽高是指的 content 区宽高；
IE怪异盒模型的宽高是指的 content+padding+border 的宽高。
设置盒模型
标准盒模型：box-sizing: content-box;
怪异盒模型：box-sizing: border-box;
9.BFC
BFC译为块级格式化上下文，是一个独立的容器，子元素不会影响到外面
计算高度时，浮动元素也会被计算
产生条件：float不为none；position为fixed和absolute；display为inline-block，table-caption，flex，inline-flex；overflow不为visible
作用:用于清除浮动，解决margin重叠
10.margin重叠
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
主要有两种情况：1.相邻块元素垂直外边距的合并 2.嵌套块元素垂直外边距的塌陷
相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合井。
解决方案：尽量只给一个盒子添加margin值。
嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
- 父元素没有border以及padding-top，则父元素的margin-top会和子元素的margin-top重叠
- 解决办法：给父元素设置border或者padding-top；给父元素添加overflow:hidden
11.HTML5和CSS3有哪些新特性
HTML5新增有：
- 绘画 canvas;
- 用于媒介回放的 video 和 audio 元素;
- 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
- sessionStorage 的数据在浏览器关闭后自动删除;
- 语意化更好的内容元素，比如 article、footer、header、nav、section;
- 新的技术 webworker, websocket;
CSS3新增有:
- transition：过渡 transform：旋转、缩放、移动或者倾斜 animation：动画 gradient：渐变 shadow：阴影 border-radius：圆角
12.清除浮动的几种方式
清除浮动的本质是清除浮动元素脱离标准流造成的影响
浮动的元素布局时不会占据父元素的布局空间，即父元素布局时不会管浮动元素，浮动元素有可能超出父元素，从而对其他元素造成影响。
清除方法：
方法一:利用BFC给父级添加overflow:hidden
.fahter{
width: 400px;
border: 1px solid deeppink;
overflow: hidden;
}
方法二:额外标签法,会在浮动元素末尾添加一个空的标签。
.fahter{
width: 400px;
border: 1px solid deeppink;
}
.big{
width: 200px;
height: 200px;
background: darkorange;
float: left;
}
.small{
width: 120px;
height: 120px;
background: darkmagenta;
float: left;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="fahter">
<div class="big">big</div>
<div class="small">small</div>
<div class="clear">额外标签法</div>
</div>
</body>
方法三:使用伪元素清除浮动
.father::after {
content: " ";
clear: both;
display: block;
visibility: hidden;
height: 0;
}
13.script标签中defer和async都表示了什么?
众所周知script会阻塞页面的加载，如果我们要是引用外部js，假如这个外部js请求很久的话就难免出现空白页问题，好在官方为我们提供了defer和async
defer: 等文档解析并显示完后再下载
<script src="d.js" defer></script>
async立即下载
<script src="b.js" async>script>
14.doctype标签和meta标签
-
doctype
告诉浏览器以什么样的文档规范解析文档
标准模式和兼容模式
- 标准模式 ->正常，排版和js运作模式都是以最高标准运行
- 兼容模式->非正常
-
meta
元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的名称/值对。提供的信息是用户不可见的
15.display: none, visibility: hidden, opacity: 0 的区别
是否占据空间
display:none，隐藏之后不占位置；visibility:hidden、opacity:0，隐藏后任然占据位置。
子元素是否继承
display:none—不会被子元素继承，父元素都不存在了，子元素也不会显示出。
visibility:hidden—会被子元素继承，通过设置子元素visibility:visible来显示子元素。
opacity:0—会被子元素继承，但是不能设置子元素opacity:0来重新显示。
事件绑定
display:none 的元素都已经不再页面存在了，因此无法触发它绑定的事件。
visibility:hidden 不会触发它上面绑定的事件。
opacity: 0元素上面绑定的事件是可以触发的。
16. 自适应布局和响应式布局
自适应布局:使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术，它需要开发多套界面来适应不同的终端
响应式布局:一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本，需要了解设备像素比dpr以及vm/vh
17.CSS选择器分类
- 标签选择
- id 选择器 : #ID
- class 选择器: .class
- 伪类选择器: a:hover
- 通配符选择 : *
- 后代选择 （div a）
- 子代选择 （div > p）
- 相邻选择 （div + p）
- 属性选择器
- 伪元素选择器 ::before{}
18.请说明px,em,rem,vw,vh,rpx等单位的特性,rem 和em 的区别
- px:像素
- em:当前元素的字体大小
- rem:根元素字体大小
- vw:100vw是总宽度
- vh:100vh是总高度
- rpx:750rpx是总宽度
rem是根据根的font-size变化，而em是根据父级的font-size变化
rem：相对于根元素html的font-size，假如html为font-size：12px，那么，在其当中的div设置为font-size：2rem,就是当中的div为24px
em：相对于父元素计算，假如某个p元素为font-size:12px,在它内部有个span标签，设置font-size：2em,那么，这时候的span字体大小为：12*2=24px
19.前端动画怎么做?
- animation过渡动画
- transition过渡动画
控制过渡的时间,使用过渡的属性/效果曲线/延时,要求元素的状态必须有变化
- JS原生DOM位置
- canvas绘制动画
20.position定位属性和相关的关系
1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
2、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。
3、relative（相对定位）：生成相对定位的元素（相对于他原来应该在的位置），通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。
4、absolute（绝对定位）：生成绝对定位的元素（会脱离文档流），相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。
position: absolute
绝对定位：是相对于元素最近的已定位的祖先元素
position: relative
相对定位：相对定位是相对于元素在文档中的初始位置