Css设置HTML页面div的浮动方式

 时间:2024-11-15 17:18:32

如果您使用表格来对页面布局,那么可能您訇咀喃谆将用不到float浮动,如果您使用到div来对页面进行布局,float浮动方式将是每时每刻都在使用到。

工具/原料

CSS

HTML

方法/步骤

1、创建一个使用div来布局的页面。

Css设置HTML页面div的浮动方式

2、并在页面中添加div,用来对网页进行布局。div可以根据您的需求来进行嵌套,只要您处理好嵌套层次,网页就能正常显示。

Css设置HTML页面div的浮动方式

3、由于溱碳叛鹤前端开发软件写html页面,并没有错误提示,所以您需要注意一下,您的页面是否出现了div嵌套时候没有关闭的标签,一旦出现没有关闭的标签,您的页面在显示的时候,将出现混乱。

Css设置HTML页面div的浮动方式

4、创建或是引用一个您已经创建的CSS文件,将HTML文件写入到CSS样式文件中。这样做有利于代码的重用。

Css设置HTML页面div的浮动方式

5、为创建的div创建一个class或是id,使CSS可以找到它,并使用CSS样式对其进行渲染。

Css设置HTML页面div的浮动方式

6、接下来,您可以在您之前创建或是已经引入的CSS文件的开始写样式。

Css设置HTML页面div的浮动方式

7、在样式中,您需要设置DIV的宽度与高度,因为没有背景或是边框,很难对div进行调整水貔藻疽,您可以添加一个背景或是边框,但是边框要占用样式,如果您将来将页面调整得差不多了,去掉边框后需要再对页面进行微调。

Css设置HTML页面div的浮动方式

8、因为div已经有了边框或是背景,那么您可以通过添加float对其进行控制。这样当您添加了float后,即可简单div位置的变化。

Css设置HTML页面div的浮动方式

9、当您设置float:left的时候,您的div将左浮动。

Css设置HTML页面div的浮动方式

10、如果您设置float:right的时候,您的div将右浮动。

Css设置HTML页面div的浮动方式

11、浮动方式就只有左浮动或是右浮动或是不浮动,float:center,是错误的,没有居中浮动。

js如何让页面所有的span标签内容加粗显示 css字体居中怎么设置 如何在vs2019已有项目里面创建新的项目 vue怎么使用element-ui的Icon图标组件 eclipse 执行 servlet
热门搜索
划船图片 苏格兰折耳猫图片 闺蜜动漫头像 动漫美女被虐 图片大全美女