转自：https://blog.csdn.net/duang0626/article/details/75093636 CSS中几种控制页面布局的定位机制 对于web的初学者来说，CSS中的几种定位方式经常让人摸不着头脑，从而达不到想要的页面布局效果，我去年学习web编程的时候就对这个一知半解，今天，回过头来再次学习web编程，趁有时间就好好总结一下CSS中的几种定位方式，也当自己再学习巩固一下。 CSS中包含三种控制页面布局的定位机制：普通流、相对定位、绝对定位。在CSS中通过position属性表明定位机制。此外还可以使用float属性来让元素浮动。 普通流（文档流） 相应语法 （默认） position：static； 所谓的普通流就是根据块级元素以及内联元素自身的属性来进行布局，而不人为的进行控制。每个块级元素都换行显示，每个项目都显示在前一个项目的下一行。即使你制定了盒子的宽度，并且也有足够的宽度让两个元素并排显示，他们还是不会出现在同一行。这是浏览器处理HTML元素的默认方式，不必使用CSS属性表明元素应该出现在普通流里面。 参考：对于常见的块级元素以及内联元素的区分请点击 Here 以下的所有示例都使用此HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name = "author" content = "D_kelo"> <link href="./position_style.css" rel="stylesheet" type="text/css"/> <title>Happy kitchen</title> </head> <body> <div id="div1"> Div1</div> <div id="div2"> Div2</div> <div id="div3"> Div3</div> </body> </html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
