如果用css来实现网页布局

叁歲伎倆 2022-06-17 00:08 241阅读 0赞

1.在css中有三种基本的定位机制：

1.普通文档流

2.浮动

3.定位

2.定位的话又可以分为两种：

1.绝对定位

2.相对定位

3.普通文档流：是指不使用其他的与排列和定位相关的特殊css规则时，各种元素的排列顺序。(默认是从上向下依次排列的)

1.块级元素以块的形式表现出来，并且和同级的元素依次竖直排列。

2.行内元素就和其他的元素共占一行。

4.普通文档流也可以被称为标准文档流。

5.浮动：

如果对一个元素设置了浮动，那么这个元素就会浮动起来，他后面的元素就会占据该元素原本的位置。并且后面元素的内容会被挤压出来。

常见的浮动属性：

1.float:left/right/none(将浮动元素移动到父元素的左边或者右边)

2.clear:both/left/right(设置清除浮动影响即如果后面的元素不想去占用被设置浮动的元素的位置，则可以对后面的元素设置clear属性)

3.一般情况下，直接设置clear:both属性

6.注意：设置了浮动的元素就会自动转化为块级元素，加了浮动的元素是没有宽和高的并且其父元素的高度也会塌陷，因为加了浮动的元素的宽和高是根据元素的内容动态设定的。需要自己再写高度。

7.解决父元素高度塌陷的办法：

1.给父元素也加上高度

2.给父元素也设置浮动(一般并不会用这种方法)

8.设置浮动的时候一般会遇到这几种情况：

1.给多个元素都设置左浮动，那么被设置左浮动的元素会依次从左向右展示(前提条件是所有设置左浮动的元素的总宽度不会超过父元素的宽度，否则的话就会在下一行显示)。

2.给元素一个设置左浮动一个设置右浮动，这种情况就是网页中很常见的两列布局样式，一个在左边一个在右边。

3.给一个元素设置左浮动的情况时，一般会出现在图文混排。

4.给一个元素设置右浮动，，没怎么见过。

9.设置浮动的话就会脱离了原本的标准文档流，一般情况下网页主体的布局都是用元素浮动实现的：

1.两列

2.三列

10.给元素设置浮动最常用的情况时在设置顶部的导航栏的时候，这种情况下一般都是给li元素设置左浮动就可以了，不过需要注意一点：一般情况下我们的导航栏都是可以超链接的，所以这时候要注意a标签的使用，因为a便签时行内元素，没有宽和高。某些情况下我们需要使用dispaly:block来将a标签设置为块级元素让其具有其父元素的高度。

ok,今天就先更新这些。后面继续。

发表评论取消回复

表情：

评论列表（有 0 条评论，241人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS 网页布局基础

阅读目录基础布局 1 一行布局 2 二行布局 3 一列布局 4 二列布局 5 混合布局

阳光穿透心脏的1/2处/ 2023年10月07日 20:04/ 0 赞/ 66 阅读

相关 css布局方式(CSS网页布局)

CSS网页布局有何技巧？ Example Source Code .left-blue \{ color: \369; \} 你可能立即知道这个类选择符是为左侧边栏的

╰半橙微兮°/ 2023年09月26日 13:10/ 0 赞/ 12 阅读

相关 html、css 实现网页布局（高度适应内容）

布局：排列页面中的区域；布局写起来不难，但是里面蕴含着许多基本知识我下面讲的布局方式，都是自适应的（若你要将布局全部定宽，看完本文，这对你来说更是没有难度了，把下文中代码出

╰+哭是因爲堅強的太久メ/ 2023年06月21日 03:44/ 0 赞/ 11 阅读

相关 CSS 网页布局

网页布局网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。 ![17d96443520bbf4facda9904c13a7d85

雨点打透心脏的1/2处/ 2022年09月12日 01:46/ 0 赞/ 286 阅读

相关如果用css来实现网页布局

1.在css中有三种基本的定位机制： 1.普通文档流 2.浮动 3.定位 2.定位的话又可以分为两种： 1.绝对定位 2.相对定位 3.普通文档流：是指

叁歲伎倆/ 2022年06月17日 00:08/ 0 赞/ 242 阅读

相关如何用CSS样式进行网页布局

1 分栏又称为分列，常见的布局分为： > > 一列布局两列布局三列布局混合布局 (1)一列布局：

一时失言乱红尘/ 2022年06月14日 06:09/ 0 赞/ 361 阅读

相关 DIV+CSS网页布局实例

一、效果预览说明：非常基础的IDV+CSS，实现了一般网站布局。CSS样式也比较基础，一些像定位等属性都没有使用。 ![在这里插入图片描述][20190316205

客官°小女子只卖身不卖艺/ 2022年03月07日 11:18/ 0 赞/ 558 阅读

相关 CSS完成网页经典布局

单列布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>一列

╰+攻爆jí腚メ/ 2022年02月24日 01:26/ 0 赞/ 276 阅读

相关 WEB标准与CSS实现网页布局

最近在学前端，今天整理一下web标准知识，不说了，下次继续整理，作业还没写完，要不然又要熬夜了。 1web标准一般认为，网页主要有三个部分组成：结构，表现，㛑行为，

末蓝、/ 2021年12月05日 05:19/ 0 赞/ 278 阅读

相关 Div+css网页布局（一）

Div是网页的块标记（一个div实际就是一行，行有高度height、宽度width、边框线border、背景色background-color等属性） Css文件是样式文件

曾经终败给现在/ 2021年09月02日 03:38/ 0 赞/ 489 阅读