Bilakah saya harus mempertimbangkan untuk menggunakan kedudukan untuk meletakkan elemen dan bukannya kotak lentur?
P粉914731066
2023-07-23 17:48:48
<p><br /></p>
<pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html lang="en">
<kepala>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<tajuk>Dokumen</title>
<gaya>
#dn {
lebar: 400px;
ketinggian: 400px;
padding: 20px;
sempadan: 2px pepejal #cd1313;
}
.box1 {
lebar: 100%;
ketinggian: 100%;
paparan: flex;
justify-content: pusat;
align-item: tengah;
text-align: tengah;
font-weight: tebal;
warna: putih;
saiz fon: 24px;
warna latar belakang: #000000;
}
</style>
</head>
<badan>
<div id="dn" class="boxn">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto ducimus repudiandae inventore iste porro distinctio necessitatibus incidunt accusamus facilis obcaecati! hey namen
<div id="d1" class="box1">
anak
</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque deleniti quibusdam quod praesentium, soluta harum alias aperiam hic voluptatum natus?
</div>
</badan>
</html></pre>
<p>我已经将box1显示为伸缩框。它不仅允许我水平对齐里面的项目(子)，还允许直对齐项目。然后我问自己，为什么我没有使用位置来居中的文字?那么后果会是什么呢?是因为我们不能在文本上应用位置吗?，如果顷为我们不能在文本上应用位置吗?，如果项为我们不能在文本上应用位置吗?，如果项为我们不能在文本上应用位置吗?，如果项为我们中文以在其中应用位置吗?如果是，那么它不会产生问题，因为我们必须使用绝对位置来使它响应boxn。这个问题又长又烦人，但对我来说很重要。</p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Apabila menggunakan kedudukan, anda perlu menentukan bilangan piksel pada setiap sisi objek yang anda perlukan untuk meletakkannya. Ini tidak begitu fleksibel. Bayangkan anda perlu mengukur / mengira / mencuba berapa banyak piksel yang diperlukan oleh setiap objek untuk saiz skrin yang berbeza, ia mungkin tetapi ia memerlukan banyak masa dan usaha. Jadi flexbox lebih mudah untuk dilaksanakan.
Dengan flexbox, kandungan anda akan lebih konsisten. Maksud saya, ia mengira untuk anda berapa banyak piksel yang anda perlukan pada setiap sisi objek. Ini akan mengurangkan kemungkinan pengiraan di luar sasaran. Oleh itu, semua elemen akan diletakkan dengan cara yang sama.