首页 > 其他 > 详细

雪碧图与盒模型的概念与组成

时间:2021-02-26 09:48:54      阅读:25      评论:0      收藏:0      [点我收藏+]

一、雪碧图

  • 什么是雪碧图?

    雪碧图也叫CSS精灵(CSS Sprite), 是一种CSS图像合成技术,就是将许多小图标合并在一张背景透明的图片上,使用background-position和background-size来控制图片显示的区域

  • 为什么要使用雪碧图?

    网站开发90%会用到小图标, 多小图标调用显示是前端开发常见的问题,如果每个小图标都单独调用一张图片, 即意味着每个小图标的显示都产生一个HTTP请求;每个请求都需要一定的性能开销,主要在请求、以及响应阶段。为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标、登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图。

  • 使用雪碧图的优缺点

    优点:

    • 通过将多张图片合并成一张,可以有效减少 HTTP 请求,提高页面加载的性能

    • 将多张图片合并到一张图片中,可以减小图片的总大小

    • 整理起来更为方便,同一个按钮不同状态的图片也不需要一个个切割出来并个别命名

    • 只需要修改一张或少张图片的颜色或样式来改变整个网页的风格

    • 只需对一张集合的图片命名,不需要对每一个小图片进行命名,从而提高了网页制作效率

    缺点:

    • 合成起来麻烦

    • 适应性差

    • 可维护性差

    • 小图标在高清屏幕上可能会失真,另外频繁使用定位会占用比较多的CPU

  • 应用场景

    • 静态图片,不随用户信息的变化而变化

    • 小图片,图片容量比较小

    • 加载数量比较大

CSS(Cascading Style Sheet)可译为“层叠样式表 ”或“级联样式表”,它定义如何显示HTML 元素,用于控制Web页面的外观。通过使用CSS实现页面的内容与表现形式分离,极大提高了工作效率。CSS 假定所有的HTML 文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框,可以形象地将其看作是一个盒子

CSS 围绕这些盒子产生了一种“盒子模型”概念,通过定义一系列与盒子相关的属性,可以极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。对于是盒子的元素,如果没有特殊设置,其默认总是占独立的一行,宽度为浏览器窗口的宽度,在其前后的元素不管是不是盒子,都只能排列在它的上面或者下面,即上下累加着进行排列。

HTML文档中的每个盒子都可以看成是由从内到外的四个部分构成,即内容区(content)、填充(padding)、边框(border)和外边距(margin)。 CSS 为四个部分定义了一系列相关属性,通过对这些属性的设置可以丰富盒子的表现效果。

盒子模型包含四个部分:内容content、内填充padding 、边框border、外边距margin

盒模型组成分析

1.1 内容区(content)

内容区是盒子模型的中心,它呈现了盒子的主要信息内容,这些内容可以是文本、图片等多种类型。内容区有三个属性,width、height 和 overflow。

  • 属性 width和height 指定盒子内容区的高度和宽度

  • 属性 overflow 指定内容溢出盒子后得处理方式

    衍生属性 overflow-x 与 overflow-y

    属性值如下:

    • hidden,溢出部分将不可见;

    • visible,溢出的内容信息可见,只是被呈现在盒子的外部

    • scroll,滚动条将被自动添加到盒子中,用户可以通过拉动滚动条显示内容信息;

    • auto,将由浏览器决定如何处理溢出部分

      当内容信息太多,超出内容区所占范围时,可以使用overflow 溢出属性来指定处理方法

注意:盒模型是所有页面布局的基础,可以说是重中之重的内容。就类似于盖房子的地基,地基打不好,一切都白搭。

html代码

<div id="box">
    盒子内容content区域相关属性盒子内容content区域相关属性盒子内容content区域相关属性盒子内容content区域相关属性盒子内容content区域相关属性
    盒子内容content区域相关属性盒子内容content区域相关属性盒子内容content区域相关属性盒子内容content区域相关属性盒子内容content区域相关属性
    盒子内容content区域相关属性盒子内容content区域相关属性盒子内容content区域相关属性盒子内容content区域相关属性盒子内容content区域相关属性
    盒子内容content区域相关属性盒子内容content区域相关属性盒子内容content区域相关属性盒子内容content区域相关属性盒子内容content区域相关属性
    盒子内容content区域相关属性盒子内容content区域相关属性盒子内容content区域相关属性盒子内容content区域相关属性盒子内容content区域相关属性
    盒子内容content区域相关属性盒子内容content区域相关属性盒子内容content区域相关属性盒子内容content区域相关属性盒子内容content区域相关属性
    盒子内容content区域相关属性盒子内容content区域相关属性盒子内容content区域相关属性盒子内容content区域相关属性盒子内容content区域相关属性
    盒子内容content区域相关属性盒子内容content区域相关属性盒子内容content区域相关属性盒子内容content区域相关属性盒子内容content区域相关属性
    盒子内容content区域相关属性盒子内容content区域相关属性盒子内容content区域相关属性盒子内容content区域相关属性盒子内容content区域相关属性
</div>
<p>查看是否会影响显示</p>

css代码

 1 #box{
 2     /* 设置盒子内容的宽度 */
 3     width: 300px;
 4     /* 设置盒子内容的高度 */
 5     height: 300px;
 6     /* 设置背景颜色 */
 7     
 8     /* 设置内容溢出的处理方式 默认是visible*/
 9     /* 内容溢出隐藏 */
10     /* overflow: hidden; */
11     /* 内容溢出出现滚动条 */
12     /* overflow: scroll; */
13     /* 内容溢出自适应 */
14     overflow: auto;
15 }

效果:

技术分享图片

1.2 内填充(padding)

填充是内容区和边框之间的空间

  • 按照填充方向划分

    • padding -top

    • padding -bottom

    • padding -left

    • padding-right

  • 按照值的多少划分

    综合了以上四种方向的快捷填充属性padding

    • 单值法

    • 二值法

    • 三值法

    • 四值法

注:使用这五种属性可以指定内容区信息内容与各方向边框间的距离。设置盒子背景色属性时,可使背景色延伸到填充区域。

1.3 边框(border)

边框是环绕内容区和填充的边界。

  • 按照属性不同分类

    • border-style 边框样式

      1. 此属性是边框最重要的属性,如果没有指定边框样式,其他的边框属性都会被忽略,边框将不存在

      2. CSS规定了 dotted、dashed、solid等九种边框样式,如下

        技术分享图片

    • border-width 边框厚度

      1. 属性值可以是长度计量值,也可以是CSS规定的thin、medium 和thick

    • border-color 边框颜色

  • 按照方向进行分类,如下:

    border-top-style: solid

    border-left-color: red

    border-bottom-width:10px;

  • 按照值的多少进行分类

    border-style:top right bottom left

    border-width:top right bottom left

    border-color:top right bottom left

     

综合了以上四种方向的简写属性 border:style width color; 设置四个边相同的样式

注:设置盒子背景色属性时,在IE中背景不会延伸到边框区域,但在FF等标准浏览器中,背景颜色可以延伸到边框区域,特别是单边框设置为点线或虚线时能看到效果

css代码
 1 #box{
 2     /* 设置盒子内容的宽度 */
 3     width: 300px;
 4     /* 设置盒子内容的高度 */
 5     height: 300px;
 6 ?
 7     /* 设置内填充 */
 8     padding: 20px; /* 四个方向*/
 9 ?
10     /* 设置边框 */
11     /* 设置边框样式 */
12     border-style: dashed double outset groove;
13     /* 设置边框宽度 */
14     border-width: 10px 20px 30px 5px;
15     /* 设置边框颜色 */
16     border-color: blue red green pink;
17 ?
18     /* 单独设置某一个方向 */
19     /* border-top:solid 5px pink;
20     border-bottom-color: red;
21     border-left-width:40px; */
22 ?
23     /* 设置背景颜色 */
24     
25     /* 内容溢出自适应 */
26     overflow: auto;
27 }

 

1.4 外边距(margin)

外边距位于盒子的最外围,是添加在边框外周围的空间。外边距使盒子之间不会紧凑地连接在一起,是CSS 布局的一个重要手段。

  技术分享图片

  • 按照填充方向划分

    • margin-top

    • margin-bottom

    • margin- left

    • margin-right

  • 按照值的多少划分

    综合了以上四种方向的外边距属性 margin,使用类似于内填充 padding

    • 单值法

    • 二值法

    • 三值法

    • 四值法

注:CSS 容许给外边距属性指定负数值,当指定负外边距值时,整个盒子将向指定负值方向的相反方向移动,以此可以产生盒子的重叠效果。采用指定外边距正负值的方法可以移动网页中的元素,这是CSS 布局技术中的一个重要方法。

 

1.5 外边距合并问题

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图:

技术分享图片

当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。请看下图:

技术分享图片

尽管看上去有些奇怪,但是外边距甚至可以与自身发生合并。

假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并:

技术分享图片

如果这个外边距遇到另一个元素的外边距,它还会发生合并:

技术分享图片

这就是一系列的段落元素占用空间非常小的原因,因为它们的所有外边距都合并到一起,形成了一个小的外边距。

外边距合并初看上去可能有点奇怪,但是实际上,它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并,后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并,段落之间的上外边距和下外边距就合并在一起,这样各处的距离就一致了。

技术分享图片

注释:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

 

1.6 总结

元素总宽度计算公式:总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素总高度最终计算公式:总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

需要注意的是:当给元素设置的 margin 或 padding 值为百分比时,不管哪个方向,永远定义的是基于父对元素宽度的百分比的外边距 或 内填充

 

1.7 CSS继承性体现:

继承性:某些祖先元素的样式子类可以继承

文本相关和排版相关的样式可以继承,如:color 、font-系列、text-系列等等

盒子相关属性和背景相关属性不可以继承,如:width、height、margin、padding、border、background等

 

三、盒模型分类

CSS3 box-sizing 属性允许你以某种方式定义某些元素,以适应指定区域,属性值如下:

  • content-box 指定盒模型为 W3C 标准模型

    W3C标准盒模型(conten-box值)【width/height被改变,扩展】
    width = content + border + padding;
  • border-box 指定盒模型为 IE模型(怪异模式)

    IE怪异盒模型(border-box值)【content被改变,压缩】
    content = width - border - padding;

    注:上面width 为在CSS中设置的元素的width;

 

四、元素框类型

display 属性规定元素应该生成的框的类型,选取部分属性值如下

描述
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
table 此元素会作为块级表格来显示(类似 table),表格前后带有换行符。
table-row 此元素会作为一个表格行显示(类似 tr)。
table-cell 此元素会作为一个表格单元格显示(类似 td 和 th)

注:行内元素 margin 和 padding 设置上下方向值无效

 

盒子在标准流定位原则(元素排列方式)

按照我们书写的 html 结构顺序,依次按照元素默认的类型在浏览器进行渲染:块状元素独占一行,非块状元素从左到右依次排列。

五、visibility 与 opacity

visibility 属性指定一个元素是否是可见的

visibility:visible(默认,元素可见) | hidden(元素不可见)

opacity 属性指定不透明度。从0.0(完全透明)到1.0(完全不透明)

雪碧图与盒模型的概念与组成

原文:https://www.cnblogs.com/zhki/p/14450438.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!