HTML+CSS知识点(十二) css 权重,flex布局

css权重

<!-- <link rel="stylesheet" href="../通用样式.css"> -->
    <style>

        /* #box11{
            color:blue
        } */

        .container div{ 
            color: red;
        }

        .box{  
            color: pink;
        }
        /* div{  
            color: seagreen !important;
        } */
    </style>
   
</head>
<body>
    <div class="container">
        <div class="box" id="box11" style="color: pink;">
            我是div标签
        </div>
    </div>

选择器权重:*{} 权重值为 0,标签选择器 权重值为 1,类选择器 权重值 为10,id选择器 权重值为100,行内选择器权重 值 为1000,!important 权重值最大。

flex布局

<link rel="stylesheet" href="../通用样式.css">
    <style>
        .fa{
            width: 1000px;
            margin: 20px auto;
            border: 1px solid rebeccapurple;
            display: flex;
            /* 设置内部内容flex布局 */
            /* flex-wrap: wrap; */
            /* flex子元素换行 */
            height: 500px;
            /* align-items: center; */
            /*  */
            /* flex-direction: row; */
            /* 默认排列方向是横向 */
            /* flex-direction: column; */
        }
        .item{
            width: 100px;
            height: 200px;
            border: 1px solid royalblue;
            /* background-color: red; */
        }

    </style>
</head>
<body>
    <div class="fa">
      
        
        <div class="item">

        </div>
        <div class="item">

        </div>
        <div class="item">

        </div>
        <div class="item">

        </div>

    </div>
</body>

display: flex;  内部内容开启flex布局。

flex-wrap: wrap;  子元素换行,默认不换行。flex-wrap有三个属性值 分别为:wrap,nowrap,wrap-reverse。

flex-direction: row;  flex布局主轴的方向,默认从左到右,flex-direction有四个属性值 分别为:row,row-reverse,column,column-reverse。

 ul{
            display: flex;
            border: 1px solid red;
            /* justify-content: space-between; */
            /* 子元素均匀等分 两边没有空格*/

            /* justify-content: space-around; */
            /* 均匀等分子元素,两边有间隙 */

            /* justify-content: center; */
            /* 子元素居中 */
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
        }
        li{
            width: 100px;
            height: 200px;
            border: 1px solid rebeccapurple;
        }



 <ul>
        <li class="box1">1</li>
        <li class="box2">2</li>
        <li class="box3">3</li>
        <li class="box1">4</li>
        <li class="box2">5</li>
        <li class="box3">6</li>
    </ul>

justify-content:flex布局内部item的排列方式,justify-content: space-between; 子元素均匀等分 两边没有空格,justify-content: space-around; 均匀等分子元素,两边有间隙 justify-content: center; 子元素居中 justify-content: space-evenly;  justify-content: flex-start; justify-content: flex-end;等等,这些都是justify-content的属性值。

 ul{
            height: 250px;
            display: flex;
            border: 1px solid red;
            flex-direction: column;
            /* align-items: center; */
            /* align-items: flex-start; */
            align-items: flex-end;
            /* 垂直于主轴的排列方式 */
            justify-content: center;
        
            /* 沿着主轴元素的排列方式,主轴就是flex-direction设置的值 */
        }
        li{
            width: 200px;
            height: 100px;
            border: 1px solid rebeccapurple;
        }



<ul>
        <li class="box1">1</li>
        <li class="box2">2</li>
        <li class="box3">3</li>
        <li class="box1">4</li>
        <li class="box2">5</li>
        <li class="box3">6</li>
    </ul>

align-items:垂直于主轴的排列方式,主轴就是flex-direction设置的值,align-items: center; justify-content: center; 可实现内部item水平居中。

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页