传统布局与流动布局
基本布局须知
💡首先我们来了解一下盒子模型与行内块元素
盒子模型
- 概念：
css定义的所有元素都可以拥有像盒子一样的外形和平面空间，它是css布局的基石
它规定了网页元素如何显示以及元素间相互关系。 - 盒子模型组成：
- 外边框——margin
- 边框——border
- 内边距——padding
- 内容——content
- 外边距叠加
盒模型会发生margin外边距叠加，叠加后的值会以最大边距为准。
现在我们将两个相邻的<div>元素分别设置了大小不同的margin外边距：
<style> .box { margin: 10px; padding: 20px; border: solid 2px #000; } .large-box { margin: 20px; } </style> <body> <div class="box"></div> <div class="large-box box"></div> </body> 复制代码
4.盒子计算
- content-box
content-box的计算方程式为：content+padding+border - border-box
border-box的计算方式为：元素的总宽高为设置的元素宽高
行内元素与块级元素
- 概念：
- 行内元素：行内元素是瘦子，可以在一行内一个接一个地挨着
- 块级元素：块级元素是胖子，一行内只能占一个块级元素
- 区别：
| 行内元素 | 块级元素 |
| 相邻的行内元素会排在同一行，会换行 | 块级元素独占一行 |
| 宽度随元素内容变化 | 宽度自动填充满其父元素的宽度 |
| 高度与宽度属性设置无效 | 高度与宽度设置有效 |
| 外边距与内边距只能设置左右 | 外边距与内边距可以随意设置 |
- 行内块元素：结合行内元素与块级元素的特性，即既有block的高宽特性与inline的行内特性
- 如何设置：
- 设置为行内元素：
display:inline 复制代码
- 设置为块级元素：
dispaly:block 复制代码
- 设置为行内块元素：
display:inline-block 复制代码
<style> div { width: 100px; height: 100px; text-align: center; background-color: brown; color: white; } .inline { height: 100px; width: 100px; } </style> <div>我是块级元素</div> <span class="inline">我是行内元素</span> <span class="inline">我也是行内元素</span> 复制代码
传统布局
文档流
- 概念：
文档流即在浏览器中的规则，将窗体自上而下 分成一行一行
并在每行中按照从左到右依次排放元素，称为文档流。 - 流动方向：
- inline元素从左到右，到达最右边才会换行。
- block元素从上到下，每一个都另起一行。
- inline-block也是从左到右。
脱离文档流
- 概念：
我们不只使用默认文档流来进行我们的布局，那样会很丑
所以我们可以使我们的元素脱离文档流 - 如何脱离文档流：
我们可以通过设置position与float属性来使元素脱离文档流 - 定位——position
- 相对定位
- 概念：元素以自我为基准进行定位，通过偏移移动至原来的位置上，也就是以自身为参照点
- 使用：
position:relative; 复制代码
- 元素框偏移某个距离，元素仍保持未定位前的形状，它原本所占的空间仍保留
- 绝对定位
- 概念：按照父元素及祖先元素来定位的
- 注意：
- 当他没有父级元素，那么他就根据浏览器来进行偏移
- 当祖先元素有定位的时候，那么就会以最近一级的有定位上级元素为参考来进行偏移
- 使用：
position:absolute; 复制代码
- 固定定位
- 概念：以浏览器可视窗口进行定位
- 使用：
position:fixed; 复制代码
- 定位后的边偏移
- top/bottom
- left/right
- 通过浮动脱离文档流
- 概念：浮动元素会脱离普通流脱离普通流的控制，移动到指定位置
- 使用：
float:left; float:right; 复制代码
- 注意：
- 浮动的盒子不再保留原来的位置，后面的普通流元素会顶上其位置
- 浮动的元素会一行内显示并且元素顶部对齐
- 浮动的元素具有行内块的特性
- 清除浮动
- 使用：
clear: both; 复制代码
- 为什么要清除浮动？
因为浮动元素不占用原文档的位置，会对后面的元素排版产生影响
