這篇文章記錄一些自己學習CSS的知識點，不包含JavaScript。能用CSS解決的問題，就不要用JavaScript。
一、移動端上圖下文布局
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul {
/*解決inline-block空白間隙問題*/
font-size: 0;
/*文字兩端對齊*/
text-align: justify;
}
li {
display: inline-block;
width: 50%;
padding: 1%;
vertical-align: top;
}
li img {
width:100%;
max-width: 100%;
border-radius: 5px;
box-shadow: 1px 1px 1px #696969;
}
li span {
font-size: 14px;
}
/*偽元素實現換行，替代<br>換行標簽*/
li span::before {
content: "\A";
white-space: pre;
}
</style>
<ul>
<li>
<img src="https://upload-images.jianshu.io/upload_images/5794148-7ca25af63a40f95a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" />
<span>迅速找到我。我的特征是，狂喜與絕望。</span>
</li>
<li>
<img src="https://upload-images.jianshu.io/upload_images/5794148-7ca25af63a40f95a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" />
<span>夏天的風卻冷，你曾經是我最想要的，但你似乎從來都不需要我。我想就是因為這樣，我放棄了你。。</span>
</li>
<li>
<img src="https://upload-images.jianshu.io/upload_images/5794148-7ca25af63a40f95a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" />
<span>夢想，可以天花亂墜，理想，是我們一步一個腳印踩出來的坎坷道路。</span>
</li>
</ul>
實現效果
二、左右排布的列表，左側是標簽信息，右側是描述信息
這種效果需要考慮以下幾個問題：
- 容器不能定高
- 左側安全寬度，右側自動分配剩余空間。一定要使用em單位,不要使用px或者rem。無論容器的字號大小是多少，左側寬度都不會空間不足，非常彈性，容錯性很強。
- 考慮極端內容（文字內容很多、連續的一串英文字符、沒有文字內容）
- 空值處理
<style>
/*在這做簡單處理,實際項目中需要用類似reset.css*/
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
h4 {
margin: 5px 0;
}
dl {
line-height: 1.5;
border: 1px solid #ccc;
background-color: #fff;
padding: 10px;
}
dd {
word-break: break-all;
}
dd:empty::before {
content: '-';
color: #999;
}
/*position布局實現*/
.dl1 dt {
position: absolute;
}
.dl1 dd {
margin-left: 5em;
text-align: right;
}
/*Flex布局實現*/
.dl2 {
display: flex;
flex-wrap: wrap;
}
.dl2 dt {
width: 5em;
}
.dl2 dd {
width: calc(100% - 5em);
text-align: right;
}
/*Grid布局實現*/
.dl3 {
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 1em;
}
.dl3 dd {
text-align: right;
}
/*float布局實現*/
.dl4 dt {
width: 5em;
float: left;
}
.dl4 dd {
text-align: right;
overflow: hidden;
}
/* 流體特性實現 */
.dl5 dd {
text-align: right;
margin: -1.3em 0 0 5em;
}
</style>
<h4>1.absolute實現：</h4>
<dl class="dl1">
<dt>手機系統</dt>
<dd>Android</dd>
<dt>登錄方式</dt>
<dd>QQ互聯登錄</dd>
<dt>綁定時間</dt>
<dd>2019-01-02 11:10</dd>
<dt>綁定狀態</dt>
<dd>有效綁定狀態</dd>
</dl>
<h4>2.flex實現：</h4>
<dl class="dl2">
<dt>手機系統</dt>
<dd>Android</dd>
<dt>登錄方式</dt>
<dd>QQ互聯登錄</dd>
<dt>綁定時間</dt>
<dd>2019-01-02 11:10</dd>
<dt>綁定狀態</dt>
<dd>有效綁定狀態</dd>
</dl>
<h4>3.grid實現：</h4>
<dl class="dl3">
<dt>手機系統</dt>
<dd>Android</dd>
<dt>登錄方式</dt>
<dd>QQ互聯登錄</dd>
<dt>綁定時間</dt>
<dd>2019-01-02 11:10</dd>
<dt>綁定狀態</dt>
<dd>有效綁定狀態</dd>
</dl>
<h4>4.float實現：</h4>
<dl class="dl4">
<dt>手機系統</dt>
<dd>Android</dd>
<dt>登錄方式</dt>
<dd>QQ互聯登錄</dd>
<dt>綁定時間</dt>
<dd>2019-01-02 11:10</dd>
<dt>綁定狀態</dt>
<dd>有效綁定狀態</dd>
</dl>
<h4>5.流體特性實現：</h4>
<dl class="dl5">
<dt>手機系統</dt>
<dd>Android</dd>
<dt>登錄方式</dt>
<dd>QQ互聯登錄</dd>
<dt>綁定時間</dt>
<dd>2019-01-02 11:10</dd>
<dt>綁定狀態</dt>
<dd>有效綁定狀態</dd>
</dl>
實現效果
參考鏈接：https://www.zhangxinxu.com/wordpress/2019/01/css-quiz-1/
參考GitHub：https://github.com/zhangxinxu/quiz/issues/1
在線demo：https://www.zhangxinxu.com/study/201901/css-quiz-1-layout-demo.php
