css魔幻布局是什么意思,CSS3 布局

1.1 列布局

CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道，当一行文字太长时，读者读起来就比较费劲，有可能读错行或读串行；人们的视点从文本的一端移到另一端、然后换到下一行的行首，如果眼球移动浮动过大，他们的注意力就会减退，容易读不下去。所以，为了最大效率的使用大屏幕显示器，页面设计中需要限制文本的宽度，让文本按多列呈现，就像报纸上的新闻排版一样。

1.1 伸缩布局

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

如下图，学习新的概念：

主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向

侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的

方向：默认主轴从左向右，侧轴默认从上到下

主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

1、必要元素：

a、指定一个盒子为伸缩盒子 display: flex

b、设置属性来调整此盒的子元素的布局方式 例如 flex-direction

c、明确主侧轴及方向

d、可互换主侧轴，也可改变方向

2、各属性详解

a、flex-direction调整主轴方向(默认为水平方向)

该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置

row 水平方向

reverse-row 反转

column 垂直方向

reverse-column 反转列

b、justify-content设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

flex-start、 起点对齐

flex-end、  终点对齐

center、    中间对齐

space-around、 环绕

space-between  两端对齐

c、align-items调整侧轴对齐

align-items: 定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。

flex-start  起点对齐

flex-end  终点对齐

center 居中 垂直居中

stretch 拉伸  设置拉伸，高度不能固定

d、flex-wrap控制是否换行  (控制是否换行)

flex-wrap:nowrap 不换行

flex-wrap:wrap 换行

e、flex控制子项目的缩放比例

不指定flex 属性，则不参与分配.

f、order控制子项目的排列顺序

此知识点重在理解，要明确找出主轴、侧轴、方向，各属性对应的属性值可参考示例源码

应用场景3-携程旅行

针对移动设备的CSS3布局

针对移动设备的CSS3布局 一些专业人士预测五年内移动设备将击败普通电脑成为网页浏览领域的霸主,不管这个预言是否应验,让网页在移动设备上较好的显示已经成为网页设计师和开发者的重要任务,本教程学习用CS ...

学习笔记 第十一章 CSS3布局基础

第11章   CSS3布局基础 [学习重点] 了解CSS2盒模型. 设计边框样式. 设计边界样式. 设计补白样式. 了解CSS3盒模型. 11.1  CSS盒模型基础 页面中所有元素基本显示形态为方形 ...

web前端学习(三)css学习笔记部分(8)-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触

15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...

说说css3布局

使用float属性或position属性布局的缺点