Css背景

# 背景

1.背景颜色

background-color：色值

2.背景图片

图片的两种表现<img src="">标签 将一个外部的图片文件通过标签的src属性，引入到页面上

没有设置宽度和高度时会默认本身图片的大小 因为img标签是内联元素 因此从层级上在块元素上方

缩小图片只需要改变图片的宽度即可，他会等比例放大缩小

背景图:一定是插入到块级元素中的,并且该元素要有宽度高度

background-img:url(图片路径)

按照实际图片大小展示，如果元素宽高大于图片宽高，会出现富裕空间(默认富裕空间会被改图平铺重复实现)

如果元素的宽高小于图片本身的宽高，会截掉多出来的图片部分，导致图片显示不全

一般情况下图片会大于本身显示的区域 (一定要加宽度和高度)一般由UI设计的的设计图为准

单独插入背景图一般不会不搭配其他属性使用

图片尺寸(相关)

图片平铺方式(相关)

3.背景图平铺    

background-repeat: no-repeat; 背景图平铺(重复)

background-repeat: repeat-x;  x轴不重复

background-repeat: repeat-y;  y轴不重复

用法:当图片平铺效果不凸显图片分界，点可以使用平铺效果当作背景减少图片大小对服务器和用户体验的不足

当图片特别明显看出分界点就不适合使用平铺效果

4.背景图的定位

将引入的图片定位到当前元素的某个位置上

取值:关键词取值 background-position: center right;

(1)x轴关键词 y轴关键词:top bottom left right

优点：只针对当前元素的特定几个位置(常用位置)

x轴y轴都在中心位置上 center(写一个就成)

单独指定x轴y轴

background-position-x 单独指定x轴的定位位置

background-position-y  单独指定y轴的定位位置  

(2)长度单位

px、pt、em、rem、%...

正负值问题

正值x轴向右移动,y轴向下移动

负值x轴向左移动,y轴向上移动

用法:把一张图片定位在当前元素的某个位置(元素的大小,大于图片的展示的区域)

(3)精灵图 用意在于减少服务器接收和发送的请求次数 提高页面加载速度 把很多的小图标整合到一张图里

一定限制元素的宽高只显示一张小图标的区域

行(y轴) 列(x轴)，移动要写负值

(4)背景图尺寸 background-size:值  px pt em rem... % 百分之指的是图片本身的大小

常用值:100% auto;x轴按照图片宽度完全展示，高度按照图片本身高度成比例缩小

比例一致情况下, background-size:100%(宽度)100%(高度);代表宽度高度都缩放为元素的宽度高度 宽度还代表x轴长度,高代表y轴的长度 (高度截掉一部分)

比例不一致的情况下：图片宽高大于元素宽度高度比例

常用值:auto 100% y轴保证图片高度完全展示，宽度按照图片本身宽度成比例放大缩小

元素与图片比例一直是可以写100% (宽度会被截掉一部分)

比例不一致时:宽度都会有 (宽度都会有空余空间)

(5)关键词：

cover:铺满整个元素的宽高多出部分会被截掉(不可能出现空余位置，土拍你子啊不通过比例下一定会被截掉部分)

contain:在元素展现一张不变形的完整图片就一定出现空余空间可以依靠平铺占据多余空间

(6)背景属性简写方式

background:image repeat color position 包含这些内容即可不需要优先顺序

最简可写

background:color;

background:image;

(当心被覆盖)

background-size:原则上单独写....

# 盒子模型

1.溢出

一个块级元素默认宽度(父级元素的100%宽度),高度默认(auto)

元素内容超出自己本身宽度或高度

元素内的溢出,除了文本还有子元素超出父元素宽、高也会造成溢出

取值:

overflow: visible; 默认溢出形态展现

overflow: hidden;  溢出隐藏

overflow: scroll;  溢出元素双方向出现拖拽条

overflow: auto;   只有溢出方向才有拖拽条

overflow-x: auto; overflow-y: auto; 单方向设置溢出属性

overflow的单个属性:hidden,scroll,auto 就会触发元素的BFC特性

BFC (block formatting context)独立的渲染区域 不会对外部其他元素造成影响,子元素只要不脱离文档流,就不会影响父元素

2.显示：元素属性

块级元素 特点 (自占一行)父元素宽度 可以自己设置宽高 从上向下排列 例如：div p h1~h6 ul ol li ...

内联元素 特点 依靠内容撑开不自占一行无法设置宽度高度 从左向右排列 遇到宽度不足时换行 例span a img input button

行内块显示 特点 有自己的宽度高度默认值可以设置宽度高度 从左往右排列 遇到宽度不足还行

行内快显示的元素有默认的幽灵空白节点(重中之重)

行内块级元素就会有一个幽灵节点

去除方式：

(1)既然是节点,就可以通过文本大小方式控制 font-size:0写给父级依靠继承(前提是行内块的同级或者内部没有文字)

(2)将行内块级显示的元素变成块级 用display:block;如：img、input...

显示的属性

display:block;元素以块级元素形态显示

display:inline;元素以捏脸内联元素形态显示

display:line-block:元素以行内块显示

display:none;不显示

以下几种特殊

display:table;以table形式显示

display:flex;布局方式(后面重点学)

....

元素的隐藏 display:

display: none;/* 完全消失 */

display: block;/* 显示回来 */

visibility        

visibility: hidden;隐藏

visibility:visible ;/* 显示回来(默认不隐藏) */

opacity  整个元素都透明包括元素内部的其他元素和文字

opacity: 0; 元素完全透明 0

opacity: 1;

opacity与rgba()区别： rgba()属于色值赋予背景色后只能改变元素的背景颜色后无法改变

3.content

宽度和高度  

宽度 width 值 元素宽度，px、pt、rem、%...

max-width:值 最大宽度

min-width:值 最小宽度

高度  值 元素宽度，px、pt、rem、%..(高度使用百分比要保证父元素是否有实际设置高度)

max-height:值;最大高度

min-height:值;最小高度

内容(文字) 文字整体宽度不足以被父级宽度装下时,会自动换行