【web前端面试题整理03】来看一点CSS相关的吧

原帖地址：http://www.cnblogs.com/yexiaochai/p/3154031.html

前言

昨天我们整理了14到js的题，今天我们再来整理14到CSS相关的题目，昨天整理时候时间有点晚了我便有点心浮气躁，里面的一些题需要再次解答，好了看看今天有些什么吧。

PS：我这里挑一点来做就好了，各位也可以作答

题目一览

1、<img>标签上title属性与alt属性的区别是什么？
2、分别写出以下几个HTML标签：文字加粗、下标、居中、字体
3、写出一个文本输入框，属性为只读，最大输入字符为20个
4、CSS左边固定，右边可变的布局实现方法；要求在源码顺序中左边必须在前。
5、图片和文字一起如何通过css实现居中
6、请简述一下CSS中的样式继承和CSS的选择器
7、请简述一个各个选择器之间的优先级
8、在同等优先级的情况下如何选择样式
9、盒子模型，请简述一下盒子模型
10、如何使一个DIV的背景图像距这个DIV的顶部10像素，左边15像素，且不重复
11、如何增加某一个链接的可点击面积，而下划线仍然与链接一样长？
12、一个元素的上边框为红色，其他边框黑色，里面文字的颜色是蓝色
13、打开（隐藏）、关闭（显示）一个对象。Style的display以及visibility的参数是什么？
14、用css和div实现3列或2列的页面布局，并说明与table布局相比有哪些优缺点
15、定宽网页两列内容布局，试写出你所知道的几种布局代码

第一题，img title与alt

title是用于鼠标划上时候显示的提示信息，而我们的图片总汇有原因不能现在，这个时候alt便会替代文字显示，而且alt对于seo十分友好，所以我们所有的图片必须加上alt，这样浏览器就知道他是干什么的了。

第二题，加粗，居中，下划线标签

center></center>

<u></u>

这道题感觉意义不大，以为以上几个标签除了strong，其它我没有用过，他可能会到语义化相关然后问CSS怎么用吧？

第三题，文本框属性

我突然迷糊了，这些题虽然我不大答得上，但是不带这么问的，因为分分钟可以找到答案的问题。。。虽说我们不应该依赖网络，但是......

第四题，布局的问题

没有理解到想要问什么，按我的理解这个题考察以下知识：

① 内容优先

② 布局知识

第五题，图片与文字一起居中

好了，这道题是这么久出现的最好的一道题，我们先来看一个有趣的实验：

1 <div style=" width: 500px; height: 300px; border: 1px solid black; display: table-cell; vertical-align: middle; text-align: center; ">
2 <img src="1.png" style=" vertical-align: middle;" alt="叶小钗头像" />
3 <span style=" vertical-align: middle; border: 1px dotted black ">刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴
叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗</span>
4 </div>

事实上我们以上的做能保证我们的图片与文字居中了，虽然在IE下需要做特殊处理（文字大小控制），但是我们似乎感觉这不是我们想要的东西么（主要是文字换行的比较诡异）？

这里又涉及到了我们前面介绍的line-height的知识了哦，我们先不管这些，只是看看垂直居中这个：

我这里介绍一个国内淘宝干的事情：

1 div { display: table-cell; width: 200px; height: 200px; font-size: 118px;
border: 1px solid black; text-align: center; vertical-align: middle; }
2 img { vertical-align: middle; }

这个能很好的实现图片居中的功能，现在我们来看看其中文字那块问题吧：

经过我们前面的学习，我们知道一行的高度来源于line boxes，而line boxes高度来源于inline boxes，而第一行的高度由图片决定，所以第一个行高就比较高了，不信？我们来做过例子：

1 <div style=" width: 500px; height: 300px; border: 1px solid black;
display: table-cell; vertical-align: middle; text-align: center; ">
2 <img src="1.png" style=" vertical-align: middle;" alt="叶小钗头像" />
3 <span style=" vertical-align: middle; border: 1px dotted black ">
刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗
<em style=" line-height: 40px; color: Red; ">不信？</em>
刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗</span>
4 </div>

请看此处我们不信所看的事情，其实和img标签差不多了。具体垂直居中的事情各位还要自己私下研究才行。

第十题，背景相关

10、如何使一个DIV的背景图像距这个DIV的顶部10像素，左边15像素，且不重复

PS：我怎么觉得这些题有点坑爹的嫌疑。。。虽说没有编辑器我可能打不好，我也不推荐这么干：

background:url("yexiaochai.gif") no-repeat 15px 10px ;

结语

感觉今天这套题一般，各位看着玩吧。

本文链接：http://www.cnblogs.com/yexiaochai/p/3154031.html，转载请注明。

【web前端面试题整理03】来看一点CSS相关的吧 - 叶小钗相关推荐

【web前端面试题整理03】来看一点CSS相关的吧
前言昨天我们整理了14到js的题,今天我们再来整理14到CSS相关的题目,昨天整理时候时间有点晚了我便有点心浮气躁,里面的一些题需要再次解答,好了看看今天有些什么吧. PS:我这里挑一点来做就好了, ...
WEB前端面试题整理
WEB前端面试题文章目录 WEB前端面试题一.html部分 1.Doctype有什么作用?标准模式与兼容模式有什么区别 2.标准模式与兼容模式(怪异模式)各有什么区别? div1和div2之间的距 ...
【web前端面试题整理05】做几道前端面试题休息休息吧
前言连续学了两天javascript的东西了,我们都累了,于是今天还是上一套面试题吧,大家一起休息休息,也为下个星期可能会有的面试准备下. 题目一览 CSS 1. overflow-x 属于 C ...
web前端面试题整理(vue、uni-app、前端三件套、web基础)
Vue 对mvvm的理解 mvvm分为model.view.viewmodel三者 model代表数据模型 view代表视图 viewmodel代表连接视图和模型,实现了vue数据的双向绑定 view ...
前端面试题整理（vue/js/css）
什么是盒子模型把所有的网页元素都看成一个盒子,它具有content,padding,border,margin 四个属性,这就是盒子模型盒子模型有两种形式:标准盒子模型,怪异盒子模型标准模式,总 ...
吐血熬夜整理!2020最全web前端面试题!!!你想要的我这都有！！！
吐血总结了下web前端面试题,分享给大家,以后还会持续更新,有些题目有多种答案,本文只给出其中一种,哪里有问题的欢迎指出. Html&CSS 1.谈谈你对web标准的理解 web标准的理解 2 ...
java 前端页面传过来的值怎么防止篡改_答对这40道经典web前端面试题，想不拿到offer都难！...
想成功就业web前端工程师,想要能高薪就业,那么除了好的web前端技能以外,还得有好的面试技巧,如果提前就了解更多企业的面试要求及面试题目,那么可以让我们的面试成功的几率大大的提高. 今天小编就整理了 ...
金三银四，磨砺锋芒；剑指大厂，扬帆起航（2020年最全大厂WEB前端面试题精选）上
引言元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待!2019年有多少苦涩心酸,2020年就有更多幸福美好,加油,奥利给!怀着一颗积极向上 ...
金三银四，磨砺锋芒；剑指大厂，扬帆起航（2020年最全大厂WEB前端面试题精选）下
引言元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待!2019年有多少苦涩心酸,2020年就有更多幸福美好,加油,奥利给!怀着一颗积极向上 ...

【web前端面试题整理03】来看一点CSS相关的吧 - 叶小钗

【web前端面试题整理03】来看一点CSS相关的吧 - 叶小钗相关推荐

最新文章

热门文章