19 布局

分栏/多列布局

多列布局 - 学习 Web 开发 | MDN (opens new window)

CSS3 多列属性：

属性	描述
column-count	规定元素应该被分隔的列数。
column-gap	规定列之间的间隔。
column-rule	设置所有 column-rule-* 属性的简写属性。
column-width	规定列的宽度。
columns	规定设置 column-width 和 column-count 的简写属性。

column-count

定义：
column-count 属性规定元素应该被划分的列数。

语法：
column-count: number|auto;

column-gap

定义：
column-gap 属性规定列之间的间隔。

语法：
column-gap: length|normal;

属性值：

• length：把列间的间隔设置为指定的长度。
• normal：规定列间间隔为一个常规的间隔

column-rule-style

定义：
column-rule-style 属性指定列之间的样式规则。

语法：
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;

属性值：

值	描述
none	定义没有规则。
hidden	定义隐藏规则。
dotted	定义点状规则。
dashed	定义虚线规则。
solid	定义实线规则。
double	定义双线规则。
groove	定义 3D grooved 规则。该效果取决于宽度和颜色值。
ridge	定义 3D ridged 规则。该效果取决于宽度和颜色值。
inset	定义 3D inset 规则。该效果取决于宽度和颜色值。
outset	定义 3D outset 规则。该效果取决于宽度和颜色值。

column-rule-width

定义：
column-rule-width属性指定列之间的宽度规则。

语法：
column-rule-width: thin|medium|thick|length;

属性值：

• thin：指定一个细边框的规则；
• medium：定义一个中等边框规则；
• hick：指定一个粗边框的规则；
• length：指定宽度的规则

column-rule-color

定义： column-rule-color属性指定列之间的颜色规则。

语法：
column-rule-color: color;

column-rule

定义： column-rule 属性设置列之间的宽度、样式和颜色规则。

column-rule 属性是一个简写属性，用于设置所有 column-rule-* 属性：
column-rule-width column-rule-style column-rule-color

语法：
column-rule: column-rule-width column-rule-style column-rule-color;

实例

.newspaper{
    column-rule:4px outset #ff00ff;
}

column-width

定义：
column-width属性指定列的宽度

语法：
column-width: auto|length;

属性值：

• auto：浏览器将决定列的宽度；
• length：指定列宽的长度

columns

定义：
columns 属性指定列的宽度和数量；

语法：
columns: column-width column-count;

属性值：

• column-width：列的宽度
• column-count：列数

flex 布局

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性盒子 - 学习 Web 开发 | MDN (opens new window)

• html5:div 横向排列的方法。_我的成长之路！-CSDN博客_div横向排列 (opens new window)
• Flex 布局教程：语法篇 - 阮一峰的网络日志 (opens new window)
• Flex 布局示例 (opens new window)

弹性盒子定义方式

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性盒子只定义了弹性子元素如何在弹性容器内布局。 弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

弹性容器常用的属性：flex-direction、justify-content 、align-items、flex-grow和flex

flex-direction

flex-direction 指定子元素在父容器中的位置。此属性作用于父容器

语法： flex-direction: row | row-reverse | column | column-reverse

参数：

• row ：横向从左到右排列（左对齐），默认的排列方式。
• row-reverse ：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
• column ：纵向排列。
• column-reverse ：反转纵向排列，从后往前排，最后一项排在最上面。

justify-content

justify-content 属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。此属性作用于父容器。

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

参数：

flex-start ：弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。

flex-end ：弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。

center ：弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。

space-between ：弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flexstart。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

space-around ：弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

align-items

align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。此属性作用于父容器

语法： align-items: flex-start | flex-end | center | baseline | stretch

参数：

flex-start ：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end ：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

center ：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

baseline ：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

stretch ：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

flex-grow

flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。此属性作用于子元素。

语法： flex-grow: number

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex

flex 指定弹性子元素如何分配空间

语法： flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

参数：

• auto : 等价于 1 1 auto (flex-grow:1, flex-shrink:1, flex-basis:auto)

• initial : 等价于 0 1 auto。

• none ：等价于 0 0 auto。

• inherit ：从父元素继承。

• [ flex-grow ] ：定义弹性盒子元素的扩展比率。

• [ flex-shrink ] ：定义弹性盒子元素的收缩比率。

• [ flex-basis ] ：定义弹性盒子元素的默认基准值。

<div class='box'>
<div class='box1'>div1</div>
<div class='box1'>div2</div>
<div class='box1'>div3</div>
</div>

.box { display:flex; width:100%; height:300px; }
.box1 { flex: 0 0 300px; } /* 等同于 宽度每个box1的宽度为300px */

响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

响应式设计 - 学习 Web 开发 | MDN (opens new window)

响应式布局和自适应布局的区别（面试问题）

响应式布局只开发一套代码，通过检测视口的分辨率，针对不客户端在客户端做代码处理，来展现不同的布局和内容；
自适应需要开发多套界面，通过检测视口的分辨率，来判断当前访问的设备是PC端、平板、手机等，从而请求服务层，返回不同的页面。

响应式布局等同于流动网格布局，而自适应等同于使用固定分割点来进行布局。

自适应布局给出了更多的设计空间，只用考虑几种不同的状态就可以了；
而响应式布局要考虑上百种不同的状态，虽然有些状态差异较小，但也要考虑到。

响应式布局开发实现方法

• 媒体查询
• 百分比布局
• rem布局（相对于根节点（元素）html中的字号布局）
• 视口单位布局(vw/vh)

响应式设计步骤

• 设置meta标签
• 通过媒体查询来设置样式
• 设置多种视图的宽度
  • 宽度需要使用百分比/rem/vw$vh等
  • 处理图片缩放
  • 其它属性处理，如 pre/iframe/video 等，都要缩放其大小，table，建议不要增加 padding 属性，低分辨率下要使用内容居中操作。

ing

媒体查询

媒体查询 - CSS（层叠样式表） | MDN (opens new window)

媒体查询通过不同的媒体类型和条件定义样式表规则。

媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。 媒体查询的大部分媒体特性都接受 min和max用于表达”大于或等于”和”小于或等于”。

如：width会有min-width和max-width媒体查询可以被用在CSS中的 @media和@import规则上，也可以被用在HTML和XML中。 通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。

步骤

设置meta标签

<meta name="viewport" content="width=device-width,initial-scale=1.0,maxium-scale=1.0,user-scaleable=no">

说明：
以上标签的内容只能被移动设备识别。

• viewport：视口（移动端）。
• width=device-width：宽度等于当前设备的宽度。
• initial-scale=1.0：初始缩放比例（默认为1.0）
• minimum-scale=1.0：允许用户缩放到的最小比例（默认为1.0）
• maximum-scale=1.0：允许用户缩放到的最大比例（默认为1.0）
• user-scaleable=no：用户是否可以手动缩放（默认为no）

进入CSS3提供的媒体查询

方式1 引入外部CSS文件时使用

如果屏宽为480px及以下，将加载screen480.css文件。

     <link rel="stylesheet" href="css/screen480.css" media="screen and (max-width:480px)" >

如果屏宽为480px以上且在800px以下，将加载screen800.css文件。

     <link rel="stylesheet" href="css/screen800.css" media="screen and (min-width:480px) and (max-width:800px)" >

如果屏宽为800px以上，将加载screengt800.css文件。

     <link rel="stylesheet" href="css/screengt800.css" media="screen and (min-width:800px)" >

设备：

• all: 所有设备
• screen: PC端显示器
• print: 打印机或打印预览图
• handheld: 便携设备
• tv: 电视
• speech: 音频合成器
• braille: 盲人点触设备
• embossed: 盲人打印机
• projection: 投影设备
• tty: 固定密度字母栅格设备
• only: 用来排除不支持媒体查询的浏览器

方式2 在style标签中用@media定义，如：

@media screen and (max-width: 480px){
    .menu{
        display: none;
    }
}

web 字体

@font-face

在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。通过 CSS3，web 设计师可以使用他们喜欢的任意字体。

当找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到 用户的计算机上。“自己的”的字体是在 CSS3 @font-face 规则中定义的。

<style>

@font-face
{
    font-family: myFirstFont;
    src: url('Sansation_Light.ttf'),
    url('Sansation_Light.eot'); /* IE9+ */
}

div
{
    font-family:myFirstFont;
}

</style>

iconfont 图标字体

由阿里巴巴提供的一种图标字体。

使用步骤：

• 进入官网http://iconfont.cn，注册并登录
• 创建一个项目
• 添加图标到购物车
• 将购物车中的图标添加到项目中
• 下载iconfont文件，解压后，将部分文件复制到我的网页项目中
• 使用字体图标前，先引入iconfont.css文件
• 使用字体图标方法：
  • 用类名 <div class="iconfont icongerenzhongxin"></div>
  • 用unicode值（微信小程序开发不支持这种写法） <div class="iconfont">&#xe62f;</div>