css布局

一、盒模型(组成)

盒子模型：

内容+内补白+边框+外补白

边框border

内容：双标签之间

边框与内容不挨着: padding

1、内补白 内边距  内填充 …

Padding：内容与边框之间的距离，内边距。

特点：会撑开所在的元素，重新计算宽高

简写属性：四种设置值的方式

Padding:10px; 四个边

Padding:10px 20px; 上下   左右

Padding:10px 20px 30px; 上  左右  下

Padding:10px 20px 30px 40px; 上  右  下  左

具体属性：

padding-top： 检索或设置对象顶边的内部边距

padding-right： 检索或设置对象右边的内部边距

padding-bottom：检索或设置对象下边的内部边距

padding-left： 检索或设置对象左边的内部边距

2、外补白（外补丁）

外补白margin 外边距

Margin-top margin-right margin-bottom margin-left

相邻外边距会合并，以最大值为主。

Margin也可以设置四个值。上 右 下 左

1个值 四个边

2个值 上下  左右

3个值 上  左右  下

Margin的用法：

页面居中 左右 auto

Margin:0 auto;

很多元素默认自带margin或padding,统一设置为0。

组合选择器统一设置为0

html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,address,big,cite,code,del,em,font,img,ins,small,strong,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend{margin:0;padding:0;}

二、列表属性：
列表样式清除：list-style:none;  list-style-type:none;
三  、浮动 float  布局
Float:none | left | right

浮动布局

文档分层

文档层(文档流):没有浮动之前全是文档层

浮动层:对某个元素使用float，此元素脱离文档流，转为浮动层元素

在文档层中块元素特点：占住一块，占不满，也不会显示其它元素

浮动特点：浮起来，大小就为元素实际大小

浮动需要配合clear:both; 不受浮动元素影响(文档层与浮动层切换)

浮动元素什么时候停止：

从当前位置开始浮动.碰到浮动层元素会停止

碰到文档本身内容也会停止.

四、 Position定位

*position: 定位方式：absolute(绝对定位)、fixed(固定)（relative定位参考，可对内部相对absolute定位）

*z-index: 层叠顺序，值越大越在上方。

*top: 检索或设置对象与其最近一个定位的父对象顶部相关的位置

right: 检索或设置对象与其最近一个定位的父对象右边相关的位置

bottom: 检索或设置对象与其最近一个定位的父对象下边相关的位置

*left: 检索或设置对象与其最近一个定位的父对象左边相关的位置

Position:relative相对定位 | absolute绝对定位 | fixed固定定位(登录弹框，注册弹框)

a.Relative:相对于自己本身去定位。配合top right bottom left此四个属性来进行移动。

另一个作用：给绝对定位提供参考点

B.absolute绝对定位 随着滚动条滚动

C.fixed 固定定位  不随滚动条滚动

特点(b,c)：完全脱离文档流。配合特效。移动位置top right bottom left(相对于浏览器左上角去移动0,0)

D.z-index 层叠，值越大，越在上方显示  数值

a.可以设置负值的 反方向走(网页方向为正)(漂走的广告)

五、 Layout布局

*display： 是否及如何显示：none隐藏，block块状显示…

*float: 指出了对象是否及如何浮动:值none | left | right

*clear： 清除浮动：none | left | right | both两侧

visibility：设置或检索是否显示对象。visible|hidden|collapse。

与display属性不同，此属性为隐藏的对象保留其占据的物理空间

clip: 检索或设置对象的可视区域。区域外的部分是透明的。 rect(上-右-下-左)

如：clip:rect(auto 50px 20px auto);上和左不裁剪，右50，下20.

*overflow: 超出隐藏：hidden，visible：不剪切内容

overflow-x：内容超过其指定宽度时如何管理内容: visible | hidden | scroll | auto

overflow-y：内容超过其指定高度时如何管理内容

六、Display  在需要使用时 在去使用

Display:block; 以块元素显示   显示

Display:inline; 以行内元素显示

Display:none; 不占位隐藏  配合js

七、Overflow 内容超出元素大小如何处理

Hidden | scroll | auto…

Overflow-x   //只管x轴 如何处理

Overflow-y   //只管y轴 如何处理

八、用户界面 User Interface

*cursor 鼠标指针采用何种系统预定义的光标形状。pointer小手，url自定义

zoom 设置或检索对象的缩放比例： normal|5倍|200%百分比

resize 设置或检索对象的区域是否允许用户缩放，调节元素尺寸大小。

none： 不允许用户调整元素大小。

both： 用户可以调节元素的宽度和高度。

horizontal： 用户可以调节元素的宽度

vertical： 用户可以调节元素的高度。

outline 复合属性：设置或检索对象外的线条轮廓

outline-width 设置或检索对象外的线条轮廓的宽度

outline-style 设置或检索对象外的线条轮廓的样式

outline-color 设置或检索对象外的线条轮廓的颜色

outline-offset 设置或检索对象外的线条轮廓偏移位置的数值

nav-index 设置或检索对象的导航顺序。

nav-up 设置或检索对象的导航方向。

nav-right 设置或检索对象的导航方向。

九、多栏 Multi-column

columns 设置或检索对象的列数和每列的宽度

column-width 设置或检索对象每列的宽度

column-count 设置或检索对象的列数

column-gap 设置或检索对象的列与列之间的间隙

column-rule 设置或检索对象的列与列之间的边框

column-rule-width 设置或检索对象的列与列之间的边框厚度

column-rule-style 设置或检索对象的列与列之间的边框样式

column-rule-color 对象的列与列之间的边框颜色

column-span 象元素是否横跨所有列

column-fill 对象所有列的高度是否统一

column-break-before 对象之前是否断行

column-break-after 对象之后是否断行

column-break-inside 对象内部是否断行

十、表格相关属性：

table-layout 设置或检索表格的布局算法

border-collapse /相邻边框合并/设置或检索表格的行和单元格的边是合并在一起还是按照标 准的HTML样式分开 separate | collapse

border-spacing 设置或检索当表格边框独立时，行和单元格的边框在横向和纵向上的间距

caption-side 设置或检索表格的caption对象是在表格的那一边(/表格标题方向/) top | right | bottom | left

empty-cell 设置或检索当表格的单元格无内容时，是否显示该单元格的边框 hide | sho

十一、 过渡 Transition:

transition 检索或设置对象变换时的过渡效果

transition-property 检索或设置对象中的参与过渡的属性

transition-duration 检索或设置对象过渡的持续时间

transition-timing-function 检索或设置对象中过渡的类型

transition-delay 检索或设置对象延迟过渡的时间

十二、其他属性（了解）

多栏(多列):columns

过渡属性：transition

2D变换：transform

动画：animation

1.Div+css

 无意义标签

2.H5布局 语义化

特点同div 有意义标签 标签名称

见h5布局示例 h5.js IE9以下

3.响应式布局(媒体查询)  bootstrap高级课讲

十三、 动画 Animation

animation 检索或设置对象所应用的动画特效

animation-name 检索或设置对象所应用的动画名称

animation-duration 检索或设置对象动画的持续时间

animation-timing-function 检索或设置对象动画的过渡类型

animation-delay 检索或设置对象动画延迟的时间

animation-iteration-count 检索或设置对象动画的循环次数

animation-direction 检索或设置对象动画在循环中是否反向运动

animation-play-state 检索或设置对象动画的状态

animation-fill-mode 检索或设置对象动画时间之外的状态

十四、 2D变换 2D Transform:

transform 检索或设置对象的变换

transform-origin 检索或设置对象中的变换所参照的原点