1.Demo

2.Selector

2.1 div p

将所有<div>标签里面的<p>标签选中（子标签和孙子辈标签）

<style> 
  div span{
    color:red;
  }
</style>

<div>
  <p> 
     <span> Hello World! </span>
  </p>
  <span> Study Css </span>
</div>

2.2 div>p

将所有<div>标签的子标签<p>选中，不包括孙子辈标签。

<style> 
  div>span {
    color:red;
  }
</style>
<div>
  <p> 
     <span> Hello World! </span>
  </p>
  <span> Study Css </span>
</div>

这个例子中只有Study Css是红色！

2.3 div+p

将所有离<div>相邻的<p>标签选中

<style>
   div + p { 
       color: blue;
   }     /*div后面紧跟着的第一个p标签(必须是紧邻的标签)*/
</style>

<div>hello</div>
<p>world</p>

这个例子中world字体是蓝色！

2.4 div~p

将<div>后面所有的<p>标签选中

<style>
   div~p {
       color: orange;
   }
</style>
<div>第一段</div>
<p>p标签</p>
<p>p标签</p>

这个例子中所有p标签字体都是橙色！

2.5 div.a

将<div>下class=a标签选中

<style>
   div.a {
       color: green
   }
</style>

<div class="a">hello world</div>

这个例子中hello world字体是绿色！

2.6 p,span

将p和span选中

<style>
  p,span { 
      color: green
  }
</style>
<p>驾驶、行驶</p>
<span>记分查询</span>

这个例子中p和span字体是绿色！

3.Charactor

3.1 圓角

.above{
    margin: 10px;
    border: 2px solid;
    background-color: aliceblue;
    border-radius: 13px;
    padding: 3px;
}

3.2 字體

.p{
    white-space: pre/nowwap;
    text-indent: 2em;      #縮進
    text-align: center;    #居中
    
    overflow: hidden;
    text-overflow: ellipsis;   #內容太多，省略號
}

3.3 外框固定

3.4 按鈕居中

父標籤屬性

  .container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100vh; /* 视口高度 */
  }

  .container {
    display: grid;
    place-items: center; /* 将子元素放置于中心 */
    height: 100vh; /* 视口高度 */
  }

4. div內容居中

4.1 Flex布局

使用 Flex 布局是让 div 中的内容水平垂直居中

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

4.2 绝对定位

.container {
  position: relative;
}
 
.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

4.3 table-cell

.container {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

4.4 Grid 布局

.container {
  display: grid;
  place-items: center;
}

4.5 使用 line-height

.container {
  line-height: 100px; /* 修改此处的值为 div 的高度 */
  text-align: center;
}

5. 內容換行

返回的內容：\n1.xxxxxx\n2.xxxxx\n3.xxxxx

    .cell{
      white-space: pre-line;
    }