弹性盒子布局和多列

一、弹性盒子布局

 

<figure>

      <img src="img/01.png">

      <aside>美食</aside>

    </figure>

    figure{

      display: flex;

      flex-direction: column;

      align-items: center;

    }

二、悬挂式布局

<div class="food">

      <img src="../day17/images/mao.png">

      <figcaption>

      <div class="fig">

       <p>老诚一锅</p>

       <p>[5店通用]100元代金券一张，可叠加</p>

      </div>

       <div class="wrap">

         <p class="p"><span>118</span> <span>元</span> 门市价：100元</p>

        <span>已售192710</span>

      </div>

    </figcaption>

    </div>

.food{

      width: 100%;

      height: 100px;

      padding: 10px;

      display: flex;

      border-top:1px solid rebeccapurple;

    }

    figcaption{

      width: 100%;

      height: 100%;

      display: flex;

      flex-direction: column;

      justify-content: space-between;

    }

    .fig p:nth-child(1){

      font-size: large;

    }

    .fig p:nth-child(2){

      font-size: small;

      color: rgb(73, 73, 73);

    }

    .wrap{

      display: flex;

      justify-content: space-between;

    }

三、多列

1、column-count：分栏的个数

2、column-width：分栏的宽度

3、column-gap：分栏的间距

4、column-rule：分栏的边框

5、column-span：all/none  设置或检索对象元素是否横跨所有列。

6、column-fill设置或检索对象所有列的高度是否统一（目前大部分浏览器尚未支持） auto：列高度自适应内容/    balance：所有列的高度以其中最高的一列统一(默认值)

7、break-inside:avoid避免中断【见瀑布流图片】

四、媒体查询

@media【and后面一定要有空格】 screen  and  (min-width:320px)  and (max-width:750px){

  body { background-color:blue;}

 }

screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型【默认是all】

and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)

(min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。

引入样式格式 <link rel=“stylesheet” type=“text/css” media=“screen and  (orientation:portrait)”    href=style.css>