前端测试题一
- 简答题
- 1.css有哪些应用方式，优先级如何
- 2.分别写出五个块级元素，行内元素和行内块元素
- 3.写书三种隐藏页面上元素的方式
- 4.用css画出一个红色倒三角
- 5.解释一下position:relative，position:absolute，position:fixed 的区别
- 6.h5新增的标签有哪些，例举五个
- 7. input 标签新增了那些tyle属性，写五个
- 8.css有哪些基本选择器
- 9.那些css属性可以继承？写五个
- 10.兼容css，chrome私有属性的前缀是什么
- 11.有哪些自闭和标签？写5个
- 12. 如何用伪元素实现去除浮动？
- 13.用 css 实现超出文本用省略号代替。
- 14.将这几个选择器按优先级排序；
- 15.写三个 css 的优化方法；
- 16.用媒体查询实现浏览器宽度大于700px，小于 800px 时引用外部样式style-7-9.css
- 17. 写任何一种三栏布局：‘左中右布局，左右两边定宽，中间自适应’的思路。
- 18.
- 19. 用两种方式实现图片居中。
- 20. 用什么标签提高网站的 seo？
简答题
1.css有哪些应用方式，优先级如何
1.外链方式
<link href=" " rel="stylesheet"
- 头部style标签内定义
- 行内style属性定义
- ! important .不常用，权重最高
2.分别写出五个块级元素，行内元素和行内块元素
块级元素： 自动换行，可设置高宽
div p ul(无序) ol(有序) h1-h5 ul li form table label hr
行内元素： 无法自动换行，无法设置宽高
a span i em sup(下标) sub br b(等修饰文字的标签)
行内块元素： 有内在尺寸，可设置高宽，不会自动换行
button input textarea select img
3.写书三种隐藏页面上元素的方式
- display:none; 完全看不见，且不占空间
- visibility:hidden; visibility属性指定一个元素是否可见，不可见也占用空间
- opacity:0; 非真正意义上的隐藏只是将元素设为透明（适用于文本类元素）
4.用css画出一个红色倒三角
倒三角形：宽度和高度设置为0，border设置左，右边透明。顶边可solid. 
/*样式*/
.daosanjiao{
width:0;
height:0;
border-top:100px solid red;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
/*body*/
<div class="daosanjiao"></div>
5.解释一下position:relative，position:absolute，position:fixed 的区别
- position:relative：相对定位
相对于自身原来（默认）的位置定位。 - position:absolute: 绝对定位
父元素有（position:relative , …）的情况下相对父元素的定位 - position:fixed: 固定定位
固定在界面（窗口某个位置）
6.h5新增的标签有哪些，例举五个
都为双标签
- mark 用来表示亮亮的文字
- progress value=“82” max=“100”
下载进度 - meter value=“3” min=“0” max=“10” 3/10 显示度量值
<input list="cars"/>
<datalist id="cars"
<option value="aaaa">
<option value="bbbb">
<option value="cccc">
</datalist>
<!--选项列表，请与 input 元素配合使用，来定义 input 可能的值-->
5.menu 菜单
6.video 表示一段视频并提供播放的用户界面
7.audio 表示音频
7. input 标签新增了那些tyle属性，写五个
- 邮箱 email
- 电话 tel
- 数量 number max=" " min=" "
- 时间 time 时分秒 data 年月日
- 颜色 color
- 网址 url =" http://"
8.css有哪些基本选择器
- 通用选择器
- 标签选择器
- 类选择器
- id选择器：用定义的id名作为选择器
- 后代选择器：用空格隔开 .ul .li
- 子选择器： 用>隔开 .ul>.li
- 兄弟选择器：用~隔开 .li1~.li4
- 相邻选择器：用+隔开 .li1+li
- 交集选择器：用 . 隔开 li.li1
- 并集选择器 ：用，隔开 .li1, .li2
9.那些css属性可以继承？写五个
1、字体系列属性
font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格
2、文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：单词之间的间距
letter-spacing：中文或者字母之间的间距
text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
color：文本颜色
3、元素可见性：
visibility：控制元素显示隐藏
4、列表布局属性：
list-style：列表风格，包括list-style-type、list-style-image等
5、光标属性：
cursor：光标显示为何种形态
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。
块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse。
10.兼容css，chrome私有属性的前缀是什么
chrome 的前缀 -webkit
11.有哪些自闭和标签？写5个
<br/> <hr/> <img/> <input> <meta>
12. 如何用伪元素实现去除浮动？
:after伪元素和:before伪元素分别用于在元素之后和之前添加内容，实际网页开发过程中:after伪元素比较常用，借助:after伪元素一般用于清除浮动，利用伪元素来清除浮动是常规浮动清除的三种方式之一，也是最常用、最为推荐的一种方式。
.out { width:200px; border: 5px solid red;}
.out:after{
display: block;
content: " ";
width: 0px;
height: 0px;
clear: left;/*清除*/
}
.in {
width: 100px;
height: 100px;
float:left;
background-color:#333333;
}
<div class="out">
<div class="in"></div>
<div class="in02"></div>
</div>
当然，如果你想要div不被浮动影响，在其内加 clear:both;
13.用 css 实现超出文本用省略号代替。
1.多行文本
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /*截取第三行*/
overflow: hidden;
2,单行文本
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
说明：
1.-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
2.display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
3.-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
14.将这几个选择器按优先级排序；
ＩＤ
类
标签
子选择器 通配符 （并列）
继承属性
15.写三个 css 的优化方法；
1、尽量将样式写在单独的css文件里面，在head元素中引用
有时候为了图方便或者快速搞定功能，我们可能会直接将样式写在页面的style标签或者直接内联在元素上，这样虽然简单方便，但是非常不利于日后的维护。将代码写成单独的css文件有几点好处：
(1)内容和样式分离，易于管理和维护
(2)减少页面体积
(3)css文件可以被缓存、重用，维护成本降低
2、精简页面的样式文件，去掉不用的样式
很多时候，我们会把所有的样式文件合并成一个文件，但是这样有一个问题：很多其他页面的CSS同时引用到当前页面中，而当前页面并没有用到它们，这种情况会造成两个问题：
(1)样式文件偏大，影响加载速度
(2)浏览器会进行多余的样式匹配，影响渲染时间。
正确的处理方法是根据当前页面需要的css去合并那些当前页面用到的CSS文件。
3、避免使用复杂的选择器，层级越少越好,不过三层
5、利用CSS继承减少代码量*
16.用媒体查询实现浏览器宽度大于700px，小于 800px 时引用外部样式style-7-9.css
@media screen and (min-width:700px) and (max-width:800px){
@import 'style-7-9.css'
}
//下面3种方法都有效
@import url("global.css");
@import url(global.css);
@import "global.css";
//指定媒体查询
@import url(example.css) screen and (min-width:800px);
@import url(example.css) screen and (width:800px),(color);
@import url(example.css) screen and (min-device-width:500px) and (max-device-width:1024px);
17. 写任何一种三栏布局：‘左中右布局，左右两边定宽，中间自适应’的思路。
18.
19. 用两种方式实现图片居中。
1.弹性盒布局
/*弹性盒布局*/
#pic {
display: flex;
justify-content: center;
align-items:center;
}
2.栅格布局 （网格布局）
弹性盒用在导航栏是最普遍的。与之相比，栅格布局是普适的布局系统。
#pic {
display: grid;
align-items: center; /*块级方向（纵向）上的全部栅格元素居中对齐*/
justify-items: center; /*行内方向（横向）所有的元素中线对齐*/
}
3.绝对定位中对齐
#pic {
position: relative; /*设置绝对定位元素（img）的容纳块，如果不设置，那么容纳块默认为body*/
}
.logo {
position: absolute;
right: 1em; left: 1em; //表示左右距离相等
top:0;buttom:0;
margin: 0 auto; //与方法二相似
}
body代码
<div id="pic">
<img src=star.jpg class="logo">
</div>
20. 用什么标签提高网站的 seo？
H标签，nofollow标签，加粗标签，
Alt标签，
扫一扫
649
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
