CSS快速入门基础知识（四）

盒模型

content (width + height ) 、padding(内边距) 、 border（边框） 、 margin(外边距)
盒子模型的计算规则：
         元素的总宽度 (高度)： content + padding + border

padding: 内边距 （补白） 元素内容与边界的距离

padding 的间距不能写入内容（文本和图片），背景图除外。
       语法：
一个值： 40px; 四个边都有值。
两个值 20px 30px ; 上下 左右
三个值 20px 30px 40px ; 上 左右 下
四个值 20px 30px 40px 50px ; 上 右 下 左
padding-left: 20px ; 单向边添加padding
         right    top    bottom
注意： 盒模型计算的规则 ： padding 值会撑大元素原来的尺寸，如果要保持原来的尺寸，需要在原来的尺寸上减去padding 的值

margin: 外边距， 控制元素和元素之间的距离

语法 : 与padding相同
       margin: 0 auto; 上下 自动计算    容器水平居中。
margin 的 CSS bug :
1.具有层级结构 ，容器中的**第一个子元素（块级元素）**添加 marging-top 值时,CSS 会错误的解析给父元素。
解决方式：1 . 给父元素添加 padding-top （常用方式）.2. 触发 BFC 例如: 给父元素或者子元素添加 浮动 。
2. 相邻的块级元素添加 margin-top 和margin-bottom 时， 会出现重叠现象。解决方式： 1. 写给相邻元素中的一个， margin-top 或者 margin-bottom （常用方式） 2. 触发 BFC （原理性）
3. margin支持负数。

文本溢出属性：

overflow： 容器是否溢出
auto; 如果内容被修剪 ，则浏览器会显示滚动条， 以便查看其他的内容。
scroll ; 内容会被修剪 ，但是浏览器会显示滚动条，以便查看其余的内容
visible; 默认值 ，内容不会被修剪 ，会出现在元素框外
hidden; 内容会被修剪 ，并且其余的内容时不可见
inherit; 规定应该从父元素继承 overflow 属性的值

        overflow-x : 水平		
        overflow-x:auto;     水平方向文本溢出会出现滚动条
        overflow-f  ： 垂直

        white-space:    如何处理元素内的空白
                     nowrap ;  文本不换行 ，
                            
        text-overflow :    文本溢出时是否显示省略号
                        clip;  不显示省略号（...）  而是简单的裁剪
                        ellipsis; 当对象内文本溢出时，显示省略标记。

         实现当行文本溢出：
                          width   容器必须有尺寸大小
                          overflow：hidden 
                          white-space:nowrap
                          text-overflow:ellipsis

    	实现多行文本溢出时产生省略号：
                           display: -webkit-box;      将对象作为弹性伸缩盒子模型显示
                           -webkit-box-orient: vertical;      设置或检索伸缩盒对象的子元素的排列方式
                                                                            容器里面的内容从上往下显示
                           -webkit-line-clamp: 3;     用来限制在一个块元素显示的文本的行数。
                                                                 为了实现该效果，它需要组合其他的WebKit属性。
                           overflow: hidden;    多出的文本隐藏
**适用范围：** 
           因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；但文字未超出行的情况下也会出现省略号,可结合js优化该方法