CSS中定位模型有哪些？
定位模型 2017年6月8日 fanbright
css支持6种定位模型
静态
绝对
固定
相对
浮动
相对浮动
设定位置
position:static;可以取消元素的定位设置,使之恢复为原先在常规流中的显示方式.static是默认值.
position:relative;可以使元素相对于常规流的位置偏移一定距离.
position:absolute;可以使元素相对于常规流的位置或最近定位祖先元素的位置偏移一定的距离.
position:fixed;可以使元素相对于窗口偏移一定的距离.
z-index可以设置元素的堆叠顺序,数值越大,元素越靠上.
最近定位祖先元素
如果设定位置的元素没有定位祖先元素,那么
<body>就成为定位祖先元素,换言之,<body>是默认设定位置元素.最近定位元素必须是有效的祖先元素(relative|absolute|fixed),css不支持相对于文档中任意元素进行定位的方法.
-
position:relative;是一个非常好的创建定位祖先元素的方法,因为它不会离开常规流.使用这种方法,能够创建出既保持常规流又实现绝对定位的布局.
原子显示设定了位置的元素是
原子显示的,这意味着它的静态后代元素,行内内容和背景之间不可能出现外部元素.通过使用相对定位,绝对定位和固定定位模式,就可以将元素设置为原子显示,设置为overflow:scroll|auto的块级元素也是原子显示的
而没设定位置的静态块级,当发生重叠时,他们的行内内容不会重叠,但是他们的边框和背景会发生重叠,但文字不会.
z-index
适用于所有元素,默认auto
z-index不是全局属性,而是相对于设置了数字值z-index的最近定位祖先元素而定.根元素html会创建根堆叠上下文.每一个指定数字值z-index的设定位置元素都会创建一个本地的局部的堆叠上下文.
静态定位元素按照文档出现顺序从后往前进行堆叠.
设定位置元素忽略文档元素出现顺序,而是根据z-index值由小到大的顺序从后往前堆叠.负值的设定位置元素位于静态定位元素和非设定位置浮动元素之下
一 静态定位模型
position:static;默认是static;
静态元素的开始位置由前一个静态元素的位置确定.静态元素的
尺寸,内边距,边框,和外边距决定了下一个元素的开始位置.相邻元素的垂直外边距会
合并在一起,最终的外边距是两个相邻元素外边距的较大值将左右外边距设置为auto,可以使
已设定尺寸的静态块级元素居中显示.
二 绝对定位模型
position:absolute;
百分数是相对于最近定位祖先元素的尺寸而言,而非父元素的尺寸.将元素的left,right,top,bottom,设置为
auto,可以使它恢复原先在常规流中的位置.与浮动元素不同,绝对元素不会自动排列.不会受其他元素影响,也不会影响别的元素.
如果一个元素的所有子元素都设置为绝对定位,那么它的高度会变为
0,所有它的子元素都离开了常规流.-
如果不存在定位祖先元素,会根据
<body>来定位绝对定位居中,一般元素
div{ position:absolute; width:200px; height:200px; margin:0 auto; border:1px solid blue; /*left:0;*/ 这两条没用,没有影响 /*right:0;*/ }Salin selepas log masuk绝对定位居中,静态行内元素
对于静态行内元素,如em,strong,span等,但是不包括行内可替换元素(input,img,textarea等),使用绝对定位模式absolute时,width和right可以使用为了要居中,需要额外的加上
left:0;和right:0;使margin:0 auto;可以正常的生效.
注意,这里left和right必须是0才行.#em{ position:absolute; width:200px; height:200px; margin:0 auto; border:1px solid blue; left:0; right:0; }Salin selepas log masuk
三 固定定位模型
position:fixed;可以将任意元素变为固定位置元素
切记:固定定位的元素位置是相对于
窗口而定,而非相对于最近定位祖先`,而且元素不会随页面滚动而滚动.因为它是相对页面来定位,所以
不需要最近定位祖先设置时最好以top,left来进行偏移定位,当同时设置top,left,bottom,right时,会
优先使用top和left的值,只有当top和left不存在时,bottom和right才会生效
四 相对定位
position:relative;
使用left和top来改变元素位置,left和top默认是auto,auto会使相对定位元素保持在常规流中原有位置.
任何元素都可以设置position:relative;从而其绝对定位的后代元素都可以相对于它进行定位.
五 浮动定位与复位
使用float:left;和float:right;可以使元素离开常规流.
使用float:none;默认是none,可以覆盖元素的其他浮动规则,也可以避免继承浮动
浮动元素不会影响块级框的位置,而只影响行内元素
clear:left;clear:right;clear;both;
任意元素都可以设置为浮动元素,clear适用于表格,块级元素和浮动元素
clear 不适用于
行内,绝对定位或固定定位的元素
六 相对浮动定位
使用float可以使一些元素成为浮动元素,通过relative可以浮动元素设置为相对定位,相对浮动元素仍然位于浮动元素所在的常规流中,可以使用left和top设置它在流中的偏移位置.
只有positon:relative;和position:static;适用于浮动元素.而设定为absolute和fixed时,显示结果是不确定的.
零散
在css中,如果参数值是0的话,不要加单位,
浏览器在渲染一个元素内容之前,会先渲染它的框,顺序是从背景颜色开始,然后是背景图片,接着是边框,最后,浏览器会在框之上渲染框的内容
Atas ialah kandungan terperinci CSS中定位模型有哪些？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Model MoE sumber terbuka paling berkuasa di dunia ada di sini, dengan keupayaan bahasa Cina setanding dengan GPT-4, dan harganya hanya hampir satu peratus daripada GPT-4-Turbo
May 07, 2024 pm 04:13 PM
Bayangkan model kecerdasan buatan yang bukan sahaja mempunyai keupayaan untuk mengatasi pengkomputeran tradisional, tetapi juga mencapai prestasi yang lebih cekap pada kos yang lebih rendah. Ini bukan fiksyen sains, DeepSeek-V2[1], model MoE sumber terbuka paling berkuasa di dunia ada di sini. DeepSeek-V2 ialah gabungan model bahasa pakar (MoE) yang berkuasa dengan ciri-ciri latihan ekonomi dan inferens yang cekap. Ia terdiri daripada 236B parameter, 21B daripadanya digunakan untuk mengaktifkan setiap penanda. Berbanding dengan DeepSeek67B, DeepSeek-V2 mempunyai prestasi yang lebih kukuh, sambil menjimatkan 42.5% kos latihan, mengurangkan cache KV sebanyak 93.3% dan meningkatkan daya pemprosesan penjanaan maksimum kepada 5.76 kali. DeepSeek ialah sebuah syarikat yang meneroka kecerdasan buatan am
KAN, yang menggantikan MLP, telah diperluaskan kepada konvolusi oleh projek sumber terbuka
Jun 01, 2024 pm 10:03 PM
Awal bulan ini, penyelidik dari MIT dan institusi lain mencadangkan alternatif yang sangat menjanjikan kepada MLP - KAN. KAN mengatasi MLP dari segi ketepatan dan kebolehtafsiran. Dan ia boleh mengatasi prestasi MLP berjalan dengan bilangan parameter yang lebih besar dengan bilangan parameter yang sangat kecil. Sebagai contoh, penulis menyatakan bahawa mereka menggunakan KAN untuk menghasilkan semula keputusan DeepMind dengan rangkaian yang lebih kecil dan tahap automasi yang lebih tinggi. Khususnya, MLP DeepMind mempunyai kira-kira 300,000 parameter, manakala KAN hanya mempunyai kira-kira 200 parameter. KAN mempunyai asas matematik yang kukuh seperti MLP berdasarkan teorem penghampiran universal, manakala KAN berdasarkan teorem perwakilan Kolmogorov-Arnold. Seperti yang ditunjukkan dalam rajah di bawah, KAN telah
Yolov10: Penjelasan terperinci, penggunaan dan aplikasi semuanya di satu tempat!
Jun 07, 2024 pm 12:05 PM
1. Pengenalan Sejak beberapa tahun kebelakangan ini, YOLO telah menjadi paradigma dominan dalam bidang pengesanan objek masa nyata kerana keseimbangannya yang berkesan antara kos pengiraan dan prestasi pengesanan. Penyelidik telah meneroka reka bentuk seni bina YOLO, matlamat pengoptimuman, strategi pengembangan data, dsb., dan telah mencapai kemajuan yang ketara. Pada masa yang sama, bergantung pada penindasan bukan maksimum (NMS) untuk pemprosesan pasca menghalang penggunaan YOLO dari hujung ke hujung dan memberi kesan buruk kepada kependaman inferens. Dalam YOLO, reka bentuk pelbagai komponen tidak mempunyai pemeriksaan yang komprehensif dan teliti, mengakibatkan lebihan pengiraan yang ketara dan mengehadkan keupayaan model. Ia menawarkan kecekapan suboptimum, dan potensi yang agak besar untuk peningkatan prestasi. Dalam kerja ini, matlamatnya adalah untuk meningkatkan lagi sempadan kecekapan prestasi YOLO daripada kedua-dua pasca pemprosesan dan seni bina model. sampai habis
Melebihi DPO secara menyeluruh: Pasukan Chen Danqi mencadangkan pengoptimuman pilihan mudah SimPO, dan turut memperhalusi model sumber terbuka 8B terkuat
Jun 01, 2024 pm 04:41 PM
Untuk menyelaraskan model bahasa besar (LLM) dengan nilai dan niat manusia, adalah penting untuk mempelajari maklum balas manusia untuk memastikan bahawa ia berguna, jujur dan tidak berbahaya. Dari segi penjajaran LLM, kaedah yang berkesan ialah pembelajaran pengukuhan berdasarkan maklum balas manusia (RLHF). Walaupun keputusan kaedah RLHF adalah cemerlang, terdapat beberapa cabaran pengoptimuman yang terlibat. Ini melibatkan latihan model ganjaran dan kemudian mengoptimumkan model dasar untuk memaksimumkan ganjaran tersebut. Baru-baru ini, beberapa penyelidik telah meneroka algoritma luar talian yang lebih mudah, salah satunya ialah pengoptimuman keutamaan langsung (DPO). DPO mempelajari model dasar secara langsung berdasarkan data keutamaan dengan meparameterkan fungsi ganjaran dalam RLHF, sekali gus menghapuskan keperluan untuk model ganjaran yang jelas. Kaedah ini mudah dan stabil
Tiada data OpenAI diperlukan, sertai senarai model kod besar! UIUC mengeluarkan StarCoder-15B-Instruct
Jun 13, 2024 pm 01:59 PM
Di barisan hadapan teknologi perisian, kumpulan UIUC Zhang Lingming, bersama penyelidik dari organisasi BigCode, baru-baru ini mengumumkan model kod besar StarCoder2-15B-Instruct. Pencapaian inovatif ini mencapai kejayaan ketara dalam tugas penjanaan kod, berjaya mengatasi CodeLlama-70B-Instruct dan mencapai bahagian atas senarai prestasi penjanaan kod. Keunikan StarCoder2-15B-Instruct terletak pada strategi penjajaran diri yang tulen Keseluruhan proses latihan adalah terbuka, telus, dan sepenuhnya autonomi dan boleh dikawal. Model ini menjana beribu-ribu arahan melalui StarCoder2-15B sebagai tindak balas kepada penalaan halus model asas StarCoder-15B tanpa bergantung pada anotasi manual yang mahal.
Universiti Tsinghua mengambil alih dan YOLOv10 keluar: prestasi telah bertambah baik dan ia berada dalam senarai panas GitHub
Jun 06, 2024 pm 12:20 PM
Siri penanda aras YOLO sistem pengesanan sasaran sekali lagi menerima peningkatan besar. Sejak pengeluaran YOLOv9 pada Februari tahun ini, baton siri YOLO (YouOnlyLookOnce) telah diserahkan kepada penyelidik di Universiti Tsinghua. Hujung minggu lalu, berita pelancaran YOLOv10 menarik perhatian komuniti AI. Ia dianggap sebagai rangka kerja terobosan dalam bidang penglihatan komputer dan terkenal dengan keupayaan pengesanan objek hujung ke hujung masa nyata, meneruskan legasi siri YOLO dengan menyediakan penyelesaian berkuasa yang menggabungkan kecekapan dan ketepatan. Alamat kertas: https://arxiv.org/pdf/2405.14458 Alamat projek: https://github.com/THU-MIG/yo
Li Feifei mendedahkan hala tuju keusahawanan 'kecerdasan ruang': visualisasi bertukar menjadi wawasan, melihat menjadi pemahaman, dan pemahaman membawa kepada tindakan
Jun 01, 2024 pm 02:55 PM
Stanford Li Feifei memperkenalkan konsep baharu "kecerdasan ruang" buat kali pertama selepas memulakan perniagaannya sendiri. Ini bukan sahaja hala tuju keusahawanannya, tetapi juga "Bintang Utara" yang membimbingnya "bahagian teka-teki utama untuk menyelesaikan masalah kecerdasan buatan." Visualisasi membawa kepada pandangan; melihat membawa kepada pemahaman; Berdasarkan ceramah TED selama 15 minit Li Feifei, ia didedahkan sepenuhnya, bermula dari asal-usul evolusi kehidupan beratus-ratus juta tahun yang lalu, kepada bagaimana manusia tidak berpuas hati dengan apa yang telah diberikan oleh alam semula jadi kepada mereka dan membangunkan kecerdasan buatan, kepada bagaimana untuk membina. kecerdasan ruang dalam langkah seterusnya. Sembilan tahun yang lalu, Li Feifei memperkenalkan ImageNet yang baru dilahirkan kepada dunia di peringkat yang sama - salah satu titik permulaan untuk pusingan ledakan pembelajaran mendalam ini. Dia sendiri juga menggalakkan netizen: Jika anda menonton kedua-dua video, anda akan dapat memahami visi komputer selama 10 tahun yang lalu.
LLM sudah selesai! OmniDrive: Mengintegrasikan persepsi 3D dan perancangan penaakulan (terbaharu NVIDIA)
May 09, 2024 pm 04:55 PM
Ditulis di atas & pemahaman peribadi pengarang: Kertas kerja ini didedikasikan untuk menyelesaikan cabaran utama model bahasa besar multimodal semasa (MLLM) dalam aplikasi pemanduan autonomi, iaitu masalah melanjutkan MLLM daripada pemahaman 2D kepada ruang 3D. Peluasan ini amat penting kerana kenderaan autonomi (AV) perlu membuat keputusan yang tepat tentang persekitaran 3D. Pemahaman spatial 3D adalah penting untuk AV kerana ia memberi kesan langsung kepada keupayaan kenderaan untuk membuat keputusan termaklum, meramalkan keadaan masa depan dan berinteraksi dengan selamat dengan alam sekitar. Model bahasa besar berbilang mod semasa (seperti LLaVA-1.5) selalunya hanya boleh mengendalikan input imej resolusi rendah (cth.) disebabkan oleh had resolusi pengekod visual, had panjang jujukan LLM. Walau bagaimanapun, aplikasi pemanduan autonomi memerlukan
