html页面的布局技术有哪些

青灯夜游
Lepaskan: 2021-12-03 11:13:37
asal
10464 orang telah melayarinya

html布局技术有:1、浮动布局技术,兼容性比较,但页面宽度不够时会影响布局;2、绝对定位布局技术;3、flex弹性布局技术,自适应好,高度能自动撑开;4、table-cell表格布局技术;5、grid网格布局技术。

html页面的布局技术有哪些

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

html页面的布局技术

一、浮动布局技术

    浮动布局  
浮动布局
Salin selepas log masuk

浮动布局的兼容性比较好,但是浮动带来的影响比较多,页面宽度不够的时候会影响布局。

二、绝对定位布局技术

    绝对定位布局  
绝对定位布局
Salin selepas log masuk

绝对定位布局快捷,但是有效性比较差,因为脱离了文档流。

三、flex弹性布局技术

    flex布局  
flex布局
Salin selepas log masuk

自适应好,高度能够自动撑开

四、table-cell表格布局技术

    table-cell表格布局  
表格布局
Salin selepas log masuk

兼容性好,但是有时候不能固定高度,因为会被内容撑高。

五、grid网格布局技术

    网格布局  
网格布局
Salin selepas log masuk

推荐教程:html视频教程css视频教程

Atas ialah kandungan terperinci html页面的布局技术有哪些. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
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
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!