CSS_day03

一.框模型
1.内边距
1.什么是内边距
元素边框与内容之间的间距。
内边距会扩大元素边框占地区域。
2.语法
属性：
padding:value 四个方向的内边距
padding-top/bottom/left/right:value 单边定义
取值：
1.以px为单位的数字
2.以%为单位的数字
3.简写方式
padding:value 四个方向
padding:v1 v2 上下 左右
padding:v1 v2 v3 上 左右 下
padding:v1 v2 v3 v4 上 右 下 左（顺时针）
2.属性：box-sizing
作用：指定框模型的计算方式
取值：
1.content-box
默认值，采用默认的方式计算元素的占地尺寸
实际宽度=左右外边距+左右内边距+左右边框+width
实际高度=上下外边距+上下内边距+上下边框+height
2.border-box
元素的尺寸，会包含border以及padding的值
实际宽度=width+margin
实际高度=height+margin
二.背景
以单一颜色或图片来填充元素作为背景。
1.背景颜色
属性：background-color
取值：合法的颜色值
注意：背景颜色和背景图片都从边框位置处开始填充。
2.背景图像
属性：background-image
取值：url(图像路径);
ex:
background-image:url(a.jpg);
3.背景图像平铺
属性：background-repeat
取值：
1.repeat 平铺，默认值
2.no-repeat 不平铺，只显示一次图片
3.repeat-x 只在水平方向平铺
4.repeat-y 只在垂直方向平铺
4.背景图像尺寸
属性：background-size
取值：
1.width height
2.width% hegiht%
3.cover 覆盖，将背景图等比放大，直到背景图完全覆盖元素所有区域为止。
4.contain 将背景图等比放大，直到背景图碰到元素的某一个边缘为止。
5.背景图像固定
将背景图固定在网页的某个位置，一直在可视化区域中，不会随着滚动条而发生位置的变化。
属性：background-attachment
取值：
1.scroll 默认值，滚动
2.fixed 固定
6.背景图像定位
作用：改变背景图在元素中的位置
属性：background-position
取值：
1.x y
x:背景图在水平方向的偏移距离
取值为正，向右移动
取值为负，向左移动
y:背景图在垂直方向的偏移距离
取值为正，向下移动
取值为负，向上移动
2.x% y%
0% 0% 左上角
50% 50% 正中间位置
100% 100% 右下角
3.关键词
x:left/center/right
y:top/center/bottom
7.背景属性简写方式
属性：background
取值：color url() repeat attachment position;
三.渐变
1.什么是渐变
渐变指的是多种颜色平缓变化的一种显示效果。
2.渐变的主要因素
色标：一种颜色及其出现的位置
一个渐变是由多个色变组成（至少两个）
3.渐变的分类
1.线性渐变
以直线的方向来填充渐变色。
属性：background-image
取值：linear-gradient(angle,color-point1,color-point2,…)
(1)angle
表示渐变填充的方向或角度
取值：
1.关键词
to top:从下向上填充渐变
to bottom:从上向下填充渐变
to left:从右向左填充渐变
to right:从左向右填充渐变
2.角度值
0deg 等同于to top
90deg 等同于to right
180deg 等同于bo bottom
270deg 等同于to left
(2)color-point
色标：颜色 及其 位置
取值：颜色 与 位置 的组合，中间用空格隔开。
ex:
red 0%:在填充方向开始的位置处颜色为红色
green 50%:到填充方向一半位置处，颜色为绿色
blue 200px:

	2.径向渐变
	  以圆形的方式来填充渐变色。
		属性：background-image
	  取值：radial-gradient([size at position],color-point1,color-point2,..);

		size at position:
		   size:半径，以px为单位的数字
			 position:圆心的位置
			          取值：x y 具体数字
								      x% y% 元素宽和高的占比
											关键词：left/center/right
											        top/center/bottom

	3.重复渐变
	  将线性渐变 或 径向渐变重复几次出现。
  1.重复线性渐变
		  background-image:repeating-linear-gradient(angle,color-point1,color-point2,...);
  2.重复径向渐变
		  background-image:repeating-radial-gradient([size at position],color-point1,color-point2,...);

    注意：在重复渐变中色标位置用绝对值，不要用%。

4.浏览器兼容性
各浏览器的新版本都支持渐变属性，但低版本不支持。对于不支持的浏览器，可以通过设置浏览器前缀的方式，让浏览器支持渐变。
firefox:-moz-
IE:-ms-
Oprea:-o-
chrome&safari:-webkit-
ex:
background:-ms-linear-gradient(0deg,red,blue);
background:-moz-linear-gradient(0deg,red,blue);

https://www.caniuse.com 查看css属性支持的浏览器版本号

四.文本格式化属性
1.字体属性
1.指定字体类型
属性：font-family
取值：用逗号隔开字体名称列表
ex:
font-family:“微软雅黑”,“黑体”,Arial;
2.指定字体大小
属性：font-size
取值：以px或pt为单位的数字
3.字体加粗
属性：font-weight
取值：
1.bold:加粗（b,h1-h6）
2.normal:正常
3.value 无单位的整百倍数字
400等同于normal
900等同于bold
4.字体样式
属性：font-style
取值：
1.normal:正常字体
2.italic:斜体(i)
5.小型大写字母
将小写字母变为大写，但大小与小写字母一致。
属性：font-variant
取值：
1.normal:正常
2.small-caps:小型大写字母
6.字体属性的简写方式
属性：font
取值：style variant weight size family;
注意：使用简写形式时，必须要设置family的值，否则无效。
ex:
font:italic 12px; //无效
font:12px “微软雅黑”;//正确
练习：
页面中新建一个p元素，内容随意，最好中英文结合，然后按以下要求设置样式：
1.字体为"Arial"类型。
2.字体大小为24px。
3.文本加粗并倾斜显示。
4.将所有的字母显示为小型大写字母。
2.文本格式
1.文本颜色
属性：color
取值：合法的颜色值
2.文本排列
作用：指定文本，行内，行内块元素的水平对齐方式。
属性：text-align
取值：left/center/right/justify(两端对齐)
3.文字修饰（线条）
属性：text-decoration
取值：
1.none：无任何线条修饰
2.underline:下划线
3.overline:上划线
4.line-through:删除线(s标记)
4.行高
作用：设置一行数据所占的高度
属性：line-height
取值：以px单位的数字；
无单位的数字（行高是当前字体大小的倍数）。
注意：如果行高设置的比文字的高度大的话，那么该行文本将在指定行高内呈现垂直居中的效果。
5.首行文本缩进
属性：text-indent
取值：以px为单位的数字
6.文本阴影
属性：text-shadow
取值：h-shadow v-shadow blur color;
五.表格
1.表格常用属性
1.边距：padding
2.边框：border
3.尺寸：width/height
4.文本格式化：font-,text-,line-height
5.背景属性：颜色，图像，渐变
6.vertical-align:指定单元格数据的垂直对齐方式
取值：top/middle/bottom 上/中/下

课后作业：
1.创建一个400400px的表格，4行4列：
1.设置每个单元格的尺寸为100100;
2.设置表格和单元格的边框为1px solid #000;
3.尝试着为每个td增加上外边距10px。

	2.完成"课后作业.png"效果图中的布局（注意细节修饰）
	
	3.可以开始做个人项目（参考http://www.cssmoban.com）