【 CSS 】布局

一、布局居中知识点

1）水平居中

行内元素:      
  text-align:center

块元素: 
  margin:         margin: 0 auto
  flex布局:       justify-content: center (主轴排列方向row) 、 align-items: center （主轴排列方向column）
  子元素宽度已知:   position:absolute + left:50% + margin-left：(-盒子width / 2)
  子元素宽度未知:   absolute + left:50% + transform: translate(-50%, 0) 

2）垂直居中

行内元素:      
  line-height:   父元素设置行高，且与高度一致

块元素: 
  flex布局:       align-items: center （主轴排列方向row）、 justify-content: center (主轴排列方向column)
  子元素高度已知:   position:absolute + top:50% + margin-top：(-盒子height / 2)
  子元素高度未知:   absolute + top:50% + transform: translate(0, -50%)

二、布局的n种方式

1）Flex布局

• Flex 布局教程：语法篇

  ⚡ 注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效

   flex-direction： 决定主轴的方向 (主轴是指 Flexbox 容器的排列方向)
   flex-wrap：一条轴线排不下，如何换行
   justify-content：定义了项目在主轴上的对齐方式
   align-items：定义项目在交叉轴上如何对齐
  

• Flex 布局教程：实例篇

   骰子布局
   网格布局：基本网格 、百分比布局
   圣杯布局（常见三列网站布局）
   输入框的布局
   悬挂式布局（与float的文字环绕还是有点像的~）
   固定底栏（页面内容太少，无法占满一屏的高度）
   流式布局
  

2）float布局

三、视口

在PC端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。而在移动端，视口又分为布局视口(layout viewport)、视觉视口(visual viewport)和理想视口(ideal viewport)

按以往的总结，就开始准备逐个总结，可脑子一热，就想为什么移动端要搞那么多概念?

了解前因后果后，再来逐个复习👊

1) 视觉视口

• 用户看到的网站区域，即用户看到网页区域内CSS像素的数量

• 当通过手势放大屏幕时，看到的网站区域就相对减小，此时视觉视口在减小

• 获取网页视口宽/高： window.innerHeight / window.innerWidth

  

2) 布局视口

• 获取布局宽/高： document.documentElement.clientWidth/clientHeight

  

3) 理想视口

• 理想视口是开发者期望网页在移动设备上的展示区域，可认为是屏幕设备宽高

• 获取屏幕设备宽/高: window.screen.height

• 只有当为页面添加meta视口标签时，理想视口才会生效，如下： //这一行代码告诉浏览器，布局视口的宽度应该与理想视口的宽度一致