多列布局
css3 中最新给出多列布局方案,他是css布局的一个新的扩展
设置列宽
column-width: 具体值 / auto
具体值是直接设置元素的宽度
auto 是根据页面宽度,自定义列宽
设置列数
column-count:num
num是具体的正整数,范围是[1,10]
以上两个属性合写
columns:width count;
设置列间距
column-gap: normal 或者具体的数值
normal 是默认值, 他的大小是 1em
设置两列之间的边框
column-rule 具体设置规则和 css中的border一致
设置标题跨列
column-span
只具有两个值
1. none 表示不跨列
2. all 表示跨所有列
css的hack
css hack: 由于不同的浏览器厂商,比如 ie ,火狐, 谷歌 ,safari(苹果) ,他们生产浏览器的时候,会有不同的渲染解决方案。还有不同版本的浏览器也可能对相同的css设置渲染不同的效果,例如 IE6 7 8 9。css hack 是浏览器厂商给自己的浏览器专门制定的一套特殊的css指令。可以理解为css hack的目的就是解决不同的浏览器的css兼容问题,当然也可以使用css hack为不同的浏览器制定不同的css
ie的条件注释
[if IE]: 只要是ie浏览器都可以生效
[if lte IE 6]: 浏览器的版本小于等于ie6的时候生效
[if lt IE 6]: 浏览器的版本小于ie6的时候生效
[if gte IE 6]: 浏览器的版本大于等于ie6的时候生效
[if gt IE 6]: 浏览器的版本大于ie6的时候生效
[if IE 6]: 浏览器的版本等于ie6的时候生效
[endif]: 条件注释的结束指令
[if ! IE 6]: 浏览器的版本不是ie6的时候生效
特殊符号 hack
* 在IE10 及其以上生效
- 减号,只对ie6 生效
+ 加号,对ie7 生效
_ 下划线,只对ie6 ie7生效
\9 对 IE6 7 8 9 10都生效
\0 对 IE8 9 10 都生效
\9\0 只对IE9 10生效
网格布局
网格布局,是css3新出的一种布局方式,常用的适用案例为 九宫格布局
声明网格布局环境
display:grid; (最常用)
display:inline-grid
设置列
grid-template-columns
值是 fr,1fr就代表一个比例划分
有几列就可以设置几个fr,每一个fr所占据的 宽度比例为1fr,如果需要
设置其他比例的宽度,则可以设置整倍fr
如下列:
grid-template-column:1fr 2fr 3fr
设置了当前网格为3列,第一列的宽度为1fr,第二列的宽度是第一列的2倍,
第三列宽度是第一列的3倍
有几个fr值,就有几列
还可以直接设置 具体宽度
grid-template-columns: 100px 100px 200px
还可以设置 宽度+auto auto 是除了具体宽度列数之外的 自适应宽度
也可以 宽度 + fr 组合
设置行
grid-template-rows
他的值是行高,有几个值,就设置几个行高
grid-template-rows: 200px 200px 200px;
以上案例的含义是,设置了三行,第一行行高是100px,第二行行高是200px,
第三行行高是300px
如果总行高小于父级grid的高度,则父级剩余的高度会被剩余的子元素平分
行 列 合写
grid-template:行 /列
grid-template:100px auto auto/1fr 1fr 1fr;
设置列间距
column-gap:具体数值
设置行间距
row-gap:具体数值
合写间距:
gap: row column;
指定开始行
grid-row-start:1; 从第一行开始跨行
指定结束行
grid-row-end:span 3;到第3行结束,合并3行
指定开始列
grid-column-start:1; 从第一列开始跨列
指定结束列
grid-column-end:span 3;到第3列结束,合并3列