html5与css3随笔

css盒模型

对于css的总结
在css中对于div如果使用了float属性则不占外div中的位置（仿佛漂浮在div元素之上）除此之外将position的属性值设置为absolute也会出现上述的效果。

其中的position的属性值是absolute表示元素相对与div的左上角的坐标定位，也是脱离文档流的做法（即它不占div内部的位置），设置属性值为relative表示的是相对于元素本身的位置定位。

Div中属性值display属性值的设定是
Block是隔离隔离其它元素（即一个元素占一个位置）div便默认是此属性
Inline是不可以设置大小，也不可以隔离其他元素

便默认是此属性值
Inline-block是可以设置大小但是不可以隔离其它元素。便默认是此属性值
在css中是不可以将height设置成100%让其显示全屏的body

当我们在最外层的div中设置height为100%时高度为0，当我为内层的div设置height为100%时如内层的div占外div的位置则高度100%就是外围div的高度，如果不占则表示的是占整个body页面的100%高度。（可以使用此方方法使div的高度占body的100%高度）

元素盒类型
css盒模型中的display属性，可以更改元素本身盒类型。其主要的类型有：1.块级元素
2.行内元素，3.行内-块级元素(内联块)；4.隐藏元素

1.块级元素
所谓块级元素，就是能够设置元素尺寸、隔离其它元素功能的元素。比如：

、

等文档元素

2.行内元素
所谓行内元素，不能够设置元素尺寸，它只能自适应内容、无法隔离其它元素，其它元素会紧跟其后。比如
:、等文本元素。

3.行内-块元素
所谓行内-块元素，可以设置元素尺寸，但无法隔离其他元素的元素。
边框的简写形式：border:宽度、样式、颜色

背景图片的书写
background-image:url(loading.gif);

background-size的属性值
auto默认值，图像以本尺寸显示
cover等比例缩放图像，使图像至少覆盖容器，但有可能超出容器
contain等比例缩放图像，使其宽度、高度中较大者与容器横向或纵向重合
background-attachment
scroll默认值，背景固定在元素上，不会随着内容一起滚动
fixed背景固定在视窗上，内容滚动时背景不动

表格
border-collapse边框样式 相邻单元格的边框样式
属性的值
separate：默认值,单元格边框独立
collapse:单元格相邻边框被合并
使用vertical-align属性用于垂直对齐

盒子阴影和轮廓
box-shadow属性：
hoffset阴影的水平偏移量
voffset阴影的垂直偏移量
blur指定模糊值
spread指定阴影延伸半径
color设置阴影的颜色
inset将外部阴影设置为内部阴影
text-overflow属性来控制文本的溢出部分，它的作用是对溢出的部分裁剪掉，然后判定是否添加省略号
clip默认值，裁剪文本时不添加“…”省略号
ellipsis裁剪文本时添加“…”省略号

css3提供了linear-gradient属性实现背景颜色的渐变功能
径向渐变
css3提供了径向渐变，也叫做放射性渐变：radial-gradient属性值
css3边框图片效果
border-image-source //引入背景图片地址
border-image-slice //切割引入背景图片
border-image-width //边框图片的宽度
border-image-repeat //边框背景图片的排列方式
border-image-outset //边框背景向外扩张
border-image //上面五个属性的简写方式

css3变形效果
transform指定应用的变换功能
transform-orign指定变换的起点

css变形效果
transform-style属性是指定嵌套元素如何在3d空间中呈现
flat默认值，表示所有子元素在2d平面呈现
preserve-3d表示子元素在3d空间呈现

过渡效果一般是通过一些简单的css动作触发平滑过渡功能，比如：:hover、:focus、:active、:checked等
指定所用的过渡属性使用transition-property

transition-timing-function当过渡效果运行时，比如产生缓动效果
属性值
ease:速度由快到慢
linear:速度是恒速
ease-in:速度越来越快
ease-out:速度越来越慢，呈一种减速状态
ease-in-out:元素样式从初始状态过渡到终止状态时，先加速，在减速
动画效果animation

页面布局
除了刚才所说的固定长度布局，还有一种是流体布局，就是布局的长度为百分比
position实现元素的绝对定位和相对定位
static默认值，无定位

absolute绝对定位，脱离文档流，以窗口文档左上角0，0为起点，所谓脱离文档流的意思，就是本身这个元

素在文档流是占位的。如果脱离了，就不占有文档的位置，好像浮在了空中一般，有了层次感。

relative 相对定位,相对元素的父元素，不脱离文档流，占位偏移

fixed以窗口参考定位，脱离文档流，会随着滚动条滚动而滚动

css3提供了一个resize属性，来更改元素尺寸大小
none默认值，不允许用户调整元素大小
both用户可以调节元素的宽度和高度
horizontal用户可以调节元素的宽度
vertical用户可以调节元素的高度

使用columns进行多列布局

css3弹性伸缩布局
旧版本
box将容器盒模型作为块级弹性伸缩盒显示
inline-box将容器盒模型作为内联级弹性伸缩盒显示
box-orient主要实现盒子内部元素的流动方向
box-direction属性主要是设置伸缩容器的流动顺序
box-pack属性用于伸缩项目的分布方式
box-align属性用来处理伸缩容器的额外空间
box-flex属性可以使用浮点数分配伸缩项目的比例
box-ordinal-group属性可以设置伸缩项目的显示位置

混合过渡版
flexbox将容器盒模型作为块级弹性伸缩盒显示
inline-flexbox将容器盒模型作为内联级弹性伸缩盒显示
flex-direction属性和旧版本box-orient属性一样，都是设置伸缩项目的排列方式
flex-wrap属性类似与旧版本中的box-lines，设置无法容纳时，自动换行
flex-flow属性是集合了排列方向和控制换行的简写形式
flex-pack属性和旧版本中box-pack一样设置伸缩项目的对其方式
flex-align属性和旧版本中的box-align一样，处理伸缩项目容器的额外空间
flex属性和旧版本中的box-flex类似，用来控制伸缩容器的比例分配
flex-order属性和box-ordinal-group属性一样控制伸缩项目出现的顺序

新版本flexbox
flex将容器盒模型作为块级弹性伸缩盒显示
inline-flex将容器盒模型作为内联级弹性伸缩盒显示
flex-dirction属性和旧版本box-orient属性一样，都是设置伸缩项目的排列方式
flex-wrap属性类似与旧版本中box-lines，但是box-lines，设置无法容纳是自动换行
flex-flow属性是集合了排列方向和控制换行的简写形式
justify-content属性和旧版本中的box-pack一样设置伸缩项目的对齐方式
align-items属性和旧版本中的box-align一样，处理伸缩项目容器的额外空间
align-self和align-items一样，都是清理额外空间，但它是单独设置某一个伸缩项目的。所用值和align-

items一致
flex属性和旧版本中的box-flex类似，用来控制伸缩容器的比例分配
order属性和box-ordinal-group属性一样控制伸缩项目出现的顺序