网页的三种布局
自然布局
遵循元素自身的特性,在整个页面中,按照html的书写顺序,块级元素从上到下排列,行内元素从左到右排列,宽度达到最大值会自动折行。
浮动布局/流动布局
通过浮动float这个属性,改变元素的排列方式,可以让所有的元素在一行显示。
层布局
通过定位的属性,改变元素的位置,让元素层叠显示。
文档流
元素遵循自身的属性,根据html的书写顺序,块级元素从上到下排列,行内元素从做到右排列,宽度达到最大值会自动折行。
<div>div1</div> <div>div2</div> <div>div3</div> <span>span</span> <i>i</i>
浮动的属性
float:left; /*左浮动*/ float:right; /*右浮动*/ float:none; /*设置为不浮动*/ float:inherit; /*默认继承父级元素的浮动方式*/
认识浮动
浮动这个属性诞生其实只是用来实现一个简单的文字环绕图片而已,仅此而已。而我们目前用浮动实现页面布局本不是浮动该干的事情。
浮动的作用
会使元素向左或向右移动,其周围的元素也会重新排列。
浮动的元素可以左右移动,直到他的边缘碰到父级元素的边缘或另一个浮动元素的边缘
浮动的本质是什么?
浮动就是带有方向的display:inline-block(将元素转为行内块级元素)的属性
display:inline-block从某种意义上的作用就是让几个块级元素在一行显示
但是只要转为行内块级元素,浏览器就会读取代码之间的空格,在浏览器中解析为一段小的间距,那我们就要删除html代码之间的空格,很麻烦,但是浮动不会出现inline-block的问题,所以我们用浮动去代替inline-block。
浮动的应用
第一个作用:让几个盒子在一行显示
<style> li{ width: 100px; height: 100px; background: orange; margin:10px; float: left; font-size: 36px; /*float: left; 从浮动的盒子中第一个盒子开始,从左边开始,从左到右依次显示 float: right; 从右边开始,从第一个盒子开始,从右到左依次显示 */ } </style> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>
第二个作用:让盒子靠右显示
<style> div{ width: 600px; height: 300px; background: blue; } div p{ width:300px; height:50px; background: yellow; float: right; } </style> <div> <p>文字</p> </div>
|