网页常见样式(四)——网页布局(标准流、浮动、定位、Flex 布局技术)

94 阅读4分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第3天,点击查看活动详情

网页布局

布局技术

一、标准流

标准流(normal flow),也被称为文档流,是指在不借助任何特殊的css排列规则(默认情况下)元素的排布规则

  • 从上到下,从左到右
  • 不存在层叠现象

标准流元素的划分(根据元素的布局特性划分)

(1)块级元素

  • 独占一行
  • 可以设置宽高,width默认为父级元素宽度(100%),height默认为0
  • 常见的块级元素:div h1-h6 ul ol li dl dt dd form p

(2)行内元素

  • 一行可放置多个
  • 不能设置宽高,宽高由内容撑开
  • 常见的行内元素:span b strong i em ins del u

(3)行内块元素

  • 一行可放置多个
  • 可以设置宽高,默认宽高由内容撑开
  • 常见的行内块元素:Img input a

块级元素和行内元素的相互转换——display(显示模式)属性

取值效果
block元素转换为块级元素
inline元素转换为行内元素
inline-block元素转换为行内块元素

在标准流中,可以设置margin(外边距)、padding(内边距)属性对元素进行布局

标准流的缺点

1.给某一元素设置margin、padding属性时,会影响其后的元素,无法实现某些特定的布局。

2.非嵌套元素之间无法层叠

3.行内元素和行内块水平排列时,元素之间会出现大约6px的空白间隙,这是由于书写代码时,元素间的空白字符(换行符、空格或制表符)导致。

二、浮动

历史

float 属性最初只用于在一段文本内浮动图像, 实现文字环绕的效果;

早期的CSS标准中并没有提供好的左右布局方案, 因此在一段时间里面它成为网页多列布局的最常用工具;

image.png

float(浮动)属性

取值效果
none默认值,不浮动,为标准流
left左浮动,靠左排列
right右浮动,靠右排列

 浮动元素特性(float——浮漏特)

浮:加了浮动的元素盒子是浮起来的,漂浮在其他标准盒子之上

漏:浮动的盒子,把自己原来的位置给下面标准流的盒子,就是不占有原来的位置,是脱离标准流的,我们俗称 “脱标”

特:浮动的元素会具有行内块元素的特性—— 一行可放置多个,可以设置宽高,默认宽高由内容撑开。

float使用tips

image.png

1.浮动可以解决标准流中出现的空白间隙问题。

2.显示效果细节

  • 浮动常用于具有父级盒子的多个子级元素。浮动的盒子只会影响盒子后面的标准流不会影响前面的标准流。如果其中一个盒子浮动了,那么其他兄弟元素也应该浮动,以防止引起问题。因为浮动是脱标的,会影响下面的标准流元素,所以,浮动的元素需要一个标准流的父级盒子,取消对其他标准流的影响。

  • 创建浮动框,将其移动到一边直到左边缘或右边缘触及包含块(父级元素,但不会越出内边距padding的范围)或另一个浮动框(兄弟元素)的边缘。

  • 按元素代码顺序进行浮动,先浮动的更靠左/右。

  • 浮动的元素排列位置,跟上一个元素(块级)有关系。如果上一个元素有浮动,则A元素顶部会和上一个元素的顶部对齐;如果上一个元素是标准流,则A元素的顶部会和上一个元素的底部对齐。(行内块元素)

三、定位

一篇图文学会定位>>>戳进去看看

四、Flex布局

一篇图文学会Flex>>>戳进去看看

五、Grid布局

一、小米商城——商品展示

小米.gif

二、淘宝——右侧挂件

image.png