CSS基础知识--盒子以及背景

什么是盒子

所有HTML元素可以看作盒子，在CSS中，==“box model”==这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

盒子的属性

边框属性

作用：给元素加上一个边框
第一种：

border-top
border-bottom
border-left
boder-right

三个属性 粗细 线型 颜色

第二种：
border ：粗细 线型 颜色

border:300px solid pink ;

透明色：transparent

边框弧度：border-radius:50%;

轮廓

作用： 绘制于元素周围的一条线，位于边框外
属性： 粗细 线型 颜色
用法：

outline-width: 20px;
outline-style: solid;
outline-color: red;

outline: 1px solid red;

元素的分类

块级元素：独占一行，对宽高设置有效，如果我们不给宽度

的话，撑满整行，如果不给高度，高度会随着内容的变化而变化
行内元素：设置宽高是无效的，不独占一行多个标签是可以

同时存在一行的。完全是靠内容撑开的。

行内块元素：不是独占一行，设置宽高有效，并且可以多个

标签存在一行。

可以使用 display 来改变元素的分类
实例：

/*转换为块级元素*/
display: block;
/*转换为行内元素*/
display: inline;
/*转换为行内块元素*/
display: inline-block;

盒子模型

组成： 内容 内边距 边框 外边距
边框：border
内边距：padding 边框和内容之间的距离
padding 存在一个值 上下左右都是改值
存在两个值 上下一个值 左右一个值
存在三个值 上 左右 下
存在四个值 上右下左
可以单独的去设置 例如 padding-top
外边距：margin 元素和元素之间的距离

示例：

/*单独设置某个边框*/
border-top:200px solid yellow ;
border-bottom:200px solid green ;
border-left:200px solid red ;
border-right:200px solid transparent ;
/*直接设置每个外边距*/
margin: 20px 20px 20px 20px;
/*设置每个的内边距*/
padding: 20px;
/*设置左内边距*/
padding-left: 20px;

背景

背景属性

分类 ： 纯色背景（背景颜色） 背景图像

1.背景颜色

background-color ： red;  任意合法的颜色  transparent

2.背景图像

background-image  ： url（）

3.背景图像平铺

background-repeat：
1.repeat  ： 默认值水平垂直方向都平铺
2.repeat-x：水平方向平铺
3.repeat-y：垂直方向平铺
4.no-repeat：  不平铺

这里展示不平铺

4.背景图片的尺寸

background-size： value1  value2  宽度 和 高度   单位 是PX
						       value%  value%  宽度 和 高度	 单位 是%
						       cover : 全覆盖   将背景图等比放大直到背景图完全覆盖到元素的所有区域
							   contain：包含  将背景图等比放大  ，直到下边或者右边有一个边缘碰到元素为止

5.背景图片固定

background-attachment: fixed;   
										scroll：滚动  fixed 固定

6.背景定位

		改变背景图像在元素中的默认位置
		属性 ：  background-position
							x  y   水平偏移距离 和垂直偏移距离
							单位  ：  px  %  top  left right bottom

7.CSS中的 雪碧图、精灵图

作用：将一些小的背景图，合并到大的背景中去，以便实现减少服务器的请求次数。

步骤：
1.我们根据图像的大小创建一个元素

2.将雪碧图作为元素的背景，再通过背景图片定位，实现位置偏移将用户要看到的图像显示在元素中

渐变

1.什么是渐变？
两种或者多种颜色间平滑度过的效果
分类：
1.线型渐变
2.径向渐变
3.重复渐变 加上 repeating
2.渐变的组成
色标：决定了渐变的每种颜色及出现的位置
每个渐变效果都是由多个色标组成（2个以上）

语法：

background-image：linear-gradient（方向或者角度，色标。。。。。）
linear-gradient()  线型渐变

		angle 方向或者角度
				 to top  从下往上填充  
				 to left  从右往左
				 to right  从左往右
				 to bottom  从上到下
				 				
				 0   == 0deg（度）  ==to top
				 90deg  = toright
				180deg  = to bottom
				270deg = to left
				color  颜色

		/*径向渐变
		size at position  径向渐变的位置以及圆心的位置
	     size ： 圆的半径 单位为px
		position ：  x，y 圆心的位置
		px   %    top/left/center/bottom
	    色标   
		background-image: radial-gradient(200px at 50% 50%,red 20%,blue 40%,yellow 80%);

重复渐变：
background-image：repeating-radial-gradiedt();

总结

熟练地使用盒子以及背景，能让网页个更加的美观，同时，也更方便我们的网页编程。