个人网站风格,做网站维护承包合同,企业需求发布平台,专门做饮食加盟的网站目录 前言:
浮动布局#xff08;Float Layout#xff09;: 定位布局#xff08;Positioning Layout#xff09;: 1.传统布局: 1.1文档流布局:
1.1.1基本的布局方式:
1.1.2 块级元素:
1.1.3调整元素:
1.2浮动布局:
1.2.1浮动布局允许元素向左或向右浮动#xff0c;使…目录 前言:
浮动布局Float Layout: 定位布局Positioning Layout: 1.传统布局: 1.1文档流布局:
1.1.1基本的布局方式:
1.1.2 块级元素:
1.1.3调整元素:
1.2浮动布局:
1.2.1浮动布局允许元素向左或向右浮动使其周围的文本或其他元素环绕它。
1.2.2浮动元素会脱离正常的文档流但仍然占据空间并且会影响其他元素的布局。
1.2.3常用于实现多列布局、文本环绕图像等效果。
1.2.4需要注意清除浮动以避免布局问题如父元素高度塌陷。
1.3定位布局:
1.3.1定住指定位置:
1.3.1相对定位
1.3.1绝对定位
2.目前主流的Flex布局弹性盒模型:
2.1lex布局:
2.2Flex布局基于两条轴进行布局
2.3设置容器的 display 属性:
2.4Flex布局适用地方:
3.浮动篇:
3.1浮动的基本概念和用法:
3.1.1浮动方向
3.1.2脱离文档流
3.1.3边界行为
3.2浮动的应用:
3.2.1图文环绕
3.2.2水平布局
3.3浮动的注意事项:
3.3.1父元素高度塌陷
3.3.1元素重叠
4.定位篇(position):
4.1定位的基本概念和用法:
4.1.1绝对定位absolute
4.1.2相对定位relative
4.2定位的方向和距离:
4.2.1定位元素的基本操作:
4.2.2定位元素的使用方法:
4.3父相子绝技巧:
4.3.1布局技巧:
4.3.2常用技巧:
4.5z-index属性:
结语: 前言:
今天我们来分享一下关于浮动布局和定位布局,以下是对二者的一个介绍:
浮动布局Float Layout: 浮动布局在CSS中是一种非常重要的布局技术它允许元素沿着其容器的左侧或右侧浮动同时其他内容会环绕它。浮动最初是为了实现文本环绕图像的效果而设计的但随后它被广泛用于创建多列布局和各种复杂的页面布局。 当元素被设置为浮动时它会脱离正常的文档流但仍然会占据空间即它会影响布局。浮动元素之后的元素会围绕它流动这种特性使得浮动布局在实现多栏布局时特别有用。然而浮动布局也有一些挑战比如清除浮动clearing floats以确保父元素能够正确地包含其浮动的子元素。 浮动布局的优点包括灵活性高、能够实现复杂的布局效果以及响应式设计。但缺点也很明显比如需要额外注意清除浮动、布局容易受到外部因素影响等。 定位布局Positioning Layout: 定位布局是CSS中另一种强大的布局技术它允许开发者将元素精确地放置在页面上的任何位置。定位布局基于坐标系统其中元素的定位可以通过设置top、right、bottom和left属性来控制。 定位布局有两种主要类型相对定位relative positioning和绝对定位absolute positioning。相对定位是相对于元素在文档流中的原始位置进行定位而绝对定位是相对于最近的已定位祖先元素即设置了position属性为relative、absolute或fixed的元素进行定位。如果没有已定位的祖先元素绝对定位的元素将相对于初始包含块通常是视口或页面进行定位。 定位布局的优点在于它能够提供精确的布局控制使元素能够准确地出现在指定的位置。这种布局方式在实现需要精确对齐或重叠元素的复杂布局时特别有用。然而定位布局也有一些缺点比如需要额外注意定位上下文和层叠顺序z-index等问题。 1.传统布局: 1.1文档流布局:
1.1.1基本的布局方式:
这是最基本的布局方式其中网页元素按照其在HTML代码中的顺序从上到下、从左到右进行排列。
1.1.2 块级元素:
块级元素如 div, p 等默认独占一行而行内元素如 span, a 等则与其他行内元素并排显示。
1.1.3调整元素:
通过调整元素的 margin, padding, display, 和 line-height 等属性可以控制元素在页面上的位置和外观。
1.2浮动布局: 1.2.1浮动布局允许元素向左或向右浮动使其周围的文本或其他元素环绕它。
1.2.2浮动元素会脱离正常的文档流但仍然占据空间并且会影响其他元素的布局。
1.2.3常用于实现多列布局、文本环绕图像等效果。
1.2.4需要注意清除浮动以避免布局问题如父元素高度塌陷。
1.3定位布局: 1.3.1定住指定位置:
通过设置元素的 position 属性为 relative相对定位或 absolute绝对定位可以将元素定位在指定位置。
1.3.1相对定位
元素相对于其正常位置进行定位。即使移动了元素它仍然占据其原始空间。
1.3.1绝对定位
元素相对于最近的已定位祖先元素或相对于初始包含块如果没有已定位的祖先元素进行定位。绝对定位的元素不占据空间可以覆盖其他元素。
2.目前主流的Flex布局弹性盒模型:
2.1lex布局:
lex布局是一种现代的、灵活的布局方式允许容器中的项目以各种方式进行对齐、方向和顺序的控制。
2.2Flex布局基于两条轴进行布局
主轴默认为水平方向和交叉轴默认为垂直方向。
2.3设置容器的 display 属性:
通过设置容器的 display 属性为 flex 或 inline-flex可以启用Flex布局。然后可以使用各种Flex属性如 flex-direction, flex-wrap, justify-content, align-items 等来控制项目的布局和对齐方式。
2.4Flex布局适用地方:
Flex布局非常适合用于创建复杂的、响应式的布局特别是当需要在不同屏幕尺寸和方向上保持布局的一致性时。 3.浮动篇:
3.1浮动的基本概念和用法:
3.1.1浮动方向
float属性主要有两个值left和right分别表示元素向左浮动和向右浮动。
3.1.2脱离文档流
浮动元素会脱离其正常的文档流位置但仍然会占据空间不同于绝对定位的元素它们会从文档流中完全移除。这意味着浮动元素后面的内容会围绕浮动元素流动。
3.1.3边界行为
浮动元素会一直浮动直到它遇到父元素的边界或其他浮动元素。如果一行内空间不足浮动的元素会下移到下一行。
3.2浮动的应用:
3.2.1图文环绕
这是浮动的原始用途允许文本围绕图像流动。
3.2.2水平布局
利用浮动可以很容易地实现水平排列的盒子布局。相较于行内块元素使用浮动进行水平布局具有更好的性能和可控性。
3.3浮动的注意事项:
3.3.1父元素高度塌陷
如果父元素只包含浮动元素它可能会出现高度塌陷的情况因为浮动元素不参与父元素的高度计算。解决这个问题的一种方法是使用“清除浮动”的技巧例如添加一个空的块级元素并应用clear: both;样式。
3.3.1元素重叠
由于浮动元素会脱离文档流它们可能会与正常流中的其他元素重叠需要特别注意。
4.定位篇(position):
4.1定位的基本概念和用法:
4.1.1绝对定位absolute
元素会脱离正常的文档流并且相对于其最近的已定位祖先元素即设置了position属性为absolute、relative、fixed或sticky的元素进行定位。如果没有已定位的祖先元素它会相对于初始包含块通常是视口或页面进行定位。
4.1.2相对定位relative
元素相对于它在正常文档流中的位置进行定位。即使移动了元素它仍然占据其原始空间。这意味着其他元素不会填补它移动后留下的空间。
4.2定位的方向和距离:
4.2.1定位元素的基本操作:
定位元素可以通过top、right、bottom和left属性来指定其在各个方向上的偏移量。这些属性决定了元素相对于其定位上下文对于绝对定位是最近的已定位祖先元素对于相对定位是元素自身在正常文档流中的位置的位置。
4.2.2定位元素的使用方法:
这些属性通常需要与定位类型absolute或relative一起使用才有效。单独设置这些属性而不设置定位类型通常不会产生任何效果。 4.3父相子绝技巧:
4.3.1布局技巧:
“父相子绝”是一种常见的布局技巧其中父元素设置为相对定位而子元素设置为绝对定位。这样子元素会根据移动后的父元素的位置来定位自己而不会受到其他元素的影响。
4.3.2常用技巧:
这种技巧在实现一些复杂的布局效果时非常有用比如创建模态窗口、下拉菜单、提示框等。
4.5z-index属性:
当元素在页面上重叠时可以使用z-index属性来控制它们的堆叠顺序。z-index值越大的元素在堆叠顺序中越靠上因此会覆盖值较小的元素。
需要注意的是z-index属性只对设置了定位即position属性不为static的元素有效。此外具有相同z-index值的元素会按照它们在HTML代码中的顺序进行堆叠后出现的元素会覆盖先出现的元素。
结语:
今天的分享就先分享到这里了,这些内容都偏理论的知识了,不过学习就是这样需要持之以恒的坚持,莫道浮云遮蔽日,终有云开见日时。云城发韧,万里可期。我们一切的学习和努力无非是为了三个目标:解释问题,解决问题,预测问题。相信只要熬过这段低谷时光,自然会有未来的钟声敲响,我们是生生不息的火花,终将以灿烂为名,谢谢大家看到这里。
