XX宝面试题——css部分
1、<b></b>与<strong></strong>有什么不同？
1) <b>标签是一个实体标签，它所包围的字符将被设为bold（粗体），而<strong>标签是一个逻辑标签，它的作用是加强字符的语气，一般来说，加强字符的语气是通过将字符变为bold（粗体）来实现的。这个strong完全可以定义成别的样式的强调效果
2) strong是web标准中xhtml的标签，意思是“强调”；b是html的，意思是bold（粗体）。
2、CSS判断用id、class以及标签选择器定义样式的优先级？
1) 三种方式并存的时候：!important > id > class > tag
2) 当只有两个class或者两个id的时候
<body>
<fieldset>
<legend>两个class的时候</legend>
<div class="classtest2" class="classtest">classtest2(黄色)先classtest(蓝色)后</div>
<div class="classtest" class="classtest2">classtest(蓝色)先classtest2(黄色)后</div>
</fieldset>
<fieldset>
<legend>两个id的时候</legend>
<div id="idtest" id="idtest2">idtest(绿色)先idtest2(黄绿色)后</div>
<div id="idtest2" id="idtest">idtest2(黄绿色)先idtes(绿色)后</div>
</fieldset>
得出优先级结果：当且仅当有两个或多个class或id的时候，前面的优先级高。
3) 只有标签div选择器的时候
<head>
<style type="text/css" media="screen">
div { color: blue; }
div { color: red; }
</style>
</head>
<body>
<div>蓝色样式先，红色样式后</div>
</body>
结论：结果显示为红色，表明当只有标签选择器时，后面定义的样式表的优先级就越高。
CSS引入方式优先级
1) 外部样式表：将样式规则直接写在*.css文件中，然后再*.html页面中通过<link>标签引入的方式
2) 内部样式表：（位于<head>
标签内部）
3) 内联样式：（在HTML元素内部）
4) 导入样式表：<style
type="text/css"> @import url("css/base.css"); </style>
验证：外部样式表
VS 内部样式表（先定义内部样式表，再引入外部样式表定义文件）
<head>
<title>CSS样式表优先级测试</title>
<meta charset="UTF-8" />
<style type="text/css" media="screen">
div { color: green }
</style>
<link rel="stylesheet" href="css/xiaoxuetu.css"
type="text/css" media="screen" title="no title"
charset="utf-8"/>
</head>
得出优先级结果：外部样式表
> 内部样式表
验证：外部样式表
VS 内部样式表（先引入外部样式表定义文件，再定义内部样式表）
<head>
<title>CSS样式表优先级测试</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/xiaoxuetu.css"
type="text/css" media="screen" title="no title"
charset="utf-8"/>
<style type="text/css" media="screen">
div { color: green; }
</style>
</head>
得出优先级结果：内部样式表
> 外部样式表
从这两部测试发现，在直接对标签的样式进行定义时，外部样式表和内部样式表的优先与他们的引入顺序有关。
验证：外部样式表
VS 内联样式
<head>
<title>CSS样式表优先级测试</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/xiaoxuetu.css"
type="text/css" media="screen" title="no title"
charset="utf-8"/>
</head>
<body>
<div style="color:red;">外部样式表(蓝色)
VS 内联样式(红色)</div>
</body>
得出优先级结果：内联样式 > 外部样式表
验证：内联样式
VS 内部样式表
<head>
<title>CSS样式表优先级测试</title>
<meta charset="UTF-8" />
<style type="text/css" media="screen">
div { color: green }
</style>
</head>
<body>
<div style="color:red;">内部样式表(绿色)
VS 内联样式(红色)</div>
</body>
得出优先级结果：内联样式 > 内部样式表
结论：内部样式的优先级最大，而内部样式表和外部样式表的优先级得看他们的引入和定义顺序，即后引入的会覆盖之前的。
3、列出display的值，说明他们的作用。
block 象块类型元素一样显示。
none 缺省值。象行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。
position的值：
*absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
*fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。
*relative 生成相对定位的元素，相对于其正常位置进行定位。
* static 默认值。没有定位，元素出现在正常的流中
*（忽略 top, bottom, left, right z-index 声明）。
* inherit 规定从父元素继承 position 属性的值。
4、css背景设置
1） 背景色(background-color)，有许多方式指定这个颜色，以下方式都得到相同的结果。
2） 背景图(background-image)
3） 背景平铺(background-repeat)
4） 背景定位(background-position)
background-position 属性用来控制背景图片在元素中的位置。实际上指定的是图片左上角相对于元素左上角的位置。第一个数字表示 x 轴(水平)位置，第二个是 y 轴(垂直) 位置。
background-position: 0 0; /* 例 1: 默认值，元素的左上角 */
background-position: 75px 0; /* 例 2: 把图片向右移动 */
background-position: -75px 0; /* 例 3: 把图片向左移动 */
background-position: 0 100px; /* 例 4: 把图片向下移动 */
background-position 属性可以用其它数值，关键词和百分比来指定，尤其是在元素尺寸不是用像素设置时。
x 轴上：* left * center * right
y 轴上：* top * center * bottom
使用百分数定位时，其实是将背景图片的百分比指定的位置和元素的百分比位置对齐。也就是说，百分数定位是改变了背景图和元素的对齐基点。不再像使用像素和关键词定位时使用背景图和元素的左上角为对齐基点。例如上例的 background-position: 100% 50%; 就是将背景图片的 100%(right) 50%(center) 这个点，和元素的 100%(right) 50%(center) 这个点对齐。
5） 背景附着background-attachment
background-attachment 属性决定用户滚动页面时图片的状态。三个可用属性为 scroll(滚动)，fixed(固定) 和 inherit(继承)。inherit 单纯地指定元素继承他的父元素的 background-attachment 属性。
为了正确地理解 background-attachment，首先需要明白页面(page)和视口(view port)是如何协作地。视口(view port)是浏览器显示网页的部分(就是去掉工具栏的浏览器)。视口(view port)的位置固定，不变动。
当向下滚动网页时，视口(view port)是不动的，而页面的内容向上滚动。看起来貌似视口(view port)向页面下方滚动了。如果设置 background-attachment: scroll，就设置了当元素滚动时，元素背景也必需随着滚动。简而言之，背景是紧贴元素的。这是 background-attachment 默认值。
（1）用一个例子来更清楚地描述下：
background-image: url(test-image.jpg);
background-position: 0 0;
background-repeat: no-repeat;
background-attachment: scroll;
当向下滚动页面时，背景向上滚动直至消失。
但是当设置 background-attachment 为 fixed 时，当页面向下滚动时，背景要待在它原来的位置(相对于浏览器来说)。也就是不随元素滚动。
（2）用另一个例子描述下：
background-image: url(test-image.jpg);
background-position: 0 100%;
background-repeat: no-repeat;
background-attachment: fixed;
因为图片开始在元素之外，一部分图片被切除了。
5、css样式中，自定义宽度的输入框超出部分隐藏并显示省略标记。
.xx{
display: block;
width:200px; /*对宽度的定义*/
overflow: hidden; /*超出的部分隐藏*/
white-space: nowrap; /*禁止换行*/
text-overflow: ellipsis; /*超出的部分用...实现*/
}
text-overflow属性规定当文本溢出包含元素时发生的事情。
text-overflow: clip | ellipsis | string;
clip 修剪文本。
ellipsis显示省略符号来代表被修剪的文本。
string使用给定的字符串来代表被修剪的文本。
6、png、jpg、gif图片的区别
GIF特点：体积小，有着极好的压缩效果，支持动画，并且支持透明效果，虽然这个透明没有PNG的那样渐变透明的强大。
JPG是数码相机最常用的格式，特点：色彩还原好，可以在照片不明显失真的情况下，大幅降低体积，所以体积不很大，缺点是不支持透明。
PNG是最适合网络的图片！PNG的优点：清晰，无损压缩，压缩比率很高，可渐变透明，具备几乎所有GIF的优点；缺点是不如JPG的颜色丰富，同样的图片体积也比JPG略大。但是PNG应该在网站设计上被推广，它是公认的最适合网页使用的图片格式。Google所有站点几乎全部的图片资源都是PNG格式。8位的PNG完全可以替代掉GIF。
PNG另一个优点，就是逐次逼近显示(progressive display)：传输图像文件的同时，可以先把整个轮廓显示出来，然后逐步显示图像的细节，即先显示低分辨率显示图像，从模糊到清晰，然后逐步提高它的分辨率。这是一个很好的用户体验。
各方面比较
大小比较：通常地，PNG ≈ JPG > GIF
透明性：PNG > GIF > JPG
色彩丰富程度：JPG > PNG >GIF
兼容程度：GIF ≈ JPG > PNG
注意，IE6下PNG的透明是不能显示的，有其对应的Hack方法。
XX宝面试题——css部分的更多相关文章
- XX宝面试题——JS部分
1.sessionStorage .localStorage 和 cookie 之间的差别 sessionStorage 和 localStorage 是HTML5 Web Storage API 供 ...
- 前端面试题-CSS优先级
一.选择器优先级 浏览器通过优先级来判断哪一些属性值与一个元素最为相关,从而在该元素上应用这些属性值.优先级是基于不同种类选择器组成的匹配规则. 二.优先级计算 优先级就是分配给指定的CSS声明的一个 ...
- 前端开发面试题-CSS（转载）
本文由 本文的原作者markyun 收集总结. 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(conte ...
- 由一道淘宝面试题到False sharing问题
今天在看淘宝之前的一道面试题目,内容是 在高性能服务器的代码中经常会看到类似这样的代码: typedef union { erts_smp_rwmtx_t rwmtx; byte cache_line ...
- 前端高频面试题 CSS篇
通过从网上看到的面经,总结的一些高频的前端CSS面试题,有很多不会,于是找资料,并通过代码实现,自己提供了一些参考答案. 目录 1.怎样会产生浮动? 2.如何清除浮动? 3.盒子模型,以及IE和其他浏 ...
- 前端面试题-CSS选择器
一.CSS选择器作用 CSS 选择器用于定位我们想要给予样式的 HTML 元素,但不只是在 CSS 中,JavaScript 对 CSS 的选择器也是支持的,比如 document.document. ...
- 前端开发面试题 — css篇
1.介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(content).填充(padding).边界(mar ...
- 前端进阶试题css（来自js高级前端开发---豪情）既然被发现了HOHO，那我就置顶了嘿嘿！觉得自己技术OK的可以把这套题目做完哦，然后加入高级前端的社区咯
http://www.cnblogs.com/jikey/p/4426105.html js高级前端开发加群方法(此群很难进,里面纯技术,严禁广告,水群) 完整题目做完发邮箱(jikeytang@16 ...
- 2019年前端面试题 | CSS篇 （更新于4月15日）
虽说刷面试题有走捷径之嫌,但我发现,对于我这样没有工作经历的人来说,其实是拓展自己实战技能和加深知识理解的一个好机会. 分享出来,也希望大家不要背完了事,正经的去细细琢磨各种原由. 本篇是一个题目合集 ...
随机推荐
- awk 以HWI开头，并且：相邻两行的第一个字段完全相同；
## 思路:以HWI开头,并且:相邻两行的第一个字段完全相同:awk 'BEGIN{ last_col_1="xxxxxx"; last_row="bbbbbbbbbbb ...
- JBOSS批量扫描
exploit-db提供出了EXP,如下: /* * JBoss JMXInvokerServlet Remote Command Execution * JMXInvoker.java v0.3 - ...
- 浏览器被hao.360.cn劫持怎么办
特么的现在互联网太没节操了,一大早发现我的浏览器被hao.360.cn劫持了,弄了好久都没弄好,后来一想可能是因为qvod的原因,这可是哥当年看片的神器啊…… 废话不说: 1,进入:C:\Progra ...
- CUBRID学习笔记 36 在net中添加多行记录
using System.Data.Common; using CUBRID.Data.CUBRIDClient; namespace Sample { class Add_MultipleRows ...
- Strategy策略模式
策略模式定义了一系列算法,把它们一个个封装起来,并且使它们可相互替换.该模式可使得算法能独立于使用它的客户而变化.Strategy模式是行为模式,正因为他是一种行为模式,所以他不是用来解决类的实例化的 ...
- WinForm 弹框确认后执行
if (MessageBox.Show("你确定要退出程序吗?", "确认", MessageBoxButtons.OKCancel, MessageBoxIc ...
- this call和apply
this指针总是指向一个对象,大致可以分为以下四种: 1,作为对象的方法调用(this指向该对象) 2,作为普通函数调用 当函数不作为对象的属性被调用时,也就是普通函数方式,此时的this总是指向全局 ...
- 16 shell调试技术
trap 命令 基本格式: trap command sig1 sig2 ... sigN 有3种信号可以捕获: EXIT : 从函数中退出, 或整个脚本执行完毕 ERR: 当一 ...
- C#操作Excel数据增删改查(转)
C#操作Excel数据增删改查. 首先创建ExcelDB.xlsx文件,并添加两张工作表. 工作表1: UserInfo表,字段:UserId.UserName.Age.Address.CreateT ...
- poj3855Blast the Enemy!（多边形重心）
链接 #include <iostream> #include<cstdio> #include<cstring> #include<algorithm> ...