护工列表页
CSS Sprite雪碧图
什么是雪碧图
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术。该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分
使用场景
- 静态图片,不随用户信息的变化而变化。
- 小图片,容量比较小(2~3k)。
- 图片加载量比较大。
使用目的
减少Http请求数量,加速内容显示。因为每请求一次,就会和服务器建立一次链接,而建立链接是需要额外的时间的。
优点
-
加快网页加载速度网页上面每一张图片,都要向浏览器请求下载图片,而浏览器接受的同时请求数是10个,一次能处理的请求数目是两个。
-
后期维护简单
该工具可以直接通过选择图片进行图片的拼接,当然你也可以自己挪动里面的图片,自己去布局你的雪碧图,更换图片的时候也只要更改一下图片的位置就可以了。直接生成代码,简单易用。 -
CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
-
解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。
-
更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。
缺点
- 在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好足够的空间,防止板块内出现不必要的背景;这些还好,最痛苦的是在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂;
- 至于可维护性,这是一把双刃剑。可能有人喜欢,有人不喜欢,因为每次的图片改动都得往这个图片删除或添加内容,显得稍微繁琐。而且算图片的位置(尤其是这种上千px的图)也是一件颇为不爽的事情。当然,在性能的口号下,这些都是可以克服的。
- 由于图片的位置需要固定为某个绝对数值,这就失去了诸如center之类的灵活性。
CSS Sprites一般只能使用到固定大小的盒子(box)里,这样才能够遮挡住不应该看到的部分。这就是说,在一些需要非单向的平铺背景和需要网页缩放的情况下,CSS Sprites并不合适。
初识Bootstrap
“Bootstrap是一组用于网站和网络应用程序开发的开源前端框架,包括HTML、CSS及JavaScript的框架,提供字体排印、窗体、按钮、导航及其他各种组件及Javascript扩展,旨在使动态网页和Web应用的开发更加容易。
特点
- 移动端设备优先
- 响应式设计
Bootstrap 栅格系统的工作原理:
- “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
- 通过“行(row)”在水平方向创建一组“列(column)”。
- 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
- 通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding
布局容器
- .container 类用于固定宽度并支持响应式布局的容器。
- .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
固定布局根据浏览器不同分辨率,固定尺寸不同,不同阈值对应的宽度如下:
>=1200 width为1170px 列的class是: col-lg-*
>=992 width为970px 列的class是: col-md-*
>=768 width为750px 列的class是: col-sm-*
<768 为自适应宽度auto 列的class是: col-xs-*
此外列偏移col-[*]-offset-*
含义:表示在对应的屏幕分辨率下偏移多少个栅格
清除浮动在需要清除浮动的元素前面添加一个空的div,给div添加类名clearfix
Bootstrap也提供了许多的字体图标
使用字体图片的优点:①减少网页请求②样式容易控制,可以通过css直接设置样式
用法:
创建一个空标签,给该空标签添加一个基类和对应图标的类
Bootstrap也提供了很多的组件只需要添加对应的类名来使用
深度思考
去除inline-block元素间间距的N种方法
真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距
有时候这种间距会对布局产生影响,需要去掉这种间距常见去除inline-block间距的方法有哪些?
方法一:改变书写方式来移除空格
元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就消失了。
<div class="space">
<a href="##">
惆怅</a><a href="##">
淡定</a><a href="##">
热血</a>
</div>
或者是:
<div class="space">
<a href="##">惆怅</a
><a href="##">淡定</a
><a href="##">热血</a>
</div>
或者是借助HTML注释:
<div class="space">
<a href="##">惆怅</a><!--
--><a href="##">淡定</a><!--
--><a href="##">热血</a>
</div>
方法二 使用margin负值
margin负值的大小与上下文的字体和文字大小相关吗,由于外部环境的不确定性,以及最后一个元素多出的父margin值等问题,这个方法不适合大规模使用。
方法三 去掉闭合标签
<div class="space">
<a href="##">惆怅
<a href="##">淡定
<a href="##">热血
</div>
如果需要考虑兼容IE6/IE7则把最后一个标签的闭合标签</a>加上
方法四 使用font-size:0
.space {
font-size: 0;
}
.space a {
font-size: 12px;
}
这个方法,基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。
方法五 使用word-spacing或letter-spacing
一个是字符间距(letter-spacing)一个是单词间距(word-spacing),大同小异。 父元素letter-spacing负值只要大到一定程度,其兼容性上的差异就可以被忽略。因为,即使父元素letter-spacing负值很大,也不会发生重叠。但是子元素要设置letter-spacing为0,不然会继承父元素的值;使用word-spacing时,只需设置父元素word-spacing为合适值即可。
css有哪些属性可以继承?
对于一些可以继承的属性,可以只设置上级的CSS样式表树形,子级(下级)不用设置,会自动继承此CSS属性,可以减少CSS代码,便于维护。
- 字体系列属性
- font:组合字体
- font-family:规定元素的字体系列
- font-weight:设置字体的粗细
- font-size:设置字体的尺寸
- font-style:定义字体的风格
- font-variant:设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。
- 文本系列属性
- text-indent:文本缩进
- text-align:文本水平对齐
- text-shadow:设置文本阴影
- line-height:行高
- word-spacing:增加或减少单词间的空白(即字间隔)
- letter-spacing:增加或减少字符间的空白(字符间距)
- text-transform:控制文本大小写
- direction:规定文本的书写方向
- color:文本颜色
- 元素可见性:visibility
- 表格布局属性
- caption-side:设置表格标题的位置。
- border-collapse:设置是否将表格边框折叠为单一边框。
- border-spacing:设置分隔单元格边框的距离。
- table-layout:设置显示单元、行和列的算法。
- empty-cells:设置是否显示表格中的空单元格。
- 列表属性
- list-style:列表风格,包括list-style-type、list-style-image等
- list-style:简写列表样式,用于把所有用于列表的属性设置于一个声明中。
- list-style-type:修改用于列表项的标志类型。
- list-style-image:对各标志使用一个图像。
- list-style-position:可以确定标志出现在列表项内容之外还是内容内部。
- 设置嵌套引用的引号类型
- 光标属性
- cursor:光标显示为何种形态
- 生成内容属性
- quotes:设置嵌套引用的引号类型。
- 页面样式属性
- page:规定元素应该被显示的页面特定类型。
- page-break-inside:设置在表格元素内部避免进行分页的分页行为。
- windows:设置当元素内部发生分页时必须在页面顶部保留的最少行数。
- orphans:设置当元素内部发生分页时必须在页面底部保留的最少行数。
- 声音样式属性
opacity是能继承的属性吗?
当opacity作用于某个元素时,是把这个元素(包括它的内容)作为一个整体看待,即使这个值没有被子元素继承。因此 ,这个元素和它的所有子元素都会具有和元素背景相同的透明度,哪怕这个元素和它的子元素拥有不同的opacity属性值。