前端——CSS(四)

1. 浮动(float)
1.1 传统网页布局的三种方式
网页布局的本质——用CSS来摆放盒子,把盒子摆放到相应位置。
CSS提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)。
·普通流(标准流)
·浮动
·定位
这三种布局方式都是用来摆放盒子的,盒子摆放到合适位置,布局自然就完成了
注意: 实际开发中,一个页面基本都包含了这三种布局方式(后面移动端学习新的布局方式)
1.2 标准流(普通流/文档流)
所谓标准流:就是标签按照规定好默认方式排列
1.块级元素会独占一行,从上向下排列顺序
·常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table
2.行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行
·常用元素:span、a、i、em等
以上都是标准流布局,我们前面学习的就是标准流,标准流是最基本的布局方式。
1.3 为什么需要浮动
提问:我们用标准流能很方便的实现如下效果吗?
1.如何让多个块级元素盒子水平排列成一行?
比较难,虽然转换为行内块元素可以实现一行显示,但是他们之间会有大的空白缝隙,很难控制
在这里插入图片描述
2.如

猜你喜欢

转载自blog.csdn.net/weixin_41545646/article/details/110010540