CSS3（三）布局样式

时间：2022-11-11 11:06:18

一、多列布局——Columns：到目前为止大部分主流浏览器都对其支持：
为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面
语法：

columns：<column-width> || <column-count> //列宽和列数
columns: 200px 2;            //2栏显示，每栏宽度为200px

应用中注意浏览器的兼容性，尽量写全下列代码：

-webkit-columns: 150px 3;
-moz-columns: 150px 3;
-o-columns:150px 3;
-ms-columns: 150px 3;
columns: 150px 3;

还可以按需写成如下两种：
1、column-width的使用和CSS中的width属性一样，不过不同的是，column-width属性在定义元素列宽的时候，既可以单独使用，也可以和多列属性中其他属性配合使用。其基本语法如下所示 ；

column-width: auto | <length>
//auto：多列的列宽将由其他属性来决定，比如由列数column-count来决定。
-webkit-column-width:200px; //此时宽度确定，列数不等
-moz-column-width:200px;
-o-column-width:200px;
-ms-column-width:200px;
column-width:200px;

2、column-count属性主要用来给元素指定想要的列数

column-count：auto | <integer>
//auto：此值为column-count的默认值，表示元素只有一列，其主要依靠浏览器计算自动设置。<integer>正整数值，主要用来定义元素的列数
-webkit-column-count:2;
-moz-column-count:2;
-o-column-count:2;
-ms-column-count:2;
column-count:2;

还可以设置列间距：
3.column-gap 列间距主要用来设置列与列之间的间距，其语法规则如下：

column-gap: normal || <length> //normal：默认值，默值为1em（如果你的字号是px，其默认值为你的font-size值）<length>此值用来设置列与列之间的距离，其可以使用px,em单位的任何整数值，但不能是负值。 column-count: 3;
column-gap: 2em;
  -webkit-column-count:3;
  -moz-column-count:3;
  -o-column-count:3;
  -ms-column-count:3;
  column-count:3;
  -webkit-column-gap:3em;
  -moz-column-gap:3em;
  -o-column-gap:3em;
  -ms-column-gap:3em;
  column-gap:3em;

4.column-rule 列表边框
column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。
但需要注意的是：column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。
语法规则：

column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>
//例如：为了能有效区分栏目列之间的关系，可以为其设置一个列边框，代码为：
column-rule: 2px dotted green;

CSS3（三）布局样式
一个完整的小例子：
三列布局，列间距2em，为栏目列设置一个3px的灰色实体边框线。

.columns { padding: 5px; border: 1px solid green; width: 900px; margin: 20px auto; -webkit-column-count:3; -moz-column-count:3; -o-column-count:3; -ms-column-count:3; column-count:3; -webkit-column-gap: 2em; -moz-column-gap: 2em; -o-column-gap: 2em; -ms-column-gap: 2em; column-gap: 2em; -webkit-column-rule:3px solid gray; -moz-column-rule:3px solid gray; -o-column-rule:3px solid gray; -ms-column-rule:3px solid gray; column-rule:3px solid gray; }

5.column-span 跨列设置
column-span主要用来定义一个分列元素中的子元素能跨列多少。column-width、column-count等属性能让一元素分成多列，不管里面元素如何排放顺序，他们都是从左向右的放置内容，但有时我们需要基中一段内容或一个标题不进行分列，也就是横跨所有列，此时column-span就可以轻松实现，此属性的语法如下。

column-span: none | all
//none:此值为column-span的默认值，表示不跨越任何列。all这个值跟none值刚好相反，表示的是元素跨越所有列，并定位在列的Ｚ轴之上。
column-span:all;  //效果如下

CSS3（三）布局样式

二、盒子模型
CSS中有一种基础设计模式叫盒模型，盒模型定义了Web页面中的元素中如何来解析。CSS中每一个元素都是一个盒模型，包括html和body标签元素。在盒模型中主要包括width、height、border、background、padding和margin这些属性。

但是border属性与margin属性、padding属性三者之间应该是平面上的并级关系，并不能构成Ｚ轴的层叠关系。

W3C标准盒模型：
外盒：element空间高度＝内容高度＋内距＋边框＋外距
     element空间宽度＝内容宽度＋内距＋边框＋外距
内盒：
     element高度＝内容高度＋内距＋边框（height为内容高度）
     element宽度＝内容宽度＋内距＋边框（width为内容宽度）
IE传统下盒模型（IE6以下，不包含IE6版本或”QuirksMode下IE5.5+”）：
外盒：element空间高度＝内容高度＋外距（height包含了元素内容宽度、边框、内距）
     element宽间宽度＝内容宽度＋外距（width包含了元素内容宽度、边框、内距）
内盒：element高度＝内容高度（height包含了元素内容宽度、边框、内距）
     element宽度＝内容宽度（width包含了元素内容宽度、边框、内距）

CSS2中，元素(例如div)的内边距(padding)和边框(border)会把元素自身撑大。想要个100*100px的div，都要事先计算，例如，内容80px + 内边距15px + 边框5px = 100px

CSS3中，新增 box-sizing 属性，如果设置元素为 box-sizing: border-box，那么元素的内边距(padding)和边框(border)不会再把元素自身撑大。例如，设置div为100*100px，那么无论div里内容、内边距、边框的宽高怎么变化，div的大小永远都是100*100px
其语法规则如下：

box-sizing: content-box | border-box | inherit

content-box：默认值，其让元素维持W3C的标准盒模型，也就是说元素的宽度和高度（width/height）等于元素边框宽度（border）加上元素内距（padding）加上元素内容宽度或高度（content width/ height）
border-box：让元素维持IE传统的盒模型（IE6以下版本和IE6-7怪异模式），也就是说元素的宽度或高度等于元素内容的宽度或高度。从上面盒模型介绍可知，这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度
inherit：使元素继承父元素的盒模型模式

其中最为关键的是box-sizing中content-box和border-box两者的区别，他们之间的区别可以通过下图来展示，其对盒模型的不同解析：
CSS3（三）布局样式
同样要注意浏览器兼容：

  -webkit-box-sizing:content-box;
  -moz-box-sizing:content-box;
  -o-box-sizing:content-box;
  -ms-box-sizing:content-box;
  box-sizing:content-box;

三、伸缩布局
CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。

Flexbox布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。

Flexbox布局在定义伸缩项目大小时伸缩容器会预留一些可用空间，让你可以调节伸缩项目的相对大小和位置。例如，你可以确保伸缩容器中的多余空间平均分配多个伸缩项目，当然，如果你的伸缩容器没有足够大的空间放置伸缩项目时，浏览器会根据一定的比例减少伸缩项目的大小，使其不溢出伸缩容器。

标签：

相关文章