边框、文本字体属性、内边距、单行文本水平垂直居中小结介绍。

1、 边框

 边框是包着内容和内间距的一条线
    四条边框
    上边框  border-top: 
    下边框  border-bottom
    左边框   border-left:
    右边框 border-right
​
​
      /* 左边框 */
      /* solid 实线 */
      /* 这三个属性都要写 */
      /* border-left: 边框的宽度 边框的线型 边框的颜色; */
      border-left: 20px solid blue;
​
      /* 上边框 */
      border-top: 5px solid tomato;
      /* 右边框 */
      border-right: 10px solid purple;
      /* 下边框 */
      border-bottom: 30px solid green;
​
​
  复合写法语法：
      border: 边框的宽度 边框的线型 边框的颜色;
      各个值直接用空格隔开
​
​
 /* 设置四条边框 */
      /* 复合写法 */
      /*
       边框的宽度：10px 
       边框的线型：实线
       边框的颜色：红色
      
      */
      /* 各个值直接用空格隔开 */
      border: 10px solid tomato;

2、文本字体属性

1、字体 
浏览器从第一个字体开始识别，如果第一个字体可以使用就使用第一个字体，否则往后看
多个字体直接用逗号隔开
用多个字体形成回退系统，就是备胎
一般建议字体用引号包着
​
font-family: '黑体', '宋体';
​
​
2、字体大小 
一般浏览器字体大小为16px
浏览器能识别最小字体12px
单位：px
​
2、1、字体加粗
font-weight: bolder;
​
font-size: 16px;
​
3、行高 
测量方法1：测量从一行文字的顶端到下一行文字的顶端 的距离
测量方法2：测量行与行之间的间距（50px），然后除以2(25px),在文字下面（25px处）拉根参考线，在文字的上端（25px处）拉根参考线，测量两根参考线之间的距离
每行文字的高度110px,行高值越大，这个文本就越稀疏 
line-height: 110px;
​
4、文字水平居中
​
1.水平居左 text-align: left;
2.水平居中 text-align: center;
3.水平居右 text-align: right;
4.文本两端对齐 text-align: justify ;
​
5、文本装饰线 
没有任何文本装饰线，一般用于去掉a标签自带的下划线 
text-decoration: none;
下划线 
text-decoration: underline;
上划线  不怎么使用
text-decoration: overline;
中划线 删除线  through穿过   line 线 
text-decoration: line-through;
​
​
6、首行缩进 
可以为负值
​
正值：向里缩进
负值：向外缩进
px
​
​
text-indent: 20px;
text-indent: -20px;

3、内边距

内间距:内填充
是内容和边框直接的距离
大白话：手机盒子里面的塑料泡沫
语法：padding:;
单位：
px
百分比
注意：不能设置负值，设置负值无效
​
应用：内容与父盒子有间距，就可以用padding
​
内间距会增大盒子大小
比如:盒子宽150px,加了一个30px的左内间距，那么此时这个盒子的宽度为：
150px+30px=180px
​
​
四个内间距:  单独写法：
左内间距 padding-left
右内间距 padding-right
上内间距 padding-top
下内间距 padding-bottom
​
​
复合写法： 
各个值直接用空格隔开
padding:上内间距  右内间距  下内间距    左内间距;
如果只要某个内间距
直接用单独写法或者用复合写法，把不要的内间距值写0px/0
​
​
/* 单独写法 */
/* 左内间距 */
/* 负值无效 */
padding-left: -30px;
padding-left: 30px;
​
/* 上内间距 */
padding-top: 50px;
/* 右内间距 */
padding-right: 50px;
/* 下内间距 */
padding-bottom: 50px;
​
​
复合写法：
/* 一个值：上下左右的内间距都是20px */
padding: 20px;
/* 二个值：上下内间距20px   左右的内间距40px   两个值去匹配---》四个外间距的值 */
padding: 20px 40px;
/* 三个值：上内间距20px      左右的内间距40px   下内间距60px   */
padding: 20px 40px 60px;
/* 四个值：上内间距20px  右的内间距40px   下内间距60px 左内间距80px    顺时针方向*/
padding: 20px 40px 60px 80px;

4、单行文本水平垂直居中

height: 100px;
/* 水平居中 */
text-align: center;
/* 垂直居中 行高=高度*/
line-height: 100px;