纠结了一晚上,关于CSS中Position属性_html/css_WEB-ITnose
static和relative的用法比较清晰,在此就不做讨论了,值得注意的是static定位,即默认没有定位的元素忽略 top, bottom, left, right 或者 z-index 声明;而relative定位的元素虽然没有脱离文档流,同样忽略 top, bottom, left, right声明,但是却z-index属性却可以起作用。
昨天主要纠结在absolute和fixed上,老师上课演示了用这两种定位方式将元素的right和bottom设置为0,在元素下方添加很多换行符,打开窗口时两种方式都是位于右下角,区别是当滚动条滚动的时候,fixed定位的元素依然会一直处在右下角,而absolute定位的元素却会停留在初始显示的那个位置,如图:
当时没多想就这么过去了,晚上自己做练习的时候发现上图这种用absolute定位的方式,虽然滚动条动的时候不会跟着走,但是直接用鼠标在窗口边缘拖动窗口大小的时候,却会跟着走,一直位于右下角,这就让我非常费解了。
随后去网上查阅资料的过程中,发现网上很多地方包括百度文库,百度经验上写的都有很基础的错误,很多地方写的都是absolute和fixed是相对于body定位,然而经过测试,如图:(红线为body边框,蓝线为html边框)
可以很清楚的看到,div块的边框是紧靠html标签边框而不是body。那么absolute定位是不是以html标签为基准呢,显然也不是,div下方还有很多换行,并不是紧靠html标签的。
由此可以说明,absolute定位和fix定位都是以浏览器窗口为基准的,我理解的区别是absolute定位是基于窗口的初始状态产生一个绝对定位的坐标,而fixed则是一直锁定在浏览器窗口上,不管窗口如何变化始终满足设定的定位。但是按这样的理解依然不能解释为什么absolute定位下,拖动窗口边缘放大缩小的时候div块会跟着变而不是留在原地。
最后问了老师之后得到回复说是因为拖动页面大小的时候会引起页面重绘,也就是说拖动大小的时候就相当于一直在重新打开窗口,终于是能够合理的解释上面的现象了,同时也解释了为什么拖动页面大小的时候会有些卡顿,而滚动条滚动的时候却流畅的多。
第一次写博客写的比较乱大家多包涵,主要是记录下来整个思考过程和理解,如果有哪里的理解不对或者大家有更简单明确的方式能够解释这个问题希望在评论中写出,谢谢!

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



Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang

Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-

Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.

Gaya lalai senarai bootstrap boleh dikeluarkan dengan mengatasi CSS. Gunakan peraturan dan pemilih CSS yang lebih spesifik, ikuti "Prinsip Jarak" dan "Prinsip Berat", mengatasi gaya lalai bootstrap. Untuk mengelakkan konflik gaya, lebih banyak pemilih yang disasarkan boleh digunakan. Sekiranya penindasan tidak berjaya, laraskan berat CSS adat. Pada masa yang sama, perhatikan pengoptimuman prestasi, elakkan terlalu banyak! Penting, dan tulis kod CSS ringkas dan cekap.

Fungsi muat naik fail boleh dilaksanakan melalui bootstrap. Langkah -langkah adalah seperti berikut: Memperkenalkan fail bootstrap CSS dan JavaScript; Buat medan input fail; Buat butang muat naik fail; mengendalikan muat naik fail (menggunakan FormData untuk mengumpul data dan kemudian hantar ke pelayan); gaya tersuai (pilihan).

Saiz senarai bootstrap bergantung kepada saiz bekas yang mengandungi senarai, bukan senarai itu sendiri. Menggunakan sistem grid Bootstrap atau Flexbox boleh mengawal saiz bekas, dengan itu secara tidak langsung mengubah saiz item senarai.

Bootstrap Menyediakan panduan mudah untuk menubuhkan bar navigasi: Memperkenalkan Perpustakaan Bootstrap untuk membuat bar navigasi Tambah Identiti Jenama Buat Pautan Navigasi Tambah Elemen Lain (Pilihan) Laraskan Gaya (Pilihan)

Untuk mengesahkan tarikh dalam bootstrap, ikuti langkah -langkah ini: memperkenalkan skrip dan gaya yang diperlukan; memulakan komponen pemilih tarikh; Tetapkan atribut data-BV-tarikh untuk membolehkan pengesahan; Konfigurasikan peraturan pengesahan (seperti format tarikh, mesej ralat, dll.); Mengintegrasikan rangka kerja pengesahan bootstrap dan mengesahkan input tarikh secara automatik apabila borang dikemukakan.
