前端-布局总结

1. 显示模式

显示模式：标签（元素）的显示方式。

作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容。

块级元素  block

1. 独占一行
2. 宽度默认是父级的100%
3. 添加宽高属性生效

行内块元素 inline-block

1. 一行可以显示多个
2. 设置宽高属性生效
3. 宽高尺寸也可以由内容撑开行内块元素

行内元素  inline

1. 一行可以显示多个
2. 设置宽高属性不生效
3. 宽高尺寸由内容撑开

转换显示模式

属性名：display   属性值：

1. 盒子模型
   1. 盒子模型 – 组成

作用：布局网页，摆放盒子和内容。

1. 1. 盒子模型重要组成部分：
2. 内容区域 – width & height
3. 内边距 – padding（出现在内容与盒子边缘之间）

作用：设置 内容 与 盒子边缘 之间的距离。

属性名：padding / padding-方位名词 (顺时针赋值)

1. 默认情况
   1. 盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸
   2. 结论：给盒子加 border / padding 会撑大盒子
2. 解决
   1. 手动做减法，减掉 border / padding 的尺寸
   2. 內减模式：box-sizing: border-box

1. 边框线 – border

属性值：边框线粗细 线条样式 颜色（不区分顺序）

常用线条样式 solid(实线),dashed(虚线),dotted(点线)

属性值：边框线粗细 线条样式 颜色（不区分顺序）

1. 外边距 – margin（出现在盒子外面）

作用：拉开两个盒子之间的距离

提示：与 padding 属性值写法、含义相同

技巧：版心居中 – 左右 margin 值 为 auto（盒子要有宽度）

1. 1.  清除默认样式

清除标签默认的样式，比如：默认的内外边距为0。//通配符选择器*{}

1. 1. 盒子模型 – 圆角  border-radius

作用：设置元素的外边框为圆角。

属性值：数字+px / 百分比  (顺时针赋值)

常见应用

1. 正圆形状:给正方形盒子设置圆角属性值为 宽高的一半 / 50%
2. 胶囊形状:给长方形盒子设置圆角属性值为 盒子高度的一半

1. 1. 盒子模型 – 阴影  box-shadow

作用：给元素设置阴影效果

属性值：X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影

X 轴偏移量 和 Y 轴偏移量 必须书写 默认是外阴影，内阴影需要添加 inset

1. 1. 盒子模型 – 元素溢出  overflow

作用：控制溢出元素的内容的显示方式。

1. 1.  外边距问题 – 合并现象

场景：垂直排列的兄弟元素，上下 margin 会合并

现象：取两个 margin 中的较大值生效

1. 1. 外边距问题 – 塌陷问题

场景：父子级的标签，子级的添加 上外边距 会产生塌陷问题

现象：导致父级一起向下移动

解决方法：

1. 取消子级margin，父级设置padding
2. 父级设置 overflow: hidden
3. 父级设置 border-top
   1. 行内元素 – 内外边距问题

场景：行内元素添加 margin 和 padding，无法改变元素垂直位置

解决方法：给行内元素添加 line-height 可以改变垂直位置

1. 布局
   1. 标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则

例如：块元素独占一行，行内元素可以一行显示多个。

1. 1. 浮动  float

作用：让块元素水平排列。

属性值:  left：左对齐       right：右对齐

特点：

1. 浮动后的盒子顶对齐
2. 浮动后的盒子具备行内块特点
3. 浮动后的盒子脱标，不占用标准流的位置
   1. 1. 清除浮动

场景：子级浮动，父级没有高度，子级无法撑开父级高度，影响布局效果 

解决方法：清除浮动（清除浮动带来的影响）

1. 1. Flex布局

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性

1. 注意，设为 Flex 布局以后（display：flex|inline-flex），子元素的 float、clear 和 vertical-align属性将失效。
   1. 1. 作用

网页布局---实现子元素标签在父元素标签中的空间排列

1. 1. 1. 属性
2. 父属性：

display:flex; //定义 flex 弹性盒子布局模型

flex-direction--------主轴方向（横向）

flex-direction:row| row-reverse | column |column-reverse

1. row(默认值):主轴--水平；起点--左端
2. row-reverse:主轴--水平；起点--右端
3. column:主轴--垂直；起点--上沿
4. column-reverse:主轴--垂直；起点--下沿

flex-wrap ------------换行

flex-wrap:nowrap | warp | wrap-reverse

1. nowrap(): 不换行
2. wrap: 换行，第一行在上方
3. wrap-reverse: 换行，第一行在下方

flex-flow-------------主轴方向+换行

flex-flow:<flex-direction><flex-wrap>

justify-content-------主轴对齐方式

justify-content: flex-start | flex-end | center |space-between | space-around |

space-evenly

1. flex-start(默认值): 左对齐
2. flex-end: 右对齐
3. center: 居中
4. space-between: 均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点
5. space-around: 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框
6. 的间隔大一倍
7. space-evenly:均匀排列每个元素，每个元素之间的间隔相等

align-items-----------交叉轴对齐方式

align-items: flex-start | flex-end | center | baseline | stretch

1. flex-start: 交叉轴的起点对齐
2. flex-end: 交叉轴的终点对其
3. center: 交叉轴的中点对齐
4. baseline: 项目的第一行的文字的基线对齐
5. stretch(默认值): 如果项目未设置高度或设为 auto，将占满整个容器的高度

align-content---------多根轴线对齐方式

（如果项目只有一根轴线，该属性不起作用）

align-content: flex-start | flex-end | center |space-between | space-around | stretch

1. flex-start: 交叉轴的起点对齐
2. flex-end: 交叉轴的终点对其
3. center: 交叉轴的中点对齐
4. space-between: 均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点
5. space-around: 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框
6. 的间隔大一倍
7. space-evenly: 均匀排列每个元素，每个元素之间的间隔相等
8. stretch(默认值): 轴线占满整个交叉轴

1. 子属性：

order：子元素排列顺序---属性值-<integer>数字(1|2|3|...)

数字越小排列顺序越前,一般默认值都是 0（盒子默认值都相等）

flex:子元素占据的空间比例--flex-grow, flex-shrink 和 flex-basis 的简写

默认值为 0 1 auto

1. flex: none | <flex-grow><flex-shrink> | <flex-basis>
2. flex-grow: 定义项目放大比例，默认为 0--存在剩余空间，也不放大
3. flex-shrink: 定义项目的缩小比例，默认为 1
   1. 1. 特点：

父元素定义为 flex 属性后，所有的子元素都会横向排列，并且子元素的宽度会

根据子元素的内容自动调整

1. 1. 定位

定位：将盒子放在页面任意指定位置

1. 1. 1. 定位的属性：

position：relative|absolute|fixed

1. relative：相对定位，相对于自己原理的位置进行定位
2. absolute：绝对定位，相对于父元素进行定位
3. 情景1：如果父级没有定位，相对于body进行定位
4. fixed：固定定位，相对于浏览器窗口进行定位

定位位移：px 像素 %百分比  (此处上下左右指的是盒子的上下左右边框)

1. top：距离上边的距离------下正上负
2. bottom：距离下边的距离-----上正下负
3. left：距离左边的距离-------右正左负
4. right：距离右边的距离------左正右负

总结：

        1、相对定位：相对于自己原理的位置进行定位，不会脱离文档流，位置空间不会释放

        2、绝对定位：相对于最近的一个定位祖先进行定位，如果没有相对于body进行定位，会脱离文档流，位置空间释放

        3、子绝（绝对定位absolute）父相（相对定位relative）

        4、固定定位，相对于浏览器窗口进行定位，会脱离文档流，位置空间释放

        5.定层-----z-index：数字 ------数字越大盒子越上面（绝对定位使用）

1. 补充内容

总结-----overflow

        overflow: hidden;-----溢出隐藏

        overflow: scroll;-----文本溢出产生滚动条

        overflow: auto;-----当文本溢出时产生滚动条，不溢出则不显示

overflow:hidden----解决塌陷问题；清除浮动干扰时，写在父级元素里

浮动干扰问题描述：在使用浮动布局时，可能会出现一些干扰问题，导致页面布局出现不良影响。例如，多个浮动元素堆叠时可能会导致它们之间的间距产生错误、元素父容器高度被压缩、文字环绕效果不理想等等。

解决这些浮动干扰问题的方法包括：

清除浮动：通过在父容器中添加额外的、用于清除浮动的元素（如<div>）来解决干扰问题；-----------------overflow:hidden

（补充）

使用 flexbox 布局：Flexbox（flex弹性布局方式） 是一种新的布局方式，可以更方便地解决浮动干扰问题；

使用网格布局（Grid）：类似于 Flexbox，网格布局也提供了一种新的、更强大的布局方式，可以解决浮动带来的问题。

塌陷问题描述：CSS 中的 “坍塌”（collapsing）问题通常指的是元素的内边距和外边距在某些情况下无法按预期的方式进行叠加，导致元素与其父元素或相邻元素的外边距合并成一个单一的外边距，从而导致元素的定位出现偏差。

具体来说，坍塌现象主要有两种情况：

上下外边距的合并：当一个元素的顶部外边距和下方兄弟元素的外边距相遇时，两个外边距会合并成一个单一的较大的外边距。

父子元素外边距的合并：当一个元素的顶部外边距和其第一个子元素的顶部外边距相遇时，两个外边距中的较大的一个会被应用到父元素上，而不是被保留在子元素中。

要解决这些坍塌问题，可以采用以下方法：

使用 padding 属性代替父元素的外边距margin或者给父元素添加 overflow: hidden 样式。

（补充）

给相邻的元素添加边框或内边距，以防止它们的外边距合并。对于相邻的元素之间有间隔的情况，可以通过使用 margin-top 或 margin-bottom 来控制它们的外边距，从而避免合并。

对于外边距合并无法避免的情况，可以使用伪元素或空元素占据必要的空间来解决外边距合并的问题。