這篇文章記錄一些自己學(xué)習(xí)CSS的知識(shí)點(diǎn)咆蒿，不包含JavaScript东抹。能用CSS解決的問(wèn)題，就不要用JavaScript沃测。
一缭黔、移動(dòng)端上圖下文布局
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul {
/*解決inline-block空白間隙問(wèn)題*/
font-size: 0;
/*文字兩端對(duì)齊*/
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;
}
/*偽元素實(shí)現(xiàn)換行，替代<br>換行標(biāo)簽*/
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>夏天的風(fēng)卻冷附迷，你曾經(jīng)是我最想要的惧互，但你似乎從來(lái)都不需要我。我想就是因?yàn)檫@樣喇伯，我放棄了你喊儡。。</span>
</li>
<li>
<img src="https://upload-images.jianshu.io/upload_images/5794148-7ca25af63a40f95a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" />
<span>夢(mèng)想艘刚，可以天花亂墜管宵，理想，是我們一步一個(gè)腳印踩出來(lái)的坎坷道路攀甚。</span>
</li>
</ul>
實(shí)現(xiàn)效果
線上訪問(wèn)地址： http://tianshuo1993.com/css/demo1.html
二箩朴、左右排布的列表，左側(cè)是標(biāo)簽信息秋度，右側(cè)是描述信息
這種效果需要考慮以下幾個(gè)問(wèn)題：
- 容器不能定高
- 左側(cè)安全寬度炸庞，右側(cè)自動(dòng)分配剩余空間。一定要使用em單位,不要使用px或者rem荚斯。無(wú)論容器的字號(hào)大小是多少埠居，左側(cè)寬度都不會(huì)空間不足查牌，非常彈性，容錯(cuò)性很強(qiáng)滥壕。
- 考慮極端內(nèi)容（文字內(nèi)容很多纸颜、連續(xù)的一串英文字符、沒(méi)有文字內(nèi)容）
- 空值處理
<style>
/*在這做簡(jiǎn)單處理,實(shí)際項(xiàng)目中需要用類似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布局實(shí)現(xiàn)*/
.dl1 dt {
position: absolute;
}
.dl1 dd {
margin-left: 5em;
text-align: right;
}
/*Flex布局實(shí)現(xiàn)*/
.dl2 {
display: flex;
flex-wrap: wrap;
}
.dl2 dt {
width: 5em;
}
.dl2 dd {
width: calc(100% - 5em);
text-align: right;
}
/*Grid布局實(shí)現(xiàn)*/
.dl3 {
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 1em;
}
.dl3 dd {
text-align: right;
}
/*float布局實(shí)現(xiàn)*/
.dl4 dt {
width: 5em;
float: left;
}
.dl4 dd {
text-align: right;
overflow: hidden;
}
/* 流體特性實(shí)現(xiàn) */
.dl5 dd {
text-align: right;
margin: -1.3em 0 0 5em;
}
</style>
<h4>1.absolute實(shí)現(xiàn)：</h4>
<dl class="dl1">
<dt>手機(jī)系統(tǒng)</dt>
<dd>Android</dd>
<dt>登錄方式</dt>
<dd>QQ互聯(lián)登錄</dd>
<dt>綁定時(shí)間</dt>
<dd>2019-01-02 11:10</dd>
<dt>綁定狀態(tài)</dt>
<dd>有效綁定狀態(tài)</dd>
</dl>
<h4>2.flex實(shí)現(xiàn)：</h4>
<dl class="dl2">
<dt>手機(jī)系統(tǒng)</dt>
<dd>Android</dd>
<dt>登錄方式</dt>
<dd>QQ互聯(lián)登錄</dd>
<dt>綁定時(shí)間</dt>
<dd>2019-01-02 11:10</dd>
<dt>綁定狀態(tài)</dt>
<dd>有效綁定狀態(tài)</dd>
</dl>
<h4>3.grid實(shí)現(xiàn)：</h4>
<dl class="dl3">
<dt>手機(jī)系統(tǒng)</dt>
<dd>Android</dd>
<dt>登錄方式</dt>
<dd>QQ互聯(lián)登錄</dd>
<dt>綁定時(shí)間</dt>
<dd>2019-01-02 11:10</dd>
<dt>綁定狀態(tài)</dt>
<dd>有效綁定狀態(tài)</dd>
</dl>
<h4>4.float實(shí)現(xiàn)：</h4>
<dl class="dl4">
<dt>手機(jī)系統(tǒng)</dt>
<dd>Android</dd>
<dt>登錄方式</dt>
<dd>QQ互聯(lián)登錄</dd>
<dt>綁定時(shí)間</dt>
<dd>2019-01-02 11:10</dd>
<dt>綁定狀態(tài)</dt>
<dd>有效綁定狀態(tài)</dd>
</dl>
<h4>5.流體特性實(shí)現(xiàn)：</h4>
<dl class="dl5">
<dt>手機(jī)系統(tǒng)</dt>
<dd>Android</dd>
<dt>登錄方式</dt>
<dd>QQ互聯(lián)登錄</dd>
<dt>綁定時(shí)間</dt>
<dd>2019-01-02 11:10</dd>
<dt>綁定狀態(tài)</dt>
<dd>有效綁定狀態(tài)</dd>
</dl>
實(shí)現(xiàn)效果
參考鏈接：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
