<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>