CSS浮动、定位、父容器塌陷问题
怎么说呢,从接触前端起,到现在已经有三个月了,这么长时间的学习呢,我的水平依然一般,前几天参加了IFE2017,下面总结一下对CSS中浮动、定位、分列布局、父容器塌陷问题的一些心得。
首先,浮动和定位是CSS中布局的基础,通过浮动和定位,可以实现对每一个盒模型精确到像素级别的控制,可见其重要性。
先谈谈浮动:
在HTML的文档对象模型里,采用的是流式布局,也就是说,块级元素是独占一行的,想让块级元素并排,主要是两种办法,一种是在CSS里设置块级元素的display为inline-block。但是很多时候并不适合用这种办法,更多时候我们会采用浮动的办法。
浮动,主要有两种float:left;和float:right;浮动可以让块级元素脱离标准文档流,可以理解成为定义了浮动的元素,就要向所定义方向去移动,直到被阻挡住或者碰到了父容器边界。如果当行剩宽度不足,那么所浮动的盒子,就会浮动到下一行。浮动为实现页面布局提供了一种解决方案。
但是,不能忽略的是,有时候通过简简单单的浮动不能达到我们对界面布局的需求。这时候定位的重要性就体现了出来,定位可以分为四种:relative(相对定位)、absolute(绝对定位)、fixed(固定定位)、static。当我们不对元素应用定位属性时,就相当于static。
那么,如何理解relative定位呢?应用了relative定位的元素(盒子模型)不脱离标准文档流,可以对它设定top、left、right、bottom值,实现对元素(盒子模型)相对于原来位置的微调,top即元素相对于原来的位置下移(可以设定负值,作用相当于设置正值bottom),left是元素相对于原来的位置右移。相同的,right为左移,bottom是上移。
absolute定位:应用了absolute定位的元素会脱离文档流,好像它从来没有存在过,这时它的定位是相对于他的应用了relative定位的祖先元素而言的。而且它还有一个很重要的特性:就是会根据设定的位移值实现“跨越”,什么意思呢?就是说,对其设定top、left、right、bottom是相对于他的祖先元素(盒子)的边界而言的。如果对其设定哪个位移方向,此元素(盒子)会先移动到那个方向的边界,然后相对于边界去移动。
fixed定位:fixed定位同样是脱离了标准文档流,不过他是相对于浏览器的窗口而言的,不会随着滚动条或者是界面的移动而改变,同样可以设定top、left、right、bottom值。
至于分列布局,我个人常用的方法有以下几种:
1、如果是分两列布局,可以同时对两个盒子应用浮动来进行布局,可以设定左右两个盒子自己的宽度或者是宽度百分比。
2、同样是分两列布局,也可以对左边的盒子应用左浮动布局,对右边的盒子应用定位或者设置它的margin值来定位。
3、对于三列布局,最好采用浮动加定位的方法,对于左右两侧的盒子进行浮动处理,对于中间元素(盒子)进行设置其左右margin来实现定位。
必须明白的是,浮动这一伟大的创举,可能会导致父容器塌陷,也就是说,当容器内的全部元素浮动(会导致父容器高度为零)或者内部不浮动的元素不足以撑起父容器时,父容器高度会为0或者不足以满足我们对页面布局的要求,那么,我们必须想一些办法来解决这儿问题,我这有几个办法:
1、给父容器设置一个高度
2、设置父容器overflow:hidden或者overflow:auto;
overflow:hidden; overflow:auto;
3、设置父元素浮动(不推荐)
4、设置空元素对其(clearfix:both)
5、给父元素应用以下样式:
.clearfix:before, .clearfix:after { content:""; display:table; } .clearfix:after { clear:both; }
总结来说,对于给网页中元素的布局,经常需要浮动和定位一起来用,综合起来,方能达到我们需要的效果。
以上就是我这段时间来对于CSS定位、浮动的一些小小体会,可能会有错误在里面,希望大家可以给我提出来,方便我们大家一同进步,总结这些东西,看了许多大佬的文档,所以很多东西借鉴了大佬的意见,说出来自己的一些理解,同时加深自己对其间知识体悟理解。希望大家在前端之路上一同努力,每天都有进步!
更多CSS浮动、定位、父容器塌陷问题 相关文章请关注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

Ini adalah jawatan ke -3 dalam siri kecil yang kami lakukan dalam kebolehcapaian bentuk. Jika anda terlepas jawatan kedua, lihat "Menguruskan Fokus Pengguna dengan: Fokus-Visible". Dalam

Tutorial ini menunjukkan mewujudkan bentuk JavaScript yang berpandangan profesional menggunakan rangka kerja pintar (nota: tidak lagi tersedia). Walaupun kerangka itu sendiri tidak tersedia, prinsip dan teknik tetap relevan untuk pembina bentuk lain.

CSS box-shadow dan garis besar sifat mendapat tema.json Sokongan dalam WordPress 6.1. Let ' s melihat beberapa contoh bagaimana ia berfungsi dalam tema sebenar, dan pilihan apa yang kita perlu gunakan gaya ini ke blok dan elemen WordPress.

Membina editor teks sebaris tidak remeh. Proses ini bermula dengan membuat elemen sasaran yang boleh diedit, mengendalikan potensi pengecualian syntaxError di sepanjang jalan. Membuat editor anda Untuk membina editor ini, anda perlu mengubahsuai kandungan secara dinamik

Sekiranya anda baru -baru ini mula bekerja dengan GraphQL, atau mengkaji semula kebaikan dan keburukannya, anda tidak akan ragu -ragu mendengar perkara seperti "Graphql tidak menyokong caching" atau

API Peralihan Svelte menyediakan cara untuk menghidupkan komponen apabila mereka memasuki atau meninggalkan dokumen, termasuk peralihan svelte adat.

Artikel ini meneroka skrip pembina bentuk PHP teratas yang terdapat di Envato Market, membandingkan ciri -ciri, fleksibiliti, dan reka bentuk mereka. Sebelum menyelam ke dalam pilihan tertentu, mari kita faham apa pembina bentuk PHP dan mengapa anda menggunakannya. Borang PHP

Tutorial ini membimbing anda melalui membina sistem muat naik fail menggunakan Node.js, Express, dan Multer. Kami akan merangkumi muat naik fail tunggal dan berganda, dan juga menunjukkan menyimpan imej dalam pangkalan data MongoDB untuk mendapatkan semula kemudian. Pertama, sediakan Projek anda
