Css3.0-前端排版时的布局

欢迎关注我的个人博客分享一些前端技术、面试题、面试技巧等

Css3 布局

display:flex 弹性盒子

flex 为复合属性，且必须配合父元素 display: flex 使用

弹性盒模型是 css3 的一种新的布局方式，是一种当前页面需要适应不同的屏幕大小及设备类型时确保拥有恰当的行为的布局方式。

• 以下 6 个属性设置在项目(子元素)上

  • flex-grow: 放大比例
    • 根据所设置的比例分配盒子所剩余的空间
    • 左右两栏布局
    • 默认值 0
  • flex-shrink: 缩小比例
    • 多出盒子的部分，按照比例的大小砍掉相应的大小
    • 即比例越大，被砍的越大
    • 默认值 1
  • flex-basis: 伸缩基准值(项目占据主轴的空间)
    • 该属性设置元素的宽度或高度，当然 width 也可以用来设置宽度
    • 如果元素上同时出现了 width 和 flex-basis，那么 flex-basis 会覆盖 width 的值
  • flex: 是 flex-grow, flex-shrink 和 flex-basis 的简写
    • 常用简化写法: flex: 1 => flex: 1 1 0%
    • **注意：**flexbox 布局和原来的布局是两个概念，部分 Css 属性在 flexbox 盒子里面不起作用，(float、clear、column、vertical-align)等
  • order: 排列顺序
    • 数值越小，排列越靠前
    • 默认为 0
  • align-self: 单个项目对齐方式
    • 可覆盖 align-items 属性
    • 默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch
    • align-self:auto | flex-start | flex-end | center | baseline | stretch

• 以下 6 个属性设置在容器上
  • flex-direction: 决定主轴的方向
    • row(默认值): 主轴为水平方向，起点在左端
    • row-revers: 主轴为水平方向，起点在右端
    • column: 主轴为垂直方向，起点在上沿
    • column-reverse: 主轴为垂直方向，起点在下沿
  • flex-wrap: 是否换行
    • 默认情况下，项目都排列在一条线(又称"轴线")上
    • nowrap(默认): 不换行
    • wrap: 换行，第一行在上方
    • wrap-reverse: 换行，第一行在下方
  • flex-flow: flex-direction 和 flex-wrap 的简写
    • 默认值为 row nowrap
  • justify-content: 项目在主轴上的对齐方式(假设主轴为从左到右)
    • flex-start(默认值): 左对齐
    • flex-end: 右对齐
    • center: 居中
    • space-between: 两端对齐，项目之间的间隔都相等
    • space-around: 每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍
  • align-items: 在侧轴上的对齐方式
    • flex-start: 交叉轴的起点对齐
    • flex-end: 交叉轴的终点对齐
    • center: 交叉轴的中点对齐
    • baseline: 项目第一行文字的基线对齐
    • stretch(默认值): 如果项目未设置高度或设置 auto，将占满整个容器的高度
  • align-content: 多跟轴线的对齐方式(当只有一根轴线时，不生效)
    • flex-start: 与交叉轴的起点对齐。
    • flex-end: 与交叉轴的终点对齐。
    • center: 与交叉轴的中点对齐。
    • space-between: 与交叉轴两端对齐，轴线之间的间隔平均分布。
    • space-around: 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
    • stretch(默认值): 轴线占满整个交叉轴。

/* 溢出换行问题 */
flex-flow: flex-direction | flex-wrap flex-direction：row | row-reverse | column
  | column-reverse flex-wrap：nowrap（默认） | wrap | wrap-reverse;

当设置 flex-wrap 属性的时候 wrap 失效，flex-basis 尽可能按 basis 值往大了去从而达到折行的目的，flex-shrink 会失效(根据子元素实际的宽度判断是否折行)

代码示例

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

div.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  /* flex-direction: row-reverse; */
  /* flex-wrap: wrap; */
  /* justify-content: space-around; */
  /* align-items: self-start; */
}
div.container > div {
  width: 200px;
  height: 200px;
  background-color: red;
  border: 1px solid #000;
  font-size: 20px;
  text-align: center;
  /* order: 0; */
  /* flex-grow: 0; */
  /* flex-basis: 200px; */
}

columns 多列布局

为了能在 Web 页面中方便实现类似报纸、杂志那种多列排版的布局，W3C 特意给 Css3 增加了一个多列布局模块(Css Multi Column Layout Module)。它主要应用在文本的多列布局放面，这种布局在报纸和杂志上使用了几十年了，但要在 Web 页面上实现这样的效果还是有相当大的难度，庆幸的是，Css3 的多列布局可以轻松实现。

分栏布局 IE10+都可以使用，API 稳定，移动端兼容性比 flex 布局要好，虽然设计初衷不一样，但很多布局都可以实现。

语法

• columns: [column-width][column-count]
  • column-width: 指每一列的宽度 根据容器宽度自适应(最小宽度)
  • column-count: 指规定的列数 唯一精准的列数
    • 注意：不要两个在一起使用 会乱！
  • column-gap: 设置列与列之间的宽度，直接用数值表示即可 (10px)
    • 主要用来设置列与列之间的间距
    • 如果没有设置 gap 值，其值大小会根据浏览器默认的 font-size 来定
  • column-rule-: 不占用任何空间位置，在列与列之间改变其宽度不会改变任何列的位置
    • column-rule-width: 宽度
      • 类似于 border-width属性，主要用来定义列边框的宽度，其默认值为 "medium"
      • 接受任意浮点数，但不接收负值
      • 可以使用关键字: medium、 thick、 thin
    • column-rule-style: 样式
      • 类似于 border-style 属性，主要用来定义列边框样式，默认值为 none
      • 属性值包括hidden、dotted、dashed、solid、double、groove、ridge、inset、outset
    • column-rule-color: 颜色
      • 类似于 border-color 属性
  • column-span: 1/all: 设置多列布局元素内的子元素，可以跨列，类似标题效果。
    • 此属性要在子元素上设置

代码示例

<div class="container">
  <div class="item">我是大标题</div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

div.container {
  columns: 300px;
  column-gap: 10px;
  column-rule-width: 5px;
  column-rule-style: dashed;
  column-rule-color: green;
}
div.container > div {
  width: 200px;
  height: 200px;
  background-color: red;
  margin: 5px;
}
.item {
  column-span: all;
}

盒模型

Css3 中有一个可以选择盒模型的属性

box-sizing: border-box / content-box;

content-box 为 W3C 标准盒子 border-box 为 IE6 混杂模式的盒子

单位值

模拟移动端的 meta

<meta
  name="viewport"
  content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
/>

媒体查询

为了更好的体验，是向不同设备提供不同的样式的一种方式，它为每种类型的用户提供了最佳的体验

为什么会有媒体查询

移动设备的快速普及完全颠覆了 Web 设计领域

用户不再仅在用户不再仅在传统桌面系统上查看 Web 内容，他们越来越多地使用具有各种尺寸的智能电话、平板电脑和其他设备。

Web 设计人员的挑战是确保他们的网站不仅在大屏幕上看起来不错，在小型的电话以及介于它们之间的各种设备上看起来也不错。

点我查看响应式布局详解

物理像素和设备独立像素

物理像素

一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值

设备独立像素

设备独立像素(也叫目睹无关像素)，可以认为是计算机坐标系统中的一个点，这个点代表一个可以有程序使用的虚拟像素(Css 像素)，然后由相关系统转换为物理像素

设备像素比

设备像素比(device pixel ratio) 设备像素比(简称 dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式得到

设备像素比 = 物理像素 / 设备独立像素

JavaScript 中可以通过window.devicePixelRatio得到

例子

以 iPhone6 为例

• 设备宽高为 375 * 667，可以理解为设备独立像素(Css 像素)
• dpr 为 2，根据上面的计算公式，其物理像素就应该 _ 2，为 750 _ 1334

1 Css 像素在 PC 端显示器需要用(1*1)个栅格点表示，在 iPhone6 中则需要 4(2*2)个

也就是在不同的屏幕上，(普通屏幕 VS retina 屏幕)，Css 像素所呈现的大小(物理尺寸)是一致的，不同的是一个 Css 像素所对应不同的对象的物理像素个数是不一致的

在普通的屏幕下，1 个 Css 像素对应的 1 个物理像素为 1:1。在 retina 屏幕下，1 个 Css 像素对应 4 个物理像素 1:4

位图像素

1 个位图像素是栅格图像（如：png，jpg，gif 等）最小的数据单元。每一个位图像素都包含这一些资深的现实信息（如：显示位置，颜色值，透明度等）

在普通屏幕下是没问题的，但是在 retina 屏幕下就会出现位图像素点不够，从而导致图片模糊的情况

对于 dpr = 2 的, 1 个位图像素对应于 4 个物理像素，由于单个位图像素不以再进一步分割，所以只能就近取色，从而导致图片模糊

解决办法使用分辨率大两倍的图片 如 200*300 img 标签，就需要提供 400*600 的图片.由此一来位图像素点的个数是原来的 4 倍，在 retina 屏幕下，位图像素点个数就可以物理像素点个数形成 1:1 的比例，图片自然就清晰了。

这里还有另一个问题，如果如果普通屏幕下，也用了两倍图片，会怎样呢？ 很明显，在普通屏幕下，200×300(px) img标签，所对应的物理像素个数就是200×300个，而两倍图片的位图像素个数则是200×300*4，所以就出现一个物理像素点对应4个位图像素点，所以它的取色也只能通过一定的算法(显示结果就是一张只有原图像素总数四分之一，我们称这个过程叫做 downsampling)，肉眼看上去虽然图片不会模糊，但是会觉得图片缺少一些锐利度，或者是有点色差(但还是可以接受的)。

---

希望对读完本文的你有帮助、有启发，如果有不足之处，欢迎批评指正交流！

欢迎关注我的个人博客分享一些前端技术、面试题、面试技巧等

辛苦整理良久，还望手动点赞鼓励~

---

'摘抄'不是单纯的“粘贴->复制”，而是眼到，手到，心到的一字一句敲打下来。

博客声明:所有转载的文章、图片仅用于作者本人收藏学习目的，被要求或认为适当时，将标注署名与来源。若不愿某一作品被转用，请及时通知本站，本站将予以及时删除。