02你认真学了css？（基本样式2）

发表于 | 更新于: | 分类于 ， | 阅读次数:
字数统计: 1,895 | 阅读时长 ≈ 8

一、背景

属性 描述
background 简写属性，将背景属性设置在一个生命中
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background-color 可设置元素的背景颜色
background-image 可把图像设置为背景
background-position 设置背景图像的起始位置（常用于图标在页面上的设置）
background-repeat 设置背景图像是否重复，以及如何重复
background-size 设置背景的大小（兼容性）（css3）

1、background-position ：默认图片主要从左上角方向偏移

  • x y
  • x% y%
  • [top | center | bottom] [left | center | right]

2、background-repeat：背景图像是否重复或如何重复

  • no-repeat：背景图片在规定位置
  • repeat-x：图片横向重复
  • repeat-y：图片纵向重复
  • repeat：全部重复

3、background-size：背景图片大小的设置，用来拉伸、缩放

  • 100px 100px
  • contain
  • cover

4、关于background相关元素的属性，代码如下：

1
2
3
4
5
/*背景色和背景图片使用场景 */
场景1：两元素适用于页面大、背景图片小
场景2：背景图为.png格式的图片*/
background-color: #f00; background-image:  url(background.gif);  background-repeat: no-repeat;  background-attachment: fixed;  background-position: 0 0;
/*背景位置与页面窗口的宽、高成正相关*/

可缩写为一句：
background: #f00 url(background.gif) no-repeat fixed 0 0;
如图：
background-size：contain；
background-size：cover；
display：inline-block
display：block

注：使用background-color和background-image，需要注意：
（1）将该页面撑开
（2）注意background-size使用

二、CSS Sprite

1、俗称“雪碧图”或“精灵图”指将不同的图片、图标合并在一张图上。
2、作用：使用CSS Sprite 可以减少网络请求（如每一张小icon图片都会产生加载时间），提高网页加载性能。
3、使用：利用background-position，对图标进行位置偏移

三、隐藏or透明

  • opacity: 0; ：透明度为0，整体（透明度0-1，0.5为半透明）
  • visibility: hidden; : 即元素看不见，但存在。 和opacity：0；类似
  • display：none； : 消失，不占位置（页面上渲染的其他元素都察觉不到）
  • background-color ：rgba（0，0，0，0.2） 只是背景色透明

四、inline-block

1、定义：

既呈现inline特性（不占据一整行，宽度由内容宽度决定），又呈现block特性（可设置宽高，内外边距）
注： display:block;的布局下，块级元素的宽度是一个可忽视的问题
1
2
3

2、缝隙问题：

如图：image

3、行内元素对齐问题：

如图：在inline-block的布局下，可以看成文字对齐。默认情况下，行内元素对齐是以里面内容的底部为基线对齐（至少两个元素进行对比），其他则设置vertical-align：top(bottom、middle)等）进行基线对齐（在表格中使用尤为明显）
image

五、line-height

1、定义：

用于设置单行文本的行高。

2、几个问题：

（1）了解line-height和margin、padding在使用上的一个区别

  • line-height: 2，所占据的行高是本身文字高度的2倍。
  • margin是外边距，
  • padding则是内边距
    image

（2）line-height的用法，数字和百分比的区别

line-height：2VS line-height： 100%

line-height具有继承性。
image

  • line-height:2，所占据的行高是本身文字高度的2倍。想要页面每个元素都拥有几倍的行高，则设置为数字。
  • line-height: 200% ，是其父元素文字高度的2倍。（注：百分比有一定的相对性，如本身无设置和设置百分比，便可看出差别）
    image

3、height=line-heihgt

设置垂直居中单行文本，如图：
image

六、盒模型

1、IE 盒模型

IE 盒模型的width包括：content尺寸+padding+border
image
（如IE678怪异模式，不添加doctype，使用ie盒模型，宽度=边框+padding+内容宽度），如图：
image

2、W3C标准下的盒模型

W3C标准下的盒模型padding、border所占的空间不在width、height范围内，content宽度即是width
image
（如chrome，ie9+,ie678，添加doctype，使用标准盒模型，宽度=内容宽度），如图：
image

3、box-sizing（css3新样式）

为了使用方便，可以用IE盒模型计算宽度的方法，将width=border+padding+内容宽度
A、W3C标准的盒模型：box-sizing： content-box
B、IE盒模型：box-sizing：border-box

1
2
<div style="height:200px;  width:200px;  border:solid  10px #333;  padding:100px>
</div>

七、字体图标的实现

1、字体图标的原理：

当你写完带有字体的html文件时，在浏览器打开页面时，浏览器会读取 HTML 文件进行解析渲染。当读到「饥饿」两个字时会转换成对应的 unicode码（一种识别字体的特定编号）。再根据HTML里设置的font-family（如果没设置则使用浏览器默认设置）去查找电脑里（如果有自定义字体@font-face ，则加载对应字体文件）对应字体的字体文件。找到文件后根据 unicode 码去查找绘制外形，找到后绘制到页面上。 所以对于第二个范例， 「&#9965」是「饥」的unicede码，所以用户最终也能看到serf字体样式的「饥」字。

2、实现步骤：

第一步：
进入Iconfont-阿里巴巴矢量图标库——选一个喜欢的图标——添加至购物车——添加至项目——复制Unicode码
第二步：
进入代码——并未展示图标（说明系统中没有能体现字体图标的该Unicode码，浏览器也未能识别Unicode码）——复制该图标自动生成的css代码（用@font-face来定义一个字体，该字体名可以随便取，这里为：XXX）——定义该字体图标，并设置它css样式如font-family：XXX；等样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style> @font-face {
      font-family: 'iconfont';  /* project id 645342  */
      src: url('//at.alicdn.com/t/font_645342_wae7ml0d77am7vi.eot');
      src: url('//at.alicdn.com/t/font_645342_wae7ml0d77am7vi.eot?#iefix') format('embedded- opentype'),
      url('//at.alicdn.com/t/font_645342_wae7ml0d77am7vi.woff') format('woff'),
      url('//at.alicdn.com/t/font_645342_wae7ml0d77am7vi.ttf') format('truetype'),
      url('//at.alicdn.com/t/font_645342_wae7ml0d77am7vi.svg#iconfont') format('svg');
     }
     p{
      font-family:  iconfont;
      font-size: 40px;
    }
  </style>
</head>
<body>
     <p>&#xe618;</p>
</body>
</html>

让一个元素”看不见”有几种方式？有什么区别?

1、display: none;

给元素设置display:none;后，元素会从页面中彻底消失，它原本占据的空间会被其他元素占有，会造成浏览器的回流与重绘。

2、visibility: hidden;

给元素设置visibility:hidden;后，元素会从页面中消失，它原本占据的空间会被保留，会造成浏览器的重绘，适用于希望元素隐藏又不影响页面布局的场景。

3、opacity: 0;

给元素设置opacity:0;后，元素变成透明的我们肉眼就看不到了，所以原本占据的空间还在。

4、设置盒模型属性为0

将height、width、padding、border、margin等盒模型属性的值全设为0，如果元素內还有子元素或内容，还应overflow: hidden;来隐藏子元素。

1
2
3
4
5
6
7
8
9
.box1{
    width: 0;
    height: 0;
    padding: 0;
    border: 0;
    margin: 0;
    overflow:
    hidden;
}

5、设置元素绝对定位与top、right、bottom、left等将元素移出屏幕

如：

1
2
3
4
5
6
7
8
9
.box1{
    position: absolute;
    left: 100%;
}
/*或*/
.box1{
    position: absolute;
    top: 100px;
}

6、设置元素的绝对定位与z-index，将z-index设置成尽量小的负数。

但z-index是相对而言的，用z-index就要设置其他元素的z-index值，且如果元素本身占据空间很大就不一定会被z-index值比它大的元素完全覆盖，所以不推荐这种方法。 如：

1
2
3
4
5
6
7
8
.box1 {
    position: absolute;
    z-index: -100;
}
.box2{
    position: absolute;
    z-index: 1;
}

-------------本文结束感谢您的阅读-------------