标签：ast 对齐 abs wfs 类型 drag 表格 title yellow
<head> <meta charset="UTF-8"> <title>Document</title> <style> .figure01{ width: min-content; margin: auto; } .figure01 img{ width: 210px; } .figure02{ width: max-content; margin: auto; } .figure02 img{ width: 210px; } </style> </head> <body> <figure class="figure01" > <img src="../img/cat.png" alt=""> <p>标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。</p> </figure> <figure class="figure02" > <img src="../img/cat.png" alt=""> <p>标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。</p> </figure> </body>
<head> <meta charset="UTF-8"> <title>float的fit-conent的实用</title> <style> .wrap{ } .wrap ul{ margin: auto; list-style: none; width: fit-content; } .wrap ul li{ float: left; margin: 0px 10px; background: greenyellow; padding: 4px; } </style> </head> <body> <div class="wrap"> <ul> <li>one</li> <li>two</li> <li>thr</li> <li>fou</li> </ul> </div> </body>
<head> <meta charset="UTF-8"> <title>Document</title> <style> .divWrap{ width: 400px; border: 1px solid red; } .wrap{ table-layout: fixed; width: 100%; } .wrap td.one{ width: 20%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wrap td.two{ width: 80%; } </style> </head> <body> <div class=‘divWrap‘ > <table class="wrap" > <tr> <td class=‘one‘ >one</td> <td class=‘two‘ >這個中文假文產生器每次會產生由五個段落、每段六至八個假句組成的假文。所以，假句其實是假文的基礎。為了讓假句在視覺質地上接近真句，我準備了一個由 128 個真句組成的語料庫。每次要產生假句時就從中隨機挑選一個，然後逐字替換為隨機選出的筆畫數相同、但一般人不可能認得的低頻字。因為一般人不可能認得，實際上也算是假字了這個中文假文產生器每次會產生由五個段落、每段六至八個假句組成的假文。所以，假句</td> </tr> <tr> <td class=‘one‘ >這個中文假文產生器每次會產生由五個段落、每段六至八個假句組成的假文。所以，假句</td> <td class=‘two‘ > <img src="../img/cat.png" alt=""> </td> </tr> </table> </div> </body>
<head> <meta charset="UTF-8"> <title>Document</title> <style> .wrap{ width: 200px; } .wrap p:nth-child(2), .wrap p:nth-child(4){ /*从第一个元素开始计数*/ background: red; } .wrap p:nth-of-type(1), .wrap p:nth-of-type(2){ /*从第一个p元素开始计数*/ color: lightyellow; } </style> </head> <body> <div class="wrap"> <h1>标题数据</h1> <p>第一行内容(第一个P标签)</p> <span>这是一个span</span> <p>第二行内容(第二个P标签)</p> </div> </body>
li:first-child:nth-last-child(n+6):nth-last-child(-n+8)分析：<head> <meta charset="UTF-8"> <title>Document</title> <style> ul{ list-style: none; overflow: hidden; } ul li{ float: left; padding: 4px 10px; border-radius: 4px; background: greenyellow; margin: 0px 2px; } li:first-child:nth-last-child(4), li:first-child:nth-last-child(4)~li{ background: indianred; } li:first-child:nth-last-child(n+6):nth-last-child(-n+8), li:first-child:nth-last-child(n+6):nth-last-child(-n+8)~li{ /*匹配li有6,7,8个的ul*/ background: red; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> </body>
用容器一半的宽度 - 内容块一半的宽度
<head> <meta charset="UTF-8"> <title>Document</title> <style> footer{ background: url("../img/cat.png") repeat-x; height: 200px; color: gainsboro; padding: 1em calc(50% - 300px); } .wrap{ width: 600px; } </style> </head> <body> <footer> <div class="wrap"> 這個中文假文產生器每次會產生由五個段落、每段六至八個假句組成的假文。所以，假句其實是假文的基礎。為了讓假句在視覺質地上接近真句，我準備了一個由 128 個真句組成的語料庫。每次要產生假句時就從中隨機挑選一個，然後逐字替換為隨機選出的筆畫數相同、但一般人不可能認得的低頻字。因為一般人不可能認得，實際上也算是假字了這個中文假文產生器每次會產生由五個段落、每段六至八個假句組成的假文。所以，假句 </div> </footer> </body>
<head> <meta charset="UTF-8"> <title>Document</title> <style> .wrap{ position: relative; width: 400px; height: 150px; border: 1px solid red; } .wrap .cont{ position: absolute; top: calc(50% - 30px); left: calc(50% - 50px); width: 100px; height: 60px; background: gray; } .wrap02{ position: relative; width: 400px; height: 150px; border: 1px solid red; } .wrap02 .cont{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: gray; } </style> </head> <body> <div class="wrap"> <div class="cont">这个内容部分需要定宽和定高</div> </div> <div class="wrap02"> <div class="cont">这个内容部分可以实现自适应</div> </div> </body>
<head> <meta charset="UTF-8"> <title>Document</title> <style> .wrap{ width: 18em; background: lightgreen; padding: 1em 1.5em; margin: 50vh auto 0; transform: translateY(-50%); } </style> </head> <body> <div class="wrap"> 这个只能做到视口居中 </div> </body>
<head> <meta charset="UTF-8"> <title>Document</title> <style> .wrap01{ display: flex; min-height: 10vh; border: 1px solid gray; width: 30vw; } .wrap01 .main{ margin: auto; padding: 5px; background: lightblue; } .wrap02{ margin-top: 10px; width: 28em; height: 10em; display: flex; align-items: center; justify-content: center; background: lightblue; } </style> </head> <body> <div class="wrap01"> <div class="main"> flex + margin:auto实现垂直居中 </div> </div> <div class="wrap02"> flex的align-items(垂直对齐)和justify-content(水平对齐)<br/>实现垂直水平居中 </div> </body>
<head> <meta charset="UTF-8"> <title>Document</title> <style> body{ margin: 0px; display: flex; flex-flow: column; min-height: 100vh; } main{ flex: 1; } header{ background: limegreen; } footer{ background: lightpink; } </style> </head> <body> <header>header</header> <main>main</main> <footer>footer</footer> </body>
标签：ast 对齐 abs wfs 类型 drag 表格 title yellow
原文地址：http://www.cnblogs.com/cqhaibin/p/6243707.html
