Rumah hujung hadapan web tutorial css CSS浮动、定位、父容器塌陷问题

CSS浮动、定位、父容器塌陷问题

Feb 27, 2017 pm 03:00 PM

  怎么说呢,从接触前端起,到现在已经有三个月了,这么长时间的学习呢,我的水平依然一般,前几天参加了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;
Salin selepas log masuk

 

  3、设置父元素浮动(不推荐)

  4、设置空元素对其(clearfix:both)

  5、给父元素应用以下样式:

.clearfix:before,
.clearfix:after
{
    content:"";
    display:table;
}
.clearfix:after
{
    clear:both;
}
Salin selepas log masuk

  总结来说,对于给网页中元素的布局,经常需要浮动和定位一起来用,综合起来,方能达到我们需要的效果。

  以上就是我这段时间来对于CSS定位、浮动的一些小小体会,可能会有错误在里面,希望大家可以给我提出来,方便我们大家一同进步,总结这些东西,看了许多大佬的文档,所以很多东西借鉴了大佬的意见,说出来自己的一些理解,同时加深自己对其间知识体悟理解。希望大家在前端之路上一同努力,每天都有进步!

更多CSS浮动、定位、父容器塌陷问题 相关文章请关注PHP中文网!


Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Membina aplikasi Ethereum menggunakan redwood.js dan fauna Membina aplikasi Ethereum menggunakan redwood.js dan fauna Mar 28, 2025 am 09:18 AM

Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum

Vue 3 Vue 3 Apr 02, 2025 pm 06:32 PM

Ia ' s! Tahniah kepada pasukan Vue untuk menyelesaikannya, saya tahu ia adalah usaha besar dan lama datang. Semua dokumen baru juga.

Bolehkah anda mendapatkan nilai harta CSS yang sah dari penyemak imbas? Bolehkah anda mendapatkan nilai harta CSS yang sah dari penyemak imbas? Apr 02, 2025 pm 06:17 PM

Saya mempunyai seseorang yang menulis dengan soalan yang sangat legit ini. Lea hanya blog tentang bagaimana anda boleh mendapatkan sifat CSS yang sah dari penyemak imbas. That ' s seperti ini.

Sedikit di CI/CD Sedikit di CI/CD Apr 02, 2025 pm 06:21 PM

Saya '

Kad yang disusun dengan kedudukan melekit dan sasaran sass Kad yang disusun dengan kedudukan melekit dan sasaran sass Apr 03, 2025 am 10:30 AM

Pada hari yang lain, saya melihat sedikit ini sangat indah dari laman web Corey Ginnivan di mana koleksi kad timbunan di atas satu sama lain semasa anda menatal.

Menggunakan Markdown dan Penyetempatan di Editor Blok WordPress Menggunakan Markdown dan Penyetempatan di Editor Blok WordPress Apr 02, 2025 am 04:27 AM

Jika kita perlu menunjukkan dokumentasi kepada pengguna secara langsung dalam editor WordPress, apakah cara terbaik untuk melakukannya?

Membandingkan penyemak imbas untuk reka bentuk responsif Membandingkan penyemak imbas untuk reka bentuk responsif Apr 02, 2025 pm 06:25 PM

Terdapat beberapa aplikasi desktop ini di mana matlamat menunjukkan laman web anda pada dimensi yang berbeza pada masa yang sama. Oleh itu, anda boleh menulis

Mari kita gunakan (x, x, x, x) untuk bercakap mengenai kekhususan Mari kita gunakan (x, x, x, x) untuk bercakap mengenai kekhususan Mar 24, 2025 am 10:37 AM

Saya hanya berbual dengan Eric Meyer pada hari yang lain dan saya teringat cerita Eric Meyer dari tahun -tahun pembentukan saya. Saya menulis catatan blog mengenai kekhususan CSS, dan

See all articles