CSS基础<三>

1. 行高

行高的定义
- 行高是基线与基线之间的距离
- 行高=文字高度+上下间距
- 浏览器默认文字大小:16px
- 一行文字行高和父元素高度一致的时候，垂直居中显示。
行高的单位
- 单位除了像素以为，行高都是与文字大小乘积。
  
  行高单位文字大小值
  
  20px 20px 20px
  
  2em 20px 40px
  
  200% 20px 40px
  
  2 20px 40px
- 存在父元素和子元素时:不带单位时，行高是和子元素文字大小相乘，em和%的行高是和父元素文字大小相乘。行高以像素为单位，就是定义的行高值
  
  行高单位父元素文字大小子元素文字大小行高
  
  40px 20px 30px 40px
  
  2em 20px 30px 40px
  
  200% 20px 30px 40px
  
  2 20px 30px 60px
建议使用px为单位

行高单位	文字大小	值
20px	20px	20px
2em	20px	40px
200%	20px	40px
2	20px	40px

行高单位	父元素文字大小	子元素文字大小	行高
40px	20px	30px	40px
2em	20px	30px	40px
200%	20px	30px	40px
2	20px	30px	60px

2.盒子模型

盒子模型仅仅是一个形象的比喻, HTML中可以设置宽度高度/内边距/边框/外边距的标签都是盒子模型

盒子模型.png

边框

连写格式: border: 边框的宽度边框的样式边框的颜色; (宽度,线型,颜色没有顺序要求，线型为必写项)

<style type=”text/css”>
 .box{
         width: 200px;
         height: 200px;
         background-color: red;
         border-width: 2px
         border-style: solid
         border-color: blue
         //连写
         border: 2px solid blue;//  solid实线 dotted点线 dashed虚线     
 }
</style>

对上下左右单条边框进行设置

<style type=”text/css”>
    .box{
        width: 200px;
        height: 200px;
        background-color: red;
        border-top:2px solid blue;
        border-right:4px dashed green;
        border-bottom:8px dotted purple;
        border-left:16px double pink;
       //连写:上边框,右,下,左
       border-width:2px 4px 8px 16px  
       border-style: solid dashed dotted double
       border-color: red blue green purple
    }
</style>

边框合并 border-collapse:collapse;

内边距(标签内容相对于标签四周的距离)
- 格式
```
<style type=”text/css”>
    .box{
        width: 200px;
        height: 200px;
        background-color: red;
        padding-top:10px;
        padding-right:20px;
        padding-bottom:30px;
        padding-left:40px;
       //连写:上内边距,右,下,左
        padding:10px  20px 30px 40px;
    }
</style>
```
- 设置内边距影响盒子宽度问题
  - 盒子的宽度=定义的宽度+边框宽度+左右内边距
- 子盒子设置内边距不大于父盒子宽度时将不影响盒子宽度
  - 包含（嵌套）的盒子，如果子盒子没有定义宽度，给子盒子设置左右内边距，一般不会撑大盒子。
外边距(标签内容相对于标签四周的距离)
- 格式
```
<style type=”text/css”>
    .box{
        width: 200px;
        height: 200px;
        background-color: red;
        margin-top:10px;
        margin-right:20px;
        margin-bottom:30px;
        margin-left:40px;
       //连写:上外边距,右,下,左
        margin:10px  20px 30px 40px;
    }
</style>
```
- 两个盒子垂直一个设置上外边距，一个设置下外边距，取的设置较大的外边距值。
- 嵌套的盒子外边距塌陷解决方法
  - 给父盒子设置边框
  - 给父盒子overflow:hidden; bfc 格式化上下文
  - 格式上下文相关文章: http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html
- text-align:center;和margin:0 auto;区别
  - text-align: center; 是设置盒子中存储的文字/图片水平居中
  - margin:0 auto;是让盒子自己水平居中

CSS3新增特性

box-sizing
- content-box:盒子的宽度=定义的宽度+边框宽度+左右内边距
- border-box:盒子宽度=盒子宽度(不受设置的变宽和内边距的影响)
阴影:box-shadow
边框圆角:border-radius
边框图片:border-image
形变:transform

CSS基础<三>

1. 行高

2.盒子模型

CSS3新增特性

推荐阅读更多精彩内容