CSS布局

HTML CSS + DIV实现整体布局必备知识
利用HTML和CSS实现常见的布局

单列布局

css 实现竖直居中的 N 种场景及 N 种方法

多列布局

1. column-count 设置几列布局
2. column-width 设置列宽，自动计算列数(建议使用em为单位)
3. column-gap 设置列之间的缝隙
4. column-span 跨列(firefox不支持此属性)
5. column-fill：auto | balance 设置或检索对象所有列的高度是否统一
6. columns: 5em 5;复合属性(优先选择较少列数的进行使用)
7. column-rule:2px solid blue;设置列之间缝隙的样式

注意：
有些需要加前缀，有些不需要。浏览器内核不同，应处理兼容性问题

应用场景：
该布局一般应用于文字排版比较多的页面，类似与报纸那样。

CSS 多列布局基础
CSS 多列布局问题简单解决方案

全屏布局

CSS全屏布局的5种方式

响应式布局

1. 视口
   不同手机屏幕大小不同，怎么才能使页面都可以在里面正常显示呢？
   解决方法：为不同手机做视口适配
   <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>

   属性：
   width=device-width 宽度=设备的宽度
   maximum-scale=1.0 设置最大缩放比例 0.25-10.0
   minimum-scale=1.0 设置最小缩放比例 0.25-10.0
   initial-scale=1.0 设置初始化的缩放比
   user-scalable=0 是否允许用户进行缩放

2. 媒体查询
   响应式布局通常使用 媒体查询 来完成的

• 媒体查询的语法

  @media screen and (min-width:600px) and (max-width:1000px){}

• 横屏竖屏

  /竖屏/
  @media screen and (orientation:portrait){}
  /横屏/
  @media screen and (orientation:landscape){}

• 媒体查询的引入方式

  直接写在style中
  使用link外部引入的方式，给link 添加 media 属性
  注意：媒体查询中的属性有覆盖的问题，所有一定要注意代码的顺序。最好把大范围的写在上面，小范围的写在下面。

3. 响应式布局

   • 传统Web设计,在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分,这种布局方式叫做静态布局
   • 分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。这种布局方式叫做自适应布局
   • 在网页中使用%,可以让页面元素随着屏幕的大小而改变，这种布局方式叫做流式布局
   • 在网页中，可以让页面样式根据屏幕的变化而变化，实现不同屏幕展示效果没有异常的方式，叫响应式布局

   响应式设计有些什么优点呢？

   • 不必单独维护移动和PC两套站点，降低人力成本
   • 可以复用设计元素，内容资源
   • 同一网址自适应不同设备，利于不同设备的用户相互分享网址
   • SEO优化，搜索引擎更愿意收录同时适配移动设备和PC设备的网页

补充
CSS常见布局问题整理