二、$CSS部分
1、css sprite是什么,有什么优缺点
概念:将多个小图片拼接到一个图片中。通过
background-position
和元素尺寸调节需要显示的背景图案。优点:
- 减少
HTTP
请求数,极大地提高页面加载速度 - 增加图片信息重复度,提高压缩比,减少图片大小
- 更换风格方便,只需在一张或几张图片上修改颜色或样式即可实现
- 减少
缺点:
- 图片合并麻烦
- 维护麻烦,修改一个图片可能需要从新布局整个图片,样式
2、display: none;
与visibility: hidden;
的区别
联系:它们都能让元素不可见
区别:
display:none
;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;visibility: hidden
;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见display: none
;是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示;visibility: hidden;
是继承属性,子孙节点消失由于继承了hidden
,通过设置visibility: visible;
可以让子孙节点显式- 修改常规流中元素的
display
通常会造成文档重排。修改visibility
属性只会造成本元素的重绘。 - 读屏器不会读取
display: none
;元素内容;会读取visibility: hidden;
元素内容
3、link
与@import
的区别
link
是HTML
方式,@import
是CSS方式link
最大限度支持并行下载,@import
过多嵌套导致串行下载,出现FOUC
link
可以通过rel="alternate stylesheet"
指定候选样式浏览器对
link
支持早于@import
,可以使用@import
对老浏览器隐藏样式@import
必须在样式规则之前,可以在css文件中引用其他文件总体来说:
link
优于@import
4、什么是FOUC?如何避免
Flash Of Unstyled Content
:用户定义样式表加载之前浏览器使用默认样式显示文档,用户样式加载渲染之后再从新显示文档,造成页面闪烁。解决方法:把样式表放到文档的
head
5、如何创建块级格式化上下文(block formatting context),BFC有什么用
创建规则:
- 根元素
- 浮动元素(
float
不是none
) - 绝对定位元素(
position
取值为absolute
或fixed
) display
取值为inline-block
,table-cell
,table-caption
,flex
,inline-flex
之一的元素overflow
不是visible
的元素
作用:
- 可以包含浮动元素
- 不被浮动元素覆盖
- 阻止父子元素的
margin
折叠
6、display,float,position的关系
如果
display
为none
,那么position
和float
都不起作用,这种情况下元素不产生框否则,如果
position
值为absolute
或者fixed
,框就是绝对定位的,float
的计算值为none
,display
根据下面的表格进行调整。否则,如果
float
不是none
,框是浮动的,display
根据下表进行调整否则,如果元素是根元素,
display
根据下表进行调整其他情况下
display
的值为指定值总结起来:绝对定位、浮动、根元素都需要调整
display
7、清除浮动的几种方式,各自的优缺点
父级
div
定义height
结尾处加空
div
标签clear:both
父级
div
定义伪类:after
和zoom
父级
div
定义overflow:hidden
父级
div
也浮动,需要定义宽度结尾处加
br
标签clear:both
比较好的是第3种方式,好多网站都这么用
8、为什么要初始化CSS样式?
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对
CSS
初始化往往会出现浏览器之间的页面显示差异。当然,初始化样式会对
SEO
有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化
9、css3有哪些新特性
新增各种
css
选择器圆角
border-radius
多列布局
阴影和反射
文字特效
text-shadow
线性渐变
旋转
transform
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
在元素之后添加内容:enabled
:disabled
控制表单控件的禁用状态。:checked
单选框或复选框被选中
10、display有哪些值?说明他们的作用
block
象块类型元素一样显示。none
缺省值。象行内元素类型一样显示。inline-block
象行内元素一样显示,但其内容象块类型元素一样显示。list-item
象块类型元素一样显示,并添加样式列表标记。table
此元素会作为块级表格来显示inherit
规定应该从父元素继承display
属性的值
11、介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?
有两种,
IE
盒子模型、W3C
盒子模型;盒模型: 内容(content)、填充(
padding
)、边界(margin
)、 边框(border
);区 别:
IE
的content
部分把border
和padding
计算了进去;
12、CSS优先级算法如何计算?
优先级就近原则,同权重情况下样式定义最近者为准
载入样式以最后载入的定位为准
优先级为:
!important > id > class > tag
important
比 内联优先级高
13、对BFC规范的理解?
它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用
14、谈谈浮动和清除浮动
浮动的框可以向左或向右移动,直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上
15、position的值, relative和absolute定位原点是
absolute
:生成绝对定位的元素,相对于static
定位以外的第一个父元素进行定位fixed
:生成绝对定位的元素,相对于浏览器窗口进行定位relative
:生成相对定位的元素,相对于其正常位置进行定位static
默认值。没有定位,元素出现在正常的流中inherit
规定从父元素继承position
属性的值
16、display:inline-block 什么时候不会显示间隙?(携程)
移除空格
使用
margin
负值使用
font-size:0
letter-spacing
word-spacing
17、PNG,GIF,JPG的区别及如何选
GIF
8
位像素,256
色- 无损压缩
- 支持简单动画
- 支持
boolean
透明 - 适合简单动画
JPEG
- 颜色限于
256
- 有损压缩
- 可控制压缩质量
- 不支持透明
- 适合照片
- 颜色限于
PNG
- 有
PNG8
和truecolor PNG
PNG8
类似GIF
颜色上限为256
,文件小,支持alpha
透明度,无动画- 适合图标、背景、按钮
- 有
18、行内元素float:left后是否变为块级元素?
浮动后,行内元素不会成为块状元素,但是可以设置宽高。行内元素要想变成块状元素,占一行,直接设置
display:block
;。但如果元素设置了浮动后再设置display:block
;那就不会占一行。
19、在网页中的应该使用奇数还是偶数的字体?为什么呢?
偶数字号相对更容易和 web 设计的其他部分构成比例关系
20、::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用
单冒号(
:
)用于CSS3伪类,双冒号(::
)用于CSS3
伪元素用于区分伪类和伪元素
21、如果需要手动写动画,你认为最小时间间隔是多久,为什么?(阿里)
多数显示器默认频率是
60Hz
,即1
秒刷新60
次,所以理论上最小间隔为1/60*1000ms = 16.7ms
22、CSS合并方法
- 避免使用
@import
引入多个css
文件,可以使用CSS
工具将CSS
合并为一个CSS
文件,例如使用Sass\Compass
等
23、CSS不同选择器的权重(CSS层叠的规则)
!important
规则最重要,大于其它规则行内样式规则,加
1000
对于选择器中给定的各个
ID
属性值,加100
对于选择器中给定的各个类属性、属性选择器或者伪类选择器,加
10
对于选择其中给定的各个元素标签选择器,加1
如果权值一样,则按照样式规则的先后顺序来应用,顺序靠后的覆盖靠前的规则
24、列出你所知道可以改变页面布局的属性
position
、display
、float
、width
、heigh
t、margin
、padding
、top
、left
、right
、`
25、CSS在性能优化方面的实践
css
压缩与合并、Gzip
压缩css
文件放在head
里、不要用@import
尽量用缩写、避免用滤镜、合理使用选择器
26、CSS3动画(简单动画的实现,如旋转等)
依靠
CSS3
中提出的三个属性:transition
、transform
、animation
transition
:定义了元素在变化过程中是怎么样的,包含transition-property
、transition-duration
、transition-timing-function
、transition-delay
。transform
:定义元素的变化结果,包含rotate
、scale
、skew
、translate
。animation
:动画定义了动作的每一帧(@keyframes
)有什么效果,包括animation-name
,animation-duration
、animation-timing-function
、animation-delay
、animation-iteration-count
、animation-direction
27、base64的原理及优缺点
优点可以加密,减少了
http
请求缺点是需要消耗
CPU
进行编解码
28、几种常见的CSS布局
流体布局
.left {
float: left;
width: 100px;
height: 200px;
background: red;
}
.right {
float: right;
width: 200px;
height: 200px;
background: blue;
}
.main {
margin-left: 120px;
margin-right: 220px;
height: 200px;
background: green;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
圣杯布局
.container {
margin-left: 120px;
margin-right: 220px;
}
.main {
float: left;
width: 100%;
height:300px;
background: green;
}
.left {
position: relative;
left: -120px;
float: left;
height: 300px;
width: 100px;
margin-left: -100%;
background: red;
}
.right {
position: relative;
right: -220px;
float: right;
height: 300px;
width: 200px;
margin-left: -200px;
background: blue;
}
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
双飞翼布局
.content {
float: left;
width: 100%;
}
.main {
height: 200px;
margin-left: 110px;
margin-right: 220px;
background: green;
}
.main::after {
content: '';
display: block;
font-size:;
height:;
zoom:;
clear: both;
}
.left {
float:left;
height: 200px;
width: 100px;
margin-left: -100%;
background: red;
}
.right {
float: right;
height: 200px;
width: 200px;
margin-left: -200px;
background: blue;
}
<div class="content">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
29、stylus/sass/less区别
均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性
Scss
和LESS
语法较为严谨,LESS
要求一定要使用大括号“{}”,Scss
和Stylus
可以通过缩进表示层次与嵌套关系Scss
无全局变量的概念,LESS
和Stylus
有类似于其它语言的作用域概念Sass
是基于Ruby
语言的,而LESS
和Stylus
可以基于NodeJS
NPM
下载相应库后进行编译;
30、postcss的作用
- 可以直观的理解为:它就是一个平台。为什么说它是一个平台呢?因为我们直接用它,感觉不能干什么事情,但是如果让一些插件在它上面跑,那么将会很强大
PostCSS
提供了一个解析器,它能够将CSS
解析成抽象语法树- 通过在
PostCSS
这个平台上,我们能够开发一些插件,来处理我们的CSS
,比如热门的:autoprefixer
postcss
可以对sass处理过后的css
再处理 最常见的就是autoprefixer
最新文章
- linux的用户与用户组
- 深度理解Jquery 中 offset() 方法
- 顺序栈的c++实现及利用其实现括号的匹配
- WCF学习心得----(四)服务承载
- C#4.0新特性(3):变性 Variance(逆变与协变)
- 常用的工具GCC GDB Make Makefile
- dubbo No provider available for the service com.alibaba.dubbo.monitor.MonitorService from registry
- ios数组基本用法和排序
- 简单实用的下拉菜单(CSS+jquery)
- JAVA中反射机制一
- 每天一个linux命令(26):用SecureCRT来上传和下载文件(转载自竹子)
- Matlab人脸检測方法(Face Parts Detection)具体解释
- caffe2学习
- js写法【2】
- android studio 安装过程
- hdu-6319-单调队列
- 2_C语言中的数据类型 (八)运算符
- ajax readyState=4并且status=200时,还进error方法
- 图像格式转换之BMP格式转换为JPG格式
- 【异常记录(五)】C# 无法发送具有此谓词类型的内容正文错误
热门文章
- 【高并发】由InterruptedException异常引发的思考
- opencv-10-图像滤波-噪声添加与均值滤波-含opencv C++ 代码实现
- 【集群实战】Rsync数据同步工具
- Python内置函数enumerate()
- CentOS7编译安装NodeJS
- mybatis if test标签的使用
- 一个数number的n次幂 python的pow函数
- C# 数据操作系列 - 3. ADO.NET 离线查询
- 1018 Public Bike Management (30分) 思路分析 + 满分代码
- 关于redis,你需要了解的几点!