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

2018-08-08  本文已影响0人  饥人谷_远方

一、背景

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

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

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

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

4、关于background相关元素的属性，

代码：

/*背景色和背景图片使用场景 */
场景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透明

四、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在使用上的一个区别

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

line-height：2VS line-height： 100%
line-height具有继承性。

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

<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；等样式

<!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;来隐藏子元素。

.box1  {  width: 0;  height: 0;  padding: 0;  border: 0;  margin: 0;  overflow: hidden;  }

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

如：

.box1  {  position: absolute;  left: 100%;  }  或:
.box1  {  position: absolute;  top: 100px;  }

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

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

.box1  {  position: absolute;  z-index: -100;  }  .box2  {  position: absolute;  z-index: 1;  }
上一篇下一篇

猜你喜欢

热点阅读