关于height:100%；多行文本溢出，flex布局--大一下第三周分享会

对于height:100%

对盒子设置height:100%;百分比是相对于包含块的,如果包含块未设置height，那就没办法进行height百分比的设置。
设置height只会看自己的包含块的height，如果自己的包含块没有设置height，不会继续寻找包含块的包含块，如果一层层往上找，都是百分比的话，会一直找到html元素的height，如果HTML元素的height也设置了百分比，那他的百分比是相对于视口的，height:100%是指将视口全部占满

单行文本溢出

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

上面代码只适用于处理单行文本溢出

多行文本溢出

• 方法一：改变盒子属性实现
  方法一的主要限制是box属性存在兼容性问题，没有得到完全支持，使用时要加浏览器的私有前缀，还有就是得知道是在第几行文字显示省略号，就是-webkit-line-clamp: 3;个人认为其实这个限制性比较大

    display: -webkit-box;
    /* 上面的这条属性值一定要存在，最关键的一步 */
    overflow: hidden;
    -webkit-box-orient: vertical;
    /* 这一条是让溢出的用省略号表示的 */
    -webkit-line-clamp: 3;
    /* 上面的属性值是规定文字是多少行 */

这种方法里面涉及了c3的新属性，有时间研究一下得这个属性

• 方法二：使用::after实现
  方法二的缺陷是有可能在文字未超出行的情况下也会出现省略号，可以结合js进行优化，可以将height设置为line-height的倍数，避免超出的文字露出，其实是作用范围比较广的一种方法

::after{
    
    
    content: "...";
    /* 要记得给after的父元素加上position:relative; */
    position: absolute;
    padding-left: 20px;
    right: 0;
    bottom: 0;
    background:linear-gradient(to right,transparent,#fff 50%) ;
    /* 这是给元素添加渐变，避免文字只显示一半 */
}

一些小知识的补充

• 在width未指定具体数值时，设置padding不会改变盒子的大小,就是在width:auto;的情况下，设置padding会影响内容盒的大小（对于块盒而言）
• 背景图片的设置，如果只指定了一个方位名词，另一个省略，则第二个值默认居中对齐
• font-weight设置数字值的范围是100-900
• 标题标签的font-size需要单独指定，因为浏览器默认样式表有对标题标签font-size的设置，然后在设置body的字体大小的时候不会进行继承
• 浏览器会默认的将inline元素之间的空白字符（空格、换行）渲染成一个空格，如何解决呢？
  1.将父元素的font-size设置为0
  2.float:left;
  3.写标签的时候就不要换行

flex

在不设置长度的前提下，所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容

设为flex布局之后，子元素的float,clear,vertical-align属性会失效

布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

属性

容器的属性

• flex-direction
  决定项目的排列方向，会存在四个值
  row(默认值)主轴为水平方向，按顺序把第一个盒子从左往右排
  

row-reverse:主轴为水平方向 ,按顺序把第一个盒子从右往左排

column :主轴为纵向，把第一个盒子从上往下按顺序排列

column-reverse：主轴为纵向，把第一个盒子从下往上按顺序排列

扫描二维码关注公众号，回复： 12900528 查看本文章

方向为纵向时，子元素不设置宽度时，宽度默认为父元素的宽度

• flex-wrap
  决定当子元素的盒子排不下的换行问题，可能取三个值

nowrap(默认)：不换行，若子元素的宽度太大，会自行压缩减小子元素的宽度
wrap：换行,另一行从下一行开始

wrap-reverse：换行，另一行从上一行开始

• flex-flow
  是flex-direction和flex-wrap的简写属性

• justify-content
  定义了子元素在主轴上面的对齐方式
  flex-start(默认值):左对齐
  flex-end:右对齐
  flex-center:居中(子元素之间的间隔不会改变)
  

space-between:两端对齐，中间盒子的距离相等

space-around:每个子元素两侧的间隔相等，类似于设置左右margin的效果，因为是两边距离，所以

• align-items
  定义子元素在交叉轴(纵轴)上的对齐方式

flex-start:从交叉轴的起点对齐

flex-end:从交叉轴的终点对齐

center:从交叉轴的中点对齐

stretch(默认值):若未设置高度或高度auto会将整个容器占满
baseline:从项目的第一行文字的基线对齐

• align-content
  定义了多根轴线(就是指子元素所占行数)的对齐方式只能用于子项出现换行的情况

flex-start,flex-end,center,space-between,space-around,这些属性和justify-content里面的属性一样，就是方向变为纵向，当然，纵向轴线的排列方式不会影响横向盒子的间隔
strech(默认值)：轴线占满整个交叉轴(纵轴)

子元素的属性

• order
  定义子元素的排列顺序，数值越小，排列越靠前，初始值为0

• flex-grow
  定义子元素的放大比例，默认为0(表示即便存在剩余空间也不会放大)，属性值为1表示相对于其他子元素进行扩展的量，大于1时是相对于属性值为1的等比放大
  

1,4,5属性值均默认为0

• flex-shrink
  定义了子元素的缩小比例，当空间不足(即宽度占满不能换行)时会将该属性大的元素进行缩小
  

1,4,5属性值均默认为1

• flex-basis
  定义了在分配空间的时候，子元素的宽度，就相当于设置宽度
  两个属性值auto(表示宽度由内容决定)和XXpx

• flex
  简写属性，包括了：flex-grow,flex-shrink和flex-basis

• align-self
  允许单个子元素与其他子元素有不一样的对齐方式，可以覆盖align-items属性，默认值为auto(表示继承父元素的align-items的属性值，没有父元素等于stretch，即高度占满父元素)，其他的属性值和align-items的一样
  

给container设置了align-items:center;1号设置了align-self:flex-start;5号设置了align-self:flex-end;

参考资料：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html.

用flex实现圣杯布局

即用flex实现圣杯布局,这是html部分

<div class="container">
        <header>头</header>
        <div class="body">
            <div class="main">主</div>
            <div class="left">左</div>
            <div class="right">右</div>
        </div>
        <footer>尾</footer>
    </div>

	*{
    
    
            padding: 0;
            margin: 0;
            text-align: center;
            font-size: 30px;
        }
        .container{
    
    
            display: flex;
            flex-direction: column;
            min-height: 100vh;//vh相当于当前屏幕可见度的百分之几
           // 和100%的区别就是就是在没内容的时候，100%不会把盒子撑开，而100vh会把盒子撑开
            background-color: aquamarine;
        }
        .body{
    
    
            flex: 1;
            display: flex;
        }
        .left,.right{
    
    
            flex: 0 0 300px;
            background-color: burlywood;
        }
        .left{
    
    
            order: -1;
        }
        .main{
    
    
            flex: 1;
        }
        header,footer{
    
    
            flex: 0 0 100px;
            background-color: brown;
        }

原理：首先给整个盒子设置flex，把子盒子的排列顺序改成column，然后把中间盒子flex-grow设置为1，让中间可以自适应，再让中间部分的容器display为flex，然后给left设置order，把left提在最前面，然后就可以实现圣杯布局
阮一峰老师讲解的很详尽，如果大家学习flex布局，强烈建议大家看一下阮老师的笔记
参考资料：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html.