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属性一样控制伸缩项目出现的顺序