弹性盒子

新的页面布局方式

由 浪尽此生 提交于 2019-11-28 12:21:49
新的页面布局方式 1 多列布局 1.1 多列布局介绍 实现类似于报纸的布局方式 ) 1.2 多列布局的相关CSS属性 columns 设置的列数和每列的宽度。复合属性 columns：<' column-width '> || <' column-count '> column-width 设置每列的宽度（类似于最小宽度） ： 用长度值来定义列宽。不允许负值 auto： 根据 <' column-count '> 自定分配宽度 column-count 设置列数 ： 用整数值来定义列数。不允许负值 auto： 根据 <' column-width '> 自定分配宽度 column-gap 设置列与列之间的间隙 ： 用长度值来定义列与列之间的间隙。不允许负值 normal： 与 <' font-size '> 大小相同。假设该对象的font-size为16px，则normal值为16px，类推。 column-rule 列与列之间的边框,复合属性 同border类似 column-rule：<' column-rule-width '> || <' column-rule-style '> || <' column-rule-color '> column-rule-width 列与列之间的边框厚度 ： 用长度值来定义边框的厚度。不允许负值 medium： 定义默认厚度的边框。

CSS3中的弹性盒子模型

由 一曲冷凌霜 提交于 2019-11-28 09:55:31
介绍 在css2当中，存在标准模式下的盒子模型和IE下的怪异盒子模型。这两种方案表示的是一种盒子模型的渲染模式。而在css3当中，新增加了弹性盒子模型，弹性盒子模型是一种新增加的强大的、灵活的布局方案。弹性盒子模型是css3中新提出的一种布局方案。是一种为了应对针对不同屏幕宽度不同设备的一整套新的布局方案。主要是对一个容器中的子元素进行排列、对齐和分配空白空间的方案的调整。 新旧版本的弹性盒子模型 在之前，css3曾经推出过旧版本的弹性盒子模型。相对于新版本的弹性盒子模型而言，旧版本的内容与新版本还是有些出入。而且，从功能上来讲，旧版本的弹性盒子模型远远没有新版本的盒子模型强大，从兼容性来讲，二者在pc端ie9以下都存在着兼容性问题，但是在移动端，旧版本的弹性盒子模型兼容性则更好一点。但是对于我们来说，我们依然要将主要的精力放在新版本的弹性盒子模型的身上，因为旧版本的弹性盒子模型淘汰是必然，随着手机端的兼容性逐渐提升，旧版本必将被淘汰。另外，新版本具有更加强大的功能，也值得我们进行深度的学习。那么我们对于新旧两个版本的弹性盒子模型，我们只需要抱着对比的心态学习即可，掌握新版本，了解旧版本，这样即使有一天我们需要使用旧版本，也可以非常容易的学习旧版本的弹性盒子模型。 相关概念 主轴 我们以元素排在一行为例，当元素排列在一行的时候，主轴既表示元素排列的方向

弹性盒子 （ Flex Box）语法

由 人盡茶涼 提交于 2019-11-28 01:42:56
㈠什么是弹性盒子？ 弹性盒子是 CSS3 的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 ● 伸缩容器：设置为display:flex或display:inline-flex的元素称为伸缩容器。 ● 伸缩项目：伸缩容器的子元素称为伸缩项目 注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效；弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行 默认情况下伸缩容器存在两根轴，水平的主轴和垂直的侧轴。 ㈡浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。 ㈢基本概念 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。 主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start

flex弹性盒子布局

由 我与影子孤独终老i 提交于 2019-11-27 18:43:36
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>flex</title> <style> *{ padding: 0; margin: 0; } body{ background-color: red; } .container{ width: 100%; min-height: 500px; background-color: yellowgreen; display: flex; } .container .left{ width: 200px; height: 500px; background-color: purple; } .container .right{ width: 150px; height: 500px; background-color: blue; } .container .center{ flex-grow: 1; height: 500px; background-color: orange; } </style></head><body><div class="container"><div class="left"></div> <div class="center"> </div> <div class="right"></div></div></body
订阅 弹性盒子