前端开发面试题(HTML、CSS)
1. 一个 200 * 200 的div
在不同分辨率屏幕下左右居中,用css
实现:
-
方法一
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box { width: 200px; height: 200px; background: red; /* 利用绝对定位 */ /* 看父元素,也就是看最近一级父元素是否设定了定位,如果没有就往上找,如果一直都没有,那么就会以浏览器的可视窗口作为参照进行偏移 */ position: absolute; left: 50%; margin-left: -100px; top: 50%; margin-top: -100px; } </style> </head> <body> <div class="box"></div> </body> </html>
-
方法二
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box { width: 200px; height: 200px; background: red; /* 利用绝对定位 */ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } </style> </head> <body> <div class="box"></div> </body> </html>
2. 写一个左中右布局占满屏幕,其中左、右两块固定宽 200,中间自适应宽,要求先加载中间块,请写出结构及样式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.main > div {
float: left;
}
.container {
width: 100%;
}
.left,
.right {
width: 200px;
}
.left {
background: red;
margin-left: -100%;
}
.right {
background: yellow;
margin-left: -200px;
}
.center {
background: blue;
/* 显示文字 */
margin-left: 200px;
margin-right: 200px;
}
</style>
</head>
<body>
<div class="main">
<!-- 要先加载 中 -->
<div class="container">
<div class="center">中</div>
</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
</body>
</html>
3. 简述清除浮动的几种方法:
-
清除浮动
-
给浮动元素的同级下添加一个盒子,加入
clear:both
- 缺点:多了一个
div
盒子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { padding: 0; margin: 0; } .main { border: 5px solid red; } .dv1 { width: 100px; height: 100px; background: orange; float: left; } .dv2 { width: 100px; height: 100px; background: blue; float: left; } .dv3 { width: 100px; height: 100px; background: green; float: left; } .clear { /* 清除浮动 */ clear: both; } </style> </head> <body> <div class="main"> <div class="dv1"></div> <div class="dv2"></div> <div class="dv3"></div> <div class="clear"></div> </div> </body> </html>
- 缺点:多了一个
-
给浮动的父元素加入:
overflow:hidden
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { padding: 0; margin: 0; } .main { border: 5px solid red; /* 清除浮动 */ overflow: hidden; } .dv1 { width: 100px; height: 100px; background: orange; float: left; } .dv2 { width: 100px; height: 100px; background: blue; float: left; } .dv3 { width: 100px; height: 100px; background: green; float: left; } </style> </head> <body> <div class="main"> <div class="dv1"></div> <div class="dv2"></div> <div class="dv3"></div> </div> </body> </html>
-
最常用的一个方式(给浮动的父级元素使用
::after {content: "";clear:both;display: table;}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { padding: 0; margin: 0; } .main { border: 5px solid red; } /* 清除浮动 */ .main::after { content: ""; clear: both; display: table; } .dv1 { width: 100px; height: 100px; background: orange; float: left; } .dv2 { width: 100px; height: 100px; background: blue; float: left; } .dv3 { width: 100px; height: 100px; background: green; float: left; } </style> </head> <body> <div class="main"> <div class="dv1"></div> <div class="dv2"></div> <div class="dv3"></div> </div> </body> </html>
-
4. 行内元素有哪些?块级元素有哪些?
- 行内元素
- 特点:
- 相邻行内元素在一行上,一行可以显示多个
- 高、宽直接设置是无效的
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或者其他行内元素
display
属性为inline
a
、b
、span
、input
、…
- 特点:
- 块级元素
- 特点:
- 每个块级元素都从新的一行开始,并且其后的元素也另起一行
- 元素的高度、宽度、行高以及顶和底边距都可设置
- 可以容纳内联元素和其他块元素
display
属性为block
div
、ul
、li
、p
、h1
、dl
、…
- 特点:
- 空
- 特点:
- 没有内容的 HTML 内容被称为空元素
br
、hr
、…
- 特点:
5. 画图解释一下CSS
的盒子模型。
-
margin
:外边距 -
border
:边框 -
padding
:内边距
6. CSS
选择符有哪些?哪些属性可以继承?优先级算法如何计算?
-
CSS
选择符有哪些?id
选择器:#
class
选择器:.
- 标签选择器:
div
、p
- 相邻选择器:
ul + div
- 子类选择器:
ul>li
- 后代选择器:
ul li
- 通配符选择器:
*
- 属性选择器:
a[href='xxx']
- 伪类选择器:
a:after
、a:hover
-
哪些属性可以继承?
color
文字颜色font-size
字体大小
-
优先级算法如何计算?
!important
>style
内联样式 >id
选择器 >class
选择器 > 标签选择器 > 通配选择器
7. CSS3
新增伪类举例
- 举例:
p:first-of-type
选择属于其父元素的首个<p>
元素的每个<p>
元素。p:last-of-type
选择属于其父元素的最后<p>
元素的每个<p>
元素。p:only-of-type
选择属于其父元素唯一的<p>
元素的每个<p>
元素。p:only-child
选择属于其父元素的唯一子元素的每个<p>
元素。p:nth-child(2)
选择属于其父元素的第二个子元素的每个<p>
元素。:after
在元素之前添加内容,也可以用来做清除浮动。:before
在元素之后添加内容:disabled
控制表单控件的禁用状态。:checked
单选框或复选框被选中。
8. flex布局的应用场景
- 第一种:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.container {
display: flex;
}
.left {
background: red;
/* flex: 放大属性 缩小属性 项目的长度; */
flex: 0 0 100px;
}
.right {
background: blue;
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="left">左</div>
<div class="right">右</div>
</div>
</body>
</html>
- 第二种:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
background: red;
}
section {
background: blue;
flex: 1;
display: flex;
}
footer {
background: yellow;
}
.left,
.right {
background: green;
flex: 0 0 200px;
}
.center {
background: hotpink;
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<header>头部</header>
<section>
<div class="left">左</div>
<div class="center">中</div>
<div class="right">右</div>
</section>
<footer>底部</footer>
</div>
</body>
</html>
9. 常见浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些?解决方法是什么,常用hack的技巧?
-
常见浏览器的内核:
-
浏览器 浏览器内核 IE Trident 内核 Chrome(谷歌) Webkit 内核 Opera Presto 内核 Firefox(火狐) Gecko 内核
-
-
经常遇到的浏览器的兼容性有哪些?
-
浏览器默认内外间距不一致问题
* { padding: 0; margin: 0; }
-
浏览器默认图片有间距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { padding: 0; margin: 0; } /* 使用float属性为img布局 */ img { width: 200px; height: 200px; float: left; } </style> </head> <body> <img src="./bootstrap/图像形状/01.webp" alt="" /> <img src="./bootstrap/图像形状/01.webp" alt="" /> <img src="./bootstrap/图像形状/01.webp" alt="" /> </body> </html>
-
10. html5
有哪些新特性?如何处理HTML5
新标签的浏览器兼容问题?
-
html5
有什么新特性- 用于绘画的
canvas
元素 - 用于媒介回放的
video
和audio
元素 - 对本地离线存储的更好的支持
- 新的特殊内容元素,比如
article
、footer
、header
、nav
、section
- 新的表单控件,比如
calendar
、date
、time
、email
、url
、search
- 用于绘画的
-
如何处理
HTML5
新标签的浏览器兼容问题-
<header></header>
-
<footer></footer>
-
ie
低级版本浏览器是不支持的 -
方案一
- 使用
javascript
新增元素的方法解决 document.createElement('header')
document.createElement('footer')
- 由于创建出来的元素是内联元素,所以需要转换成块级,高度和宽度才会生效
header,footer{display:block;}
- 使用
-
方案二
-
使用封装好的插件
html5shiv.js
解决兼容性问题<!--[if lt IE 9]> <script type="text/javascript" src="./html5shiv.js"></script> <![endif]-->
-
-
11. 分别写出以下几个HTML
标签:文字加粗、下标、居中、字体
-
加粗:
<strong>加粗</strong>
-
下标:
<sub>下标</sub>
-
上标:
<sup>上标</sup>
-
居中:
<center>居中</center>
-
字体:
<font>字体</font>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <strong>加粗</strong> <sub>下标</sub> <sup>上标</sup> <!-- 官方不推荐使用 center font --> <center>居中</center> <font>字体</font> </body> </html>
12. Doctype
作用?你知道多少种Doctype
文档类型?
Doctype
作用Doctype
它必须位于文档最前面,处于html
标签之前。就是告诉浏览器使用的是哪种html
或者xhtml
- 你知道多少种
Doctype
文档类型- 严格版本
- 过滤版本
- 基于框架
html
版本