Day 11 (Bootstrap)

1.为什麽这样设定div不会出现?

h-100没显示的原因?因body(父层)没有给宽高
但是直接设body会影响其他人,所以在包一个div给他

      <div class="w-25 h-100 bg-success">Apple</div>

解决

      <div style="height: 150px; background-color: black">
        <div class="w-25 h-100 bg-success">Apple</div>
      </div>

2..d-flex和 .d-inline-flex 的差异

1.d-flex 以下换行

 <div class="d-flex bg-secondary text-white p-3">
        <div class="p-2 bg-danger">Item1</div>
        <div class="p-2 bg-warning">Item2</div>
        <div class="p-2 bg-success">Item3</div>
      </div>

2.d-inline-flex

 以下会压在一行里面
      <div class="d-inline-flex bg-secondary text-white p-3">
        <div class="p-2 bg-danger">Item1</div>
        <div class="p-2 bg-warning">Item2</div>
        <div class="p-2 bg-success">Item3</div>
      </div>
  就像这样

3. order- 改变元素顺序

数字越小越前面 不输入最大!如:Item2

    <div class="d-flex bg-secondary text-white p-3">
        <div class="order-3 p-2 bg-danger">Item1</div>
        <div class="p-2 bg-warning">Item2</div>
        <div class="order-1 p-2 bg-success">Item3</div>
      </div>

4.该如何设置，让第一个元素靠左边，其余元素靠右边排列？

各种奇怪方法,虽然很奇怪 但是就是有用XD
(1)mr-auto

      <div class="d-flex bg-secondary text-white p-3">
        <!--   -->
        <div class="mr-auto p-2 bg-danger">Item1</div>
        <div class="        p-2 bg-warning">Item2</div>
        <div class="        p-2 bg-success">Item3</div>
      </div>

(2)ml-auto

      <div class="d-flex bg-secondary text-white p-3">
        <div class="        p-2 bg-danger">Item1</div>
        <div class="ml-auto p-2 bg-warning">Item2</div>
        <div class="        p-2 bg-success">Item3</div>
      </div>

(3)hr

   <div class="d-flex bg-secondary text-white p-3">
        <div class="p-2 bg-danger">Item1</div>
        <hr />
        <div class="p-2 bg-warning">Item2</div>
        <div class="p-2 bg-success">Item3</div>
      </div>

5.Flex-Justify-Content(主轴,副轴的滑动)

.justify-content-设定父

     <div class="d-flex justify-content-center bg-secondary text-white">
        <div class="p-2 bg-danger">Item1</div>
        <div class="p-2 bg-warning">Item2</div>
        <div class="p-2 bg-success">Item3</div>
      </div>

.align-items-设定父

<div class="d-flex align-items-center bg-secondary text-white" style="height: 150px">
        <div class="p-2 bg-danger">Item1</div>
        <div class="p-2 bg-warning">Item2</div>
        <div class="p-2 bg-success">Item3</div>
      </div>

.align-content-设定父

     <div class="d-flex align-content-center flex-wrap bg-secondary text-white p-3" style="height: 150px">
        <div class="p-2 bg-danger">Item1</div>
        <div class="p-2 bg-warning">Item2</div>
        <div class="p-2 bg-success">Item3</div>
        <div class="p-2 bg-danger">Item1</div>
        <div class="p-2 bg-warning">Item2</div>
        <div class="p-2 bg-success">Item3</div>
        <div class="p-2 bg-danger">Item1</div>
        <div class="p-2 bg-warning">Item2</div>
        <div class="p-2 bg-success">Item3</div>
        <div class="p-2 bg-danger">Item1</div>
        <div class="p-2 bg-warning">Item2</div>
        <div class="p-2 bg-success">Item3</div>
        <div class="p-2 bg-danger">Item1</div>
        <div class="p-2 bg-warning">Item2</div>
        <div class="p-2 bg-success">Item3</div>
        <div class="p-2 bg-danger">Item1</div>
        <div class="p-2 bg-warning">Item2</div>
        <div class="p-2 bg-success">Item3</div>
        <div class="p-2 bg-danger">Item1</div>
        <div class="p-2 bg-warning">Item2</div>
        <div class="p-2 bg-success">Item3</div>
        <div class="p-2 bg-danger">Item1</div>
        <div class="p-2 bg-warning">Item2</div>
        <div class="p-2 bg-success">Item3</div>
      </div>

.align-self-设定子

      <div class="d-flex bg-secondary text-white p-3" style="height: 150px">
        <div class="align-self-start p-2 bg-danger">Item1</div>
        <div class="align-self-center p-2 bg-warning">Item2</div>
        <div class="align-self-end p-2 bg-success">Item3</div>
      </div>

6.是否需要阶层？要怎麽分辨呢？

(档案css20_(抓标签位置笔记)combinator_selectors)

查css看是否有 1.空白 2.>

记忆法 後裔选择器

1.   nav 里面所有的nav-item(爸爸 孙子 *包容)
2. > nav 底下一层的nav-item(爸爸 *针对)


3. ~ nav 之後所有的nav-item(同一层)(河流~)
4. + nav 同一层之後的第一个nav-item(*1+1=2,只有一个)

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>