传统网页布局三种方式

简介: 传统网页布局三种方式

1、传统网页布局的三种方式

2、标准流是什么

3、用这个作为标准流很难做

4、这样用标准流很难做,标准流

5、使用浮动

6、行内元素,用inline-block;

7、如何实现两盒盒子左右浮动

8、这些左右布局用的是浮动来做的

9、什么是浮动

10、浮动案例

11、浮动的特性

12、浮动的特性

13、浮动特性重难点

14、浮动的特性,浮动元素都会有行内块元素的特性

15、常见的标准流的父元素排列上下位置

16、浮动的盒子只会影响浮动盒子的标准流

17、为什么要清楚浮动

18、不给父盒子高度有问题吗?

19、为什么要清除浮动:

19.1

现在在这里显示了,

这是想要的效果

19.2 这是现在变成高度,父类,没有加高度就会变成这样

20、因为前面浮动的元素不建议使用高度

21、不给高度,会影响下面的盒子

22、有高度,就不需要清除浮动了

23、不加高度如何清除

24、清除浮动的方法

25、第一种,在最后一个盒子添加一个空的元素

27、clear:both

28、另一种清除浮动的方法是给父元素添加overflow:hidden

29、

给父元素添加clearfix就行


相关文章
|
3月前
|
前端开发 JavaScript
网页简单布局之结构与表现原则分享
网页简单布局之结构与表现原则分享
92 9
|
8月前
|
开发者 UED 容器
与传统的块级和行内布局相比,Flexbox为Web开发者提供了更加灵活、高效的布局方式
【6月更文挑战第10天】Flexbox是CSS3的弹性盒子布局,提供灵活、高效的网页布局解决方案。其特点包括灵活性、响应式和易理解,能适应不同屏幕尺寸和设备。核心概念有容器和项目,常用于导航栏、卡片布局、响应式设计、表格和表单布局。关键属性如flex-direction定义主轴方向,justify-content和align-items控制对齐,flex属性处理伸缩,order调整顺序。通过响应式设计和兼容性考虑,Flexbox助力创建优质、适应性强的Web界面。
50 0
|
9月前
|
编解码 前端开发 UED
前端布局方式及其优缺点
前端布局方式及其优缺点
94 1
|
9月前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
编解码
什么是响应式设计?响应式设计的基本原理是什么?如何做?
什么是响应式设计?响应式设计的基本原理是什么?如何做?
192 0
|
前端开发
几种布局方式与各自优点
几种布局方式与各自优点
74 0
|
前端开发 UED
前端网页布局方式及案例
前端网页布局方式及案例
258 0
|
Web App开发 编解码 前端开发
网页布局方式
网页布局方式
120 0
|
前端开发
传统布局的那些事
首先我们来链接一下css的三种定位机制分别是普通流,浮动,定位
87 1

热门文章

最新文章