详解CSS布局

Posted 2020-12-25 gitnull

CSS页面布局允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。主要对文档流的改变进行布局。假设你已经掌握了CSS的选择器、属性和值，并且可能对布局有一定了解可以往下看，如果没有可以先看这篇博客css解析。

 

---

css实现左右布局

css实现左右布局的方式大概有六种：

1. table的li实现

table标签是能够具有实现左右布局的属性,tr表示一行，td表示一列，tr中可以添加td实现盒子的左右布局.

2 . inline-block

display:inline-block属性是介于行级元素(display:inline)和块级元素(display：block)之间的属性，它可以像行级元素一样水平布局，也可以像块级元素设置宽高属性，所以可以进行左右布局。

3. float实现左右布局

float浮动，将该块状区域脱离父级标签的文档流，left属性值使该区域向父级标签区域的左侧边界放置，right属性值使该区域块向父级标签的右侧边界放置，如是利用该属性可以实现左右布局。

float布局对于后面节点的布局采用交错性的布局，inline-block采用正常式的布局。

4. flexbox属性实现左右布局

flexbox弹性盒子布局，display:box;该种布局主要用于移动前端开发。

5. float+margin实现左右布局

float能够使得元素向左或者向右靠边布局，如果在同级元素中设置一个正常流的区域与浮动块并列，则浮动块会在该正常流同级区域的边界处，只是浮动块会影响该区域块的布局，所以要清除浮动块的影响，所以此时将正常流区域块外的盒子设置margin等于浮动块的宽度既可以清除影响。

6. position:absolute左右布局

绝对定位，产生脱离文档流的布局现象。absolute可以覆盖任何位置的元素且不会影响正常流的布局，但是会产生遮盖。

 

---

左中右布局

 

三栏自适应布局：两边定宽，中间block宽度自适应。

1.绝对定位法

将左右两边使用absolute定位，因为绝对定位脱离文档流，后面的center会自然流动到上面，然后使用margin属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度。

2. 使用自身浮动法

对左右使用分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中，使用margin指定左右外边距对其进行一个定位。同时父盒子设置 overflow: auto; 来避免子盒子溢出

3. 圣杯布局

圣杯布局的原理是margin负值法。使用圣杯布局首先需要在center元素外部包含一个div，包含div需要设置float属性使其形成一个BFC，并设置宽度，并且这个宽度要和left块的margin负值进行配合。

 

---

居中布局

 

水平居中

对于行内元素(inline)：text-align: center;

对于块级元素(block)：设置宽度且 marigin-left 和 margin-right 是设成 auto，使用 max-width 替代 width。

对于多个块级元素：对父元素设置 text-align: center;，对子元素设置 display: inline-block;（vertical-alinga:top）；或者使用 flex 布局

flex 布局： display:flex；  justify-content:center

 

垂直居中

对于行内元素(inline)

单行：设置上下 pandding 相等（或者设置 line-height 和 height 相等）

多行：设置上下 pandding 相等；或者设置 display: table-cell; 和 vertical-align: middle;；或者使用 flex 布局；或者使用伪元素

对于块级元素(block)：（下面前两种方案，父元素需使用相对布局）

已知高度：子元素使用绝对布局 top: 50%;，再用负的 margin-top 把子元素往上拉一半的高度

未知高度：子元素使用绝对布局 position: absolute; top: 50%; transform: translateY(-50%);

使用 Flexbox：选择方向，justify-content: center;

 

水平垂直居中

定高定宽：先用绝对布局 top: 50%; left: 50%;，再用和宽高的一半相等的负 margin 把子元素回拉

高度和宽度未知：先用绝对布局 top: 50%; left: 50%;，再设置 transform: translate(-50%, -50%);

使用 Flexbox：justify-content: center; align-items: center。

 

---

box-sizing

当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。

百分比宽度

百分比是一种相对于包含块的计量单位。它对图片和盒子模很有用：比如实现图片宽度始终是容器宽度的50%，即使窗口缩小。

inline-block 布局

inline-block 元素 影响垂直居中，加vertical-align：top。

 

ps：参考链接 ：介绍 CSS 布局，学习CSS布局  ，CSS经典布局  ，使用CSS实现三栏自适应布局  ，