前端页面布局基础💕
这是我参与11月更文挑战的第11天，活动详情查看：2021最后一次更文挑战
传统布局与流动布局
基本布局须知
💡首先我们来了解一下盒子模型与行内块元素
盒子模型
-
概念：
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>
-
盒子计算
-
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; -
为什么要清除浮动？
因为浮动元素不占用原文档的位置，会对后面的元素排版产生影响
-
flex布局
区别与特性
-
与传统布局对比：
-
传统布局：基于盒状模型，依赖 display，position，float属性，实现特殊布局很繁琐
-
flex布局：它是一种一维的布局模型，它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力，所以它能很简单地实现一些特殊布局。
-
-
特性与概念：
-
任何一个容器（div）都可以使用flex布局
-
采用flex布局的元素被成为flex容器，所有子元素都会成为它的成员。
-
采用flex的元素其float，clear都会失效
-
一维的特性使其拥有两根轴，水平的主轴与垂直的交叉轴（默认主轴排列）
-
容器属性的使用
-
flex-direction属性
flex-direction属性决定主轴的方向
属性值 作用 row 主轴为水平方向，起点在左端 row-reverse 主轴为水平方向，起点在右端 colmun 主轴为垂直方向，起点在上端 colmun-reverse 主轴为垂直方向，起点在下端 -
flex-wrap属性
flex属性定义在一条轴线上子成员发生拥挤，如何换行排列。
属性值 作用 nowrap 不换行（将子成员宽度缩小） wrap 换行且第一行在上方 wrap-reverse 换行且第一行在下方 -
justify-content属性 justify-content属性定义了项目在主轴上的对齐方式。
属性值 作用 flex-start 左对齐 flex-end 右对齐 center 居中 space-between 两端对齐，且间隔相等 space-around 每个子成员间隔相等 -
align-items属性
align-items属性定义项目在交叉轴上如何对齐。
属性值 作用 flex-start 交叉轴的起点对齐 flex-end 交叉轴的终点对齐 center 交叉轴的中点对齐 baseline 项目的第一行文字的基线对齐 stretch 如果项目未设置高度或设为auto，将占满整个容器的高度 -
align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
属性值 作用 flex-start 与交叉轴的起点对齐 flex-end 与交叉轴的终点对齐 center 与交叉轴的中点对齐 baseline 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍 stretch 轴线占满整个交叉轴 #### 项目属性的使用 -
order：
定义项目的排列顺序。数值越小，排列越靠前，默认为0，可以是负数
order:-1; -
flex-grow：
定义项目的放大比例，默认为
0，即如果存在剩余空间，也不放大如果所有项目的
flex-grow属性都为1，则它们将等分剩余空间flex-grow:1; -
flex-shrink:
属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的
flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的
flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。flex-shrink:0; -
flex-basis:
指定了子项在容器主轴方向上的初始大小，优先级高于自身的宽度width
flex-basis:100%; -
align-self
允许单个项目有与其他项目不一样的对齐方式，可覆盖
align-items属性。默认值为
auto，表示继承父元素的align-items属性align-self:flex-end;
转载自:https://juejin.cn/post/7029899340193726494