码迷,mamicode.com
首页 > Web开发 > 详细

html问题记录20180604

时间:2018-06-18 18:26:16      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:container   pre   around   idt   log   水平居中   -o   rev   strong   

1.边框渐变

如:

.arrow div {transition: border-color 0.5s  ease-in-out; }

.arrow div:hover {border-color: #009688; }

 

2.display的flex属性使用详解

flex的兼容性在pc端还算阔以,但是在移动端,那就呵呵了。今天我们只是学习学习,忽略一些不重要的东西。

首先flex的使用需要有一个父容器,父容器中有几个items.

父容器:container

属性: 

   display:flex;/*flex块级,inline-flex:行内快*/

   justify-content:space-around;/*center:水平居中,flex-start:靠左;flex-end:靠右;space-between:两边的向两边靠,中间等分;space-around:完美的平均分配*/

   align-items:stretch;/*center:垂直居中、flex-start:至顶、flex-end:至底、space-between、space-around*/  

   flex-direction: row;/*column从上向下的排列,column-reverse、row:从左到右,row-reverse:从右向左*/

   flex-wrap:wrap;/*wrap多行显示(父容器不够显示的时候,从上到下)、nowrap(当容器不够宽的时候,子元素会平分父容器的宽或者高)、wrap-reverse:从下向上*/

       /*flex-flow是flex-direction、flex-wrap的缩写*/

这里给出一个简单的demo:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus?">
  <style>
    .container{
       width:600px;
       height:400px;
       border:1px solid #000;
       display:flex;/*flex块级,inline-flex:行内快*/
       justify-content:space-around;/*center:水平居中,flex-start:靠左;flex-end:靠右;space-between:两边的向两边靠,中间等分;space-around:完美的平均分配*/
       align-items:stretch;/*center:垂直居中、flex-start,至顶,flex-end:至底*,space-between、space-around*/
       flex-direction: row;/*column从上向下的排列,column-reverse,,,,row:从左到右,row-reverse:从右向左*/
       flex-wrap:wrap;/*wrap多行显示(父容器不够显示的时候,从上到下)、nowrap(当容器不够宽的时候,子元素会平分父容器的宽或者高)、wrap-reverse:从下向上*/
       /*flex-flow是flex-direction、flex-wrap的缩写*/
    }
    .box{
      width:200px;
       height:100px;
        border:1px solid #000;
     }
   </style>
 </head>
 <body>
     <div class="container">
       <div class="box">这是中间的box1</div>
         <div class="box">这是中间的box2</div>
   </div>
 </body>
</html>

 

子元素的属性: 

 order:设置元素的顺序

例如:我么想要将本来第二个元素排在第一,将排在第一的元素设置为第二。

我们可以设置他们的order值。

.box1{order:1;}
.box2{order:0;}
 
   <div class="container">
    <div class="box box1">这是中间的box1</div>
    <div class="box box2">这是中间的box2</div>
 </div>

 

flex:指定可伸缩长度的部件,是flex-shrink,flex-grow,flex-basis这三个属性的缩写。

 他可以指定一个子元素的占据父元素的宽度或者高度的比例。(前提是在子元素还没有占满父级元素的情况下) 

demo:

<style>
   .container{
       width:800px;
       height:600px;
       border:1px solid red;
       display:flex;
       align-items:center;
       justify-content:center;
       flex-direction:row;
       flex-wrap:wrap;
   }
   .box{
       width:200px;
       height:200px;
       border:1px solid blue;
   }
   .box1{
     flex:2
   } 
 </style>
</head>
<body>
   <div class="container">
       <div class= " box box1">1</div>
       <div class="box box2">2</div>
       <div class="box box3">3</div>
       <div class="box box4">4</div>
   </div>
</body>

最终效果如下:因为子元素占满父级元素。

 技术分享图片

 

进一步验证:

 

<style>
    .container{
        width:800px;
        height:600px;
        border:1px solid red;
        display:flex;
        align-items:center;
        justify-content:center;
        flex-direction:row;
        flex-wrap:wrap;
    }
    .box{
        width:200px;
        height:200px;
        border:1px solid blue;
    }
    .box1{
      flex:2
    } 
  </style>
 </head>
 <body>
    <div class="container">
        <div class= " box box1">1</div>
        <div class="box box2">2</div>
    </div>
 </body>

 

 

 

 很明显的阔以看到,box1占据了600px宽度

 技术分享图片

 

align-self:用来单独设置子元素的对齐方式(可将默认的对齐方式进行覆盖)

例如:我们已经在父元素中设置了align-items:center.(将子元素设置为垂直居中显示)

这个时候我们想单独更改某个子元素的对齐方式,就可以使用align-self

<style>
    .container{
        width:800px;
        height:600px;
        border:1px solid red;
        display:flex;
        align-items:center;
        justify-content:center;
        flex-direction:row;
        flex-wrap:wrap;
    }
    .box{
        width:100px;
        height:100px;
        border:1px solid blue;
    }
    .box1{
      flex:2
    }
/* .box4{
        align-self:flex-end;
    } */
  </style>
 </head>
 <body>
    <div class="container">
        <div class= " box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
    </div>
 </body>

技术分享图片

 

假如我们设置 box4:align-self:flex-end;呢

.box4{
 align-self:flex-end;
 }

技术分享图片

好了,已经改变了box4的对齐方式。

如果想兼容更多的浏览器,可以采用优雅降级的方式,例如sass-flex-mixin

 

html问题记录20180604

标签:container   pre   around   idt   log   水平居中   -o   rev   strong   

原文地址:https://www.cnblogs.com/kk-home/p/9195586.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!