2017-1-11 css3布局

2017-1-11 css3布局

css 布局

多列布局
columns:column-width||coumn-count;
column-width定义每列的宽度
coumn-count定义列数
columns 属性初始值根据元素个别属性而定，适用于不可替换的块元素、行内块元素和单元格，但是表格元素除外。
column-width 属性可以定义单列显示的宽度，该属性可以与其他多列布局属性配合使用，也可以单独使用。
column-gap 定义两栏之间的间距
column-gap:normal | <length>;
normal：根据浏览器默认设置进行解析，一般为 1em。
<length>：由浮点数字和单位标识符组成的长度值。不可为负值
定义列边框样式
column-rule:<length> | <style> | <color> | <transparent>;
<length>：由浮点数字和单位标识符组成的长度值，不可为负值。功能与 column-rule-width属性相同。
<style>：定义列边框样式。功能与 column-rule-style 属性相同。包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset 和 outset
<color>：定义列边框的颜色。功能与 column-rule-color 属性相同。
<transparent>：设置边框透明显示。
定义跨列显示
column-span:1 | all;
1：只在本栏中显示。
all：将横跨所有列，并定位在列的 Z 轴之上。
定义列高度
column-fill:auto | balance;
auto：各列的高度随其内容的变化而自动变化。
balance：各列的高度将会根据内容最多的那一列的高度进行统一。
设计盒布局
传统的盒模型基于 HTML 流在垂直方向上排列盒子。使用弹性盒模型可以规定特定的顺序，也可以将其反转。要开启弹性盒模型，只需设置拥有子盒子的盒子的 display 属性值为 box（或 inline-box）即可
display: box;
id1,id2,id3{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}绑定3个列栏目为一个盒子整体布局效果（等高）
定义自适应宽度
box-flex:1;
定义列显示顺序
box-ordinal-group:number;
定义列排列方向
box-orient:vertical;
定义对齐方式
box-pack 和box-align属性包含的属性值
start
center
详解
[1]: http://www.css88.com/book/css/properties/flexible-box/box-align.htm
盒模型组成方式
box-sizing：content-box | border-box
content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )

.test1{
    box-sizing:content-box;
    width:200px;
    padding:10px;
    border:15px solid #eee;
}

调节元素尺寸
resize：none | both | horizontal | vertical
默认值：none
适用于：所有 <' overflow '> 设置为非visible的元素
继承性：无
动画性：否
计算值：指定值
none：
不允许用户调整元素大小。
both：
用户可以调节元素的宽度和高度。
horizontal：
用户可以调节元素的宽度
vertical：
用户可以调节元素的高度。
设计轮廓
定义轮廓线

outline：<' outline-width '> || <' outline-style '> || <' outline-color '>

默认值：看每个独立属性
适用于：所有元素
继承性：无
动画性：看每个独立属性
计算值：看每个独立属性
相关属性: <' outline-offset '>
取值：
<' outline-width '>：
指定轮廓边框的宽度。
<' outline-style '>：
指定轮廓边框的样式。
<' outline-color '>：
指定轮廓边框的颜色。
定义轮廓线宽度
outline-width：<length> | thin | medium | thick
默认值：medium
适用于：所有元素
继承性：无
动画性：当取值为<length>时
计算值：绝对长度；如果 <' outline-style '> 的值为none时，则计算值为0
取值：
<length>：用长度值来定义轮廓的厚度。不允许负值
medium：定义默认宽度的轮廓。
thin： 定义比默认宽度细的轮廓。
thick：定义比默认宽度粗的轮廓。
定义轮廓线样式
outline-style：none | dotted | dashed | solid | double | groove | ridge | inset | outset
默认值：none
适用于：所有元素
继承性：无
动画性：否
计算值：指定值
取值：
none：无轮廓。与任何指定的 <' outline-width '> 值无关
dotted：点状轮廓。
dashed：虚线轮廓。
solid：实线轮廓
double：双线轮廓。两条单线与其间隔的和等于指定的 <' outline-width '> 值
groove： 3D凹槽轮廓。
ridge：3D凸槽轮廓。
inset：3D凹边轮廓。
outset：3D凸边轮廓。
定义轮廓线距边框的距离
outline-offset：<length>
默认值：0
适用于：所有元素
继承性：无
动画性：当取值为<length>时
计算值：绝对长度
取值：
<length>： 用长度值来定义轮廓偏移。允许负值。
设计导航
nav-index：auto | <number>
默认值：auto
适用于：所有 enabled 的元素
继承性：无
动画性：否
计算值：指定值
相关属性: <' nav-up '> || <' nav-right '> || <' nav-down '> || <' nav-left '>
取值：
auto：元素的导航焦点顺序由客户端自动分配。
<number>：用浮点数来定义元素的导航焦点顺序。若某元素的该值等于1则意味着该元素最先被导航。当若干个元素的nav-index值相同时，则按照文档的先后顺序进行导航。
定义方向键控制顺序
nav-up：auto | <id> [ current | root | <target-name> ]
默认值：auto
适用于：所有 enabled 的元素
继承性：无
动画性：否
计算值：指定值
相关属性: <' nav-index '> || <' nav-right '> || <' nav-down '> || <' nav-left '>
取值：
auto：
默认顺序。
<id>： 被导航元素的id。#id
<target-name>：框架目标页面之间的元素焦点导航。
取消样式
initial
例如color：initial；

转载于:https://www.cnblogs.com/wangxiaofeng5277/p/6274546.html