CSS之选择器|弹性盒子模型

选择器

id选择器（单个）

每一个标签都可设置一个id。id是唯一即样式是id所在标签特有的

java 复制代码

  #myid{
            color: blue;
        }
  <p id="myid">啊撒大声地</p>

类选择器（多个）

顾名思义之针对某一类群体

java 复制代码

  .test{
        width: 500px;
        height: 700px;
        text-align: center;
        
       }
  <div class="test" >
        CALSS1
    </div>
    <div class="test" >
        CALSS2
    </div>

标签选择器

样式适用于所有此标签

java 复制代码

p{
color: red
}
<p>test</p>

关系选择器

E|F：id、class、标签

后代选择器

所有被E元素所包含的F元素，中间用空格隔开

说明：样式适用于其后代F

语法：E F{}

java 复制代码

     #myid{
            color: rgb(113, 187, 70);
        }
       .test{
        width: 500px;
        height: 700px;
        text-align: center;
        
       }
      
      <div class="test" >
        <p id="myid">阿斯达是的撒</p>
    </div>

子代选择器

选择所有作为E元素的直接子元素F。用>表示

只适用于F

语法：E>F{}

java 复制代码

 .test>p{
        color: red;
       }
   <div class="test" >
        <p >阿斯达是的撒</p>
        <p >阿斯达是的撒</p>
    </div>

相邻兄弟选择器

选择E元素后紧跟的同级别第一个F元素

语法：E+F{}

java 复制代码

  .test+p{
        color: red;
       }
      <div class="test" >
        测试
    </div>
    <p>测试兄弟1</p>

通用兄弟选择器

选择E元素后紧跟的同级别所有F元素

语法：E~F{}

java 复制代码

  .test+p{
        color: red;
       }
      <div class="test" >
        测试
    </div>
    <p>测试兄弟1</p>
    <p>测试兄弟2</p>

弹性盒子模型

设置属性：

display: flexbox;一个元素设置为flex容器

flex-direction：

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，但起点在右端。
column：主轴为垂直方向，起点在顶端。
column-reverse：主轴为垂直方向，但起点在底端。
justify-content：用于控制主轴（main axis）上子元素的对齐方式
align-items:用于控制次轴（main axis）上子元素的对齐方式
flex:盒子元素所占比例（优先级高于宽度）

java 复制代码

  .test {
            width: 300px;
            height: 300px;
            background-color: black;
            display: flex;
            justify-content: center;
            align-items: center;

        }

        .test1 {
            flex: 1;
            width: 100px;
            height: 100px;
            background-color: rgb(228, 7, 199);

        }

        .test2 {
            flex: 2;
            width: 100px;
            height: 100px;
            background-color: green;

        }

        .test3 {
            flex: 1;
            width: 100px;
            height: 100px;
            background-color: blue;

        }
    </style>
</head>

<body>
    <div class="test">
        <div class="test1"></div>
        <div class="test2"></div>
        <div class="test3"></div>
    </div>

</body>