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为单位

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