css 元素，内外边距，边框

字体简写：
   font-size: 28px;
font-family: "楷体"; 
      font-weight: bold;
font-style: italic;
line-height: ;
/* 字体简写：font-weight font-style font-size/line-height font-family*/
font:bold italic 30px/100px "楷体";

元素分类：
html种元素分成3大类
1.块级元素 h1-h6 p div ul li...
a.元素会独自占据一行
b.可以设置元素的宽高
c.上下左右外边距都有效
2.行内元素(内联元素) strong span a em ...
a.元素不会独自占一行 内容有多少 就占多大地方
b.宽高无效
c.上下外边距无效 左右外边距有效
3.行内块元素 input img video...
a.元素不会占据一行
b.宽高有效
c.上下左右的外边距都有效

元素之间的转换：
将元素转换成行内元素
display:inline;
将元素转换成行内块元素
display: inline-block;
  将元素转换成块级元素
     display: block;

基线的对齐方式：
top:顶线对齐
bottom:底线对齐
middle:中线对齐

盒子模型：
网页当中所有的元素都是盒子，一个网页是由不同大小的盒子组成的
盒子模型：一个盒子是由不同的东西组成的一个模型
w3c标准的盒子：content(内容 width+height) + border(边框) + padding(内边距) + margin(外边距)
IE盒模型(怪异盒模型):content + margin
/* 怪异盒模型 包含 width */
/* 转换成怪异盒模型 */
/* border-box：将标准盒模型转换成怪异盒模型 */
box-sizing: border-box;
/* 将怪异盒模型转换成标准盒模型 这个属性不支持ie*/
/* box-sizing: content-box; */

边框：
border:边框 top left right bottom
边框是由 风格 粗细 颜色这三样组成的
/* 标签盒模型下 边框会影响我的元素可见宽高 */
上边框的风格:
solid:实线
dashed:虚线
dotted:小圆点
   none 表示去除边框
  
/* border-top-style:solid; */
/* 上边框的粗细 */
/* border-top-width:10px; */
/* 设置上边框的颜色 颜色默认是黑色*/
/* border-top-color: red; */

/* 设置左边框 */
/* border-left-style: dashed;
border-left-width: 20px;
border-left-color: greenyellow; */
/* 设置右边框 */
/* border-right-style: dashed;
border-right-width: 20px;
border-right-color: greenyellow; */

/* 设置下边框 */
/* border-bottom-style: dashed;
border-bottom-width: 20px;
border-bottom-color: greenyellow; */


/* 一个方向边框的简写 */
/* border-top:10px solid red;
border-left: 10px dashed greenyellow;
border-right: 10px dotted greenyellow;
border-bottom: 10px dotted greenyellow; */
/* 4个方向边框的简写形式 */
/* border:10px solid red; */
/* transparent:透明颜色 */

外边距：
margin 外边距: 相邻元素之间的距离
/* 设置当前元素的上外边距 */
/* margin-top: 30px; */
/* 设置当前元素的下外边距 */
/* margin-bottom:30px; */
/* 设置当前元素的左外边距 */
/* margin-left: 30px; */
/* 设置当前元素的右外边距 */
/* margin-right: 40px; */
/* 同时设置4个方向的外边距 */
/* margin:50px; */
/* 第一个值表示上下 第二个值表示左右 */
/* margin: 50px 20px; */
/* 第一个值表示上 第二个值表示左右 第三个值表示下 */
/* margin: 50px 40px 30px; */
/* 上 右 下 左 顺时针的顺序 */
/* margin: 50px 40px 30px 20px; */
      /* 居中于父元素的中间 */
     margin: auto;
      /* 行内元素的上下外边距是无效的 左右外边距有效 */
    margin: 50px;

内边距：
内边距:边界与元素内容之间的距离 padding
内边距会在自己元素的本身增加宽高
/* 左内边距 */
/* padding-left:20px; */
/* 上内边距 */
/* padding-top: 20px; */
/* 右内边距 */
/* padding-right: 20px; */
/* 下内边距 */
/* padding-bottom: 20px; */
/* padding内边距的简写形式 和margin是一模一样 */
padding: 20px 30px;
/* 行内元素都是有效 */