护工列表页

护工列表页

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属性值。

posted @ 2019-11-28 21:15  Hou-Sheng  阅读(153)  评论(0)  编辑  收藏  举报