Css行高及盒子模型

2015-02-25

浏览器中默认文字大小

默认文字大小为16px;

行高

默认文字的行高为18px;
行高=文字大小+上间距+下间距
特点：
   1）文字大小会影响行高（不设置行高）
   2）文字字体也会影响行高
   3）行高只能影响文字
   作用：
       实现文字垂直居中
        1） 给一个盒子中的文字设置行高值等于该盒子的高度

行高单位问题

px, em,百分比（%），不带单位。

      ✔当给一个单独的标签设置行高（默认该标签中    的文字大小为20px）
     ☞如果行高值为px，那么文字的行高就是设置的行高值。与设置的文字大小无关。
     ☞如果行高值为em，那么文字的行高=文字大小*设置的行高值
      ☞如果设置行高为%，那么文字的行高=文字大小*设置的行高值
     ☞如果设置的行高不带单位，那么文字的行高=文字大小*设置的行高值
    ✔当给一个父元素设置行高，研究子元素中的文字行高大小。
      ☞如果父元素设置的行高值为px，默认子元素的行高=父元素的行高（行高继承）
      ☞如果父元素设置的行高为em, 默认子元素的行高=父元素的文字大小*父元素设置的行高值。（先计算后继承）
      ☞如果父元素设置的行高为%， 默认子元素的行高=父元素的文字大小*父元素设置的行高值。（先计算后继承）
      ☞如果父元素设置的行高不带单位， 默认子元素的行高=子元素的文字大小*父元素设置的行高值。（先继承后计算

盒子模型

作用： 进行网页布局
盒子的组成部分：
1 边框 border
2 内边距 padding 内容与边框之间的距离
(通过内边距可以移动盒子中的内容)
3 外边距 margin 盒子与盒子之间的距离
（通过外边距移动盒子）

盒子模型边框 border

1 border-width      设置边框的宽度    
2 border-style       设置边框的样式
    默认值： none  没有边框
            solid  实线边框
            dotted 点线边框
            dashed 虚线边框
3 border-color 设置边框的颜色
    注意：
     1）去掉边框  border:0  none;
     2) 去掉轮廓线  outline-style:   none;
优化写法： border:1px solid red;
合并边框： border-collapse：collapse;
注意： border-clooapse属性只能在表格中使用

内边距 padding

注意：
 1）设置的宽度和高度，指的是盒子中内容范围的大小。
内边距： padding-left/right/top/bottom;
内边距属性联写：
padding:5px 
内边距为：上，右，下，左各为5px
padding:10px 10px
内边距为：上下，左右各为10px

盒子大小问题

1）边框可以改变盒子大小
2）内边距可以改变盒子大小
盒子真正宽度=内容的宽度+左右边框+左右内边距
 盒子真正高度=内容的高度+上下边框+上下内边距

padding 值特殊性

会影响）

外边距 margin

注意：
    1）外边距移动的是盒子。
    2）外边距不会影响盒子大小
外边距属性联写,与padding属性联写的设置方向一样。

外边距特带你

1) 垂直外边距合并： 在垂直方向上设置外边距，以最大值为准。（水平方向不会发生合并）
2）垂直外边距塌陷： 当给子元素设置margin-top的时候，父元素也随之移动。
☞ 给父元素设置边框。
☞ 给父元素设置
overflow:hidden;  
 注意：
     给父元素设overflow:hidden 会触发父元素的bfc(格式化上下文) 
不要给行内元素设置上下内外边距。浏览器直接忽略