尺寸和边框、框模型、背景、渐变、文本格式化

尺寸和边框

尺寸属性

width 1.以px为单位的数字 2.%相对父元素
max-width 1.以px为单位的数字 2.%相对自身大小
min-width
ex：max-width:100%可以缩小，最大是原始尺寸的宽度
height
max-height 取值以px为单位的数字
min-height 取值以px为单位的数字

附加知识点

1. px 像素
2. in 英寸 1in=2.54cm
3. pt 磅 1pt=1/72in 多用于字号大小
4. cm
5. mm
6. % 相对单位
7. em 相对父元素的值乘以的倍数，1em=父元素的取值
8. rem 相对HTML中设置值乘以的倍数，1rem=HTML的取值

溢出处理

容器小，内容大，会发生溢出
默认溢出，是垂直溢出
overflow:
取值

1. visible 默认值，可见
2. hidden 溢出部分隐藏
3. scroll 添加滚动条
4. auto 溢出的时候有滚动条，不溢出没有滚动条
   overflow-x/y： 设置x、y轴的滚动条
   想要变成水平溢出,父元素宽度小，子元素宽度大，在父元素中用overflow修饰

附加知识点

合法颜色值

1. 英文单词 red,blue,black,white…
2. #rrggbb 十六进制(red,green,blue)
3. #aabbcc–>#abc
4. rgb(0-255,0-255,0-255)
5. rgba(0-255,0-255,0-255,0-1)
   a代表alpha，透明度（0-1）–>（全透明-不透明）

边框

1. border（width，style，color）
   width：粗细
   style：取值：
   solid 实线
   dotted 圆点虚线
   dashed 虚线
   double 双实线
   color：合法颜色值，transparent<=>rgba（0,0,0，0）纯透明

2. 单边单属性
   1.单边 border-top/bottom/right/left
   2.单属性 border-width/style/color
   3.单边单属性 border-top/bottom/right/left-width/style/color

3. 边框倒角

   1. border-radius 1.px 2.% 50%是圆
   2. 单角没有50%的限制
      ex：border-top-left-radius 左上角

4. 边框阴影

box-shadow：h-shadow   v-shadow   blur  spread   color；

h-shadow 水平偏移距离 （必须值）
v-shadow 垂直偏移距离 （必须值）
blur 阴影模糊距离
spread 阴影的尺寸
color 阴影颜色
inset 由外部阴影变为内部阴影
最简方式：box-shadow:h-shadow v-shadow;

box-shadow：h-shadow   v-shadow      blur   spread  color   inset；

       inset   由外部阴影变为内部阴影；

5. 轮廓
   围绕着边框的线条，不占空间属性

   outline:width style color;
   //清除轮廓 
    outline:0/none;
     border:0;
   

框模型

元素在页面上实 际占地空间的计算方式
元素实际占地宽度=左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距
元素实际占地高度=上外边距+上边框+上内边距+内容区域高度+下内边距+下边框+下外边距
外边距margin:边框以外的距离，元素与其他元素之间的距离
内边距padding：边框与内容之间的距离

margin

改变元素外边距，元素有位移效果
优先考虑左外边距和上外边距
①语法
margin:v1; 设置4个方向外边距
margin-top:
margin-right:
margin-bottom:
margin-left:
取值：1.以px为单位的数字
2.% 父元素内容区域宽度的百分比
3.取负数 外边距越大，距离其他元素越远
margin-top: + ↓，- ↑
margin-left: + →, - ←
4.auto 只对左右外边距有效，对上下外边距无效
自动设置块级元素的左右外边距
让块级元素本身水平居中显示

②简写方式
margin:v1;同时设置4个方向的外边距
margin:v1 v2; v1:上下 v2:左右
margin：0 auto; margin:auto;
margin:v1 v2 v3; 上 左右 下 margin:10px auto 20px;
margin:v1 v2 v3 v4; 上右下左

外边距的合并
两个垂直外边距相遇时，他们将合并成一个，值以大的为准
解决方案，两个外边距值相加，在一个里面写，另外一个不写
关于块级元素，行内元素，行内块的总结

外边距溢出
在特殊的情况下，为子元素设置上外边距，会作用到父元素
特殊的情况：1.父元素没有上边框
2.子元素的内容区域的上边沿，与父元素内容区域的上边沿重合（为第一个子元素设置上外边距时，不严谨）
解决方案：

1. 父元素添加上边框
   弊端：影响元素实际占地高度
2. 给父元素添加上内边距
   弊端：影响元素实际占地高度
3. overflow:hidden;
   不推荐，如果元素想溢出显示，就失效了
4. 在父元素第一个位置处，添加空的

padding

边框到内容的距离，
改变padding，感觉是改变了元素的大小，但是内容区域没有变化
padding有颜色，而margin是透明的
①语法
padding:v1; 设置4个方向内边距
padding-top
padding-right
padding-bottom
padding-left
取值 1.以px为单位的数字
2.% 父元素宽度百分比
注意：padding没有auto
②简写方式
padding:v1; 4个方向
padding:v1 v2; 上下 左右，没有auto
padding:v1 v2 v3; 上 左右 下
padding:v1 v2 v3 v4; 上右下左

box-sizing

box-sizing:
content-box 缺省默认值，你设置width是content的width
占地宽度公式：左右外边距+左右边框+左右内边距+width
border-box 你设置的width是border+padding+内容区域
占地宽度公式：左右外边距+width
使用时机：width设置为%

背景

背景颜色

background-color：合法颜色值、transparent

背景图片的平铺

background-image:url(资源路径);

背景图的平铺
background-repeat:
repeat 缺省值 平铺
no-repeat 不平铺
repeat-x
repeat-y

背景图片的定位
background-position:
x y 以px为单位的数字
x% y%
关键字 x:left/center/right y:top/center/bottom

背景图的尺寸
background-size:
取值：取一个值，同时设置x，y。取两个值，分别设置x,y

1. x y 以px为单位的数字
2. x% y%
3. cover 覆盖，背景图要把容器整个填满，哪怕背景图显示不全
4. contain 包含，容器要把背景图完整显示，哪怕背景图缩的很小
   背景图片的固定
   background-attachment:
   默认值 scroll 背景图随着窗口滚动条滚动
   fixed 背景图相对于可视区域固定，不随着窗口滚动条滚动
   被固定的背景图，只在自己的容器中显示
   被固定的背景定位，相对于可视窗口
   背景属性的简写方式
   background:color url() repeat attachment position;
   注意，简写方式没有background-size
   最简方式 background:color;
   background:url();

渐变

1.什么是渐变
多种颜色，按照某个方向，平缓变化的显示效果
2.渐变的主要因素
色标：一种颜色，及其出现的位置
一个渐变，至少2个色标
3.渐变的分类

1. 线性渐变，以直线的方式填充渐变色

2. 径向渐变，以圆的方式填充渐变色

3. 重复渐变，把径向和重复渐变，重复几次
   线性渐变
   background-image:linear-gradient(方向,色标1，色标2……);
   方向：取值 to top/right/bottom/left （终点）
   ndeg 角度
   0deg = to top
   90deg = to right
   180deg = to bottom
   270deg = to left
   色标：颜色+位置
   位置： 1.% 2.px

   径向渐变
   background-image:radial-gradient(半径 at 圆心x 圆心y,色标1，色标2……)
   半径:px为单位的数字
   圆心：

   1. px为单位的数字
   2. x% y%
   3. 关键字 x:left/center/right y:top/center/bottom
      色标中的位置，如果使用%，是半径的%
      如果使用px，半径失效

   重复渐变

  background-image:repeating-linear-gradient(方向，色标1，。。)
background-image:repeating-radial-gradient(半径 at 圆心,色标)

浏览器对渐变的兼容问题
渐变，想要兼容低版本浏览器，需要编写css hack
需要在代码前，添加浏览器的内核
chrome/safari -webkit-
firefox -moz-
IE -ms-
opera -o-

background-image:-webkit-linear-gradient(方向,色标1，色标2…);

方向:如果添加了浏览器内核前缀，方向需要些起点
之前些终点 to bottom
添加内核些起点 top

文本格式化

1. 字号大小

font-size:  px/pt/em/rem

2. 字体的系列类型
   查询本地电脑字体库，从前往后，执行第一个找到的
   如果字体有空格，加引号

font-family:chiller,jokerman;

3. 字体加粗
   font-weight:
   取值 关键字 bold normal lighter bolder
   数值 100的整倍数看，最大1000.
4. 字体样式

font-style:normal/italic

5. 小型大写字母

font-variant:small-caps;

6. 简写方式

font:style variant weight size family;
//最简：
font:size family;

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
.record-container {
    display: inline-block;
    overflow: hidden;
     width: 400px;
     height: 300px;
     border-radius: 10px;
     box-shadow: 0 6px #99907e;
     background: #999999;
}
        
.record {
     position: relative;
     margin: 19px auto;
     width: 262px;
     height: 262px;
     border-radius: 50%;
     background: linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0, linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%, repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px,#2a2928 6px);
     background-size: 50% 100%, 100% 50%, 100% 100%;
}    
.record:after {
     position: absolute;
     top: 50%;
     left: 50%;
     margin: -35px;
     border: solid 1px #d9a388;
     width: 68px;
     height: 68px;
     border-radius: 50%;
     box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;
     background: #b5ac9a;
     content: '';
    }    
	</style>
</head>
<body>
	<div class="record-container">
	 <div class="record"></div>
	</div>
</body>
</html>