总结HTML5（二）

渐变

线性渐变 linear-gradient

linear-gradient:(angle,color value,color value........)
angle:为第一个参数，指定渐变的方向，可以是角度值，也可以是关键字，如to top(对 应0deg),to right(对应90deg),to bottom(对应180deg),to left(对应270deg)

径向渐变

radial-gradient(size at postion,xolor value,color vlaue....)
position:为第一个参数，指定渐变的圆心位置，默认值我center,可以取值为数值、百分比，或者关键字；此参数可以省略

重复渐变

repeating-redisl-gradient
字体属性
指定字体 font-family:value1,value2,.......
字体大小 font-size:19px/2em;
字体加粗 font-weight:normal/bold/value;
字体样式 font-style:normal/italic;
小型大写字母显示 font-variant : normal/small-caps;
简写 font:font-style font-variant font-weight font-size font-family;

文本格式

文本颜色 color：value
文本排列 text-align：left/right/center
文本修饰 text-decoration:none/underline;
行高 line-height:value;
将行高设置和容器的高一样，可实现单行文本的垂直居中
首行缩进 text-indent:value;
用em实现缩进,缩进换行针对的是p元素
文本阴影 text-shadow:h-shadow v-shadow blur color
文本阴影建议设置较小值

溢出

处理空白：white-space:normal/nowrap;
文本溢出：text-overflow:clip/ellipsis;
ellipsis:让没有显示的文本用省略号提示用户

表格常用样式属性

内边距：padding
宽/高：width/height

border属性：设置表格的边框

背景属性：设置表格或者单元格的背景色或者背景图像
垂直方向对齐: vertical-align:top/middle/bottom 在表单元格中，设置单元格框中的单元格内容的对齐方式
边框合并:border-collapse:separate/collapse;
边框边距border-spacing:value value;

设置相邻单元格的边框间的距离

指定一个值：该值同时应用于水平和垂直间距
指定两个值：第一个值指定水平间距，第二个值指定垂直间距，且两个值之间用空格隔开。

标题位置caption-side:top/bottom;

显示规则table-layout:auto/fixed;
table-layout属性用来帮助浏览器如何显示或者一张表，即用来设置显示表格单 元格、

行、列的算法规则

atuo:列宽度由单元格内容设定，为默认值，即自动表格布局
fixed:列宽由表格宽度和列宽度设定，即固定表格布局
自动表格与固定表格的优缺点：

自动表格布局

单元格的大小会适应内容的大小
在表格复杂时会比较慢
适用于不知道没一列的确定大小

固定表格布局

取决于表格宽度、列宽度、表格边框宽度、单元格间距而与单元格的内容无关
会加速表的显示，因为浏览器在接收到第一行后就可以显示表格
固定布局算法比较快，但是不太灵活
自动算法比较慢，不过更能反映传统的HTML表

浮动

定位：定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素
甚至浏览器窗口本身的位置

普通流定位

页面中的块级元素框从上到下一个接一个地排列
每一个块级元素都会出现在一个新行中(比如p元素、div元素)
元素框之间的垂直距离是由框的垂直外边距计算出来的
内联元素将在一行中从左导游排列水平布置
不需要从新行开始
可以使用水平内边距、边框和外边距调整他们的间距

浮动定位

浮动定位是指
将元素排除在普通流之外，即元素将脱离标准文档流
元素将不在页面占用空间
将浮动元素放置在包含框的左边或者右边
浮动元素依旧位于包含框之内
浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止
经常使用它来实现特殊的定位效果
浮动元素的外边缘不会超过其父元素的内边缘
浮动元素不会互相重叠
浮动元素不会上下浮动

float属性

float:none/left/right;
div{
border:1px solid black;
width:50px;
height:50px:
float:left;
}

1

2

3

clear属性

clear：none/left/right/both
clear属性用于清除浮动所带来的影响
both:都清除

我是DIV

我是段落

我是DIV

我是段落

float与overflow

包含框内的元素被应用了float之后，包含框的高度会发生变化
设置了overflow:hiddent;后包含框高度不会发生变化

parent{

width:200px;
border:1px solid black;
}

parent div{

width:50px;
height:50px;
border:1px solid red;
float:left;
}

我是DIV1

我是DIV2

包含框

parent{

width:200px;
border:1px solid black;
overflow:hidden;
}

parent div{

width:50px;
height:50px;
border:1px solid red;

float:left;
}

我是DIV1

我是DIV2

包含框

显示

display属性 display:none/block/inline/inline-block

none:该框及其所有内容就不再显示，不再用文档中的空间，脱离文档流
block:让行内元素像块级元素一样
inline:让块级元素像行内元素一样
inline-block:行内块元素，本身是行内元素，但又具备块级元素的特征，一行内允许显示多个元素，并且可以修改宽和高
链接1
链接2
链接3
链接1
链接4
链接5

visibility属性 visibility:visible/hidden/collapse

visible:默认值，元素可见
hidden:元素不可见，但是依然占据空间
collapse:用在表格元素时，可删除一行或一列，
且不影响表格的布局

div 1

div 2

div 3

display:none与visibilityhidden区别

display:none , 不显示生成的元素，并且脱离文档流。
visibility:hidden ,隐藏元素，但是没有脱离文档里，依然占据页面空间。

opacity属性 opacity:value

value规定不透明度，值从0.0-1.0 （没有px）
0为完全透明，1完全为不透明

vertical-align属性

设置单元格中的内容的垂直对齐方式
可以设置 行内块(img等) 元素的垂直对齐方式
给 img 设置 vertical-align，设置图片两端的文本 相对于图片的垂直对齐方式。

vertical-align:baseline/top/bottom/middle

baseline:默认，元素放在父元素的基线上
middle:把此元素放置在父元素的中部
top:把元素的顶端与行中最高元素的顶端对齐
bottom:把元素的顶端与行中最低元素的顶端对齐

光标

cursor 属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状
default : 默认值
pointer : 小手
crosshair : +
text : I
wait : 等待
help : 帮助

列表属性

列表项标志 list-style-type

无序列表取值

none:无标记
disc:实心圆，为默认值
circle:空心圆
square:实心方块

有序列表取值

none:无标记
decimal：数字，为默认值
lower-roman:小写罗马数字(如i,ii,iii,iv,v)
upper-roman:大写罗马数字（如I,II,III,IV,V）

列表项图像list-style-image

list-style-image属性使用图像来替换列表项的标记取值为url,指定图像作为有序或无序列表项的标志

列表项位置

list-style-position：outside/inside
outside:标记放在文本左侧，且放在文本以外，为默认值
inside:标记放在文本以内

浮动定位

相对定位 position：relative
相对于元素本身的位置去偏移某个距离，不会对其他元素有影响
通过top/bottom/left/right来设置相对于原来位置的偏移量
特点:
元素仍保持其未定位前的形状
元素原本所占的空间仍保留
元素框会相对于它原来的位置偏移某个距离

绝对定位

相对于最近的已定位祖先元素去偏移某个距离，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含框去实现定位(如body)
特点：
绝对定位的元素会脱离文档流
绝对定位的元素会变成块级元素
position：absolute
通过top/bottom/left/right来设置相对于原
relative，absolute，fixed 中的任何一种定位方式都可以称为已定位元素来位置的偏移量

div1

div2

div1

div2

固定定位 position：fixed

将元素固定在页面的某个位置处，不会随着滚动条而发生位置的变化。

堆叠顺序

通过z-index来改变元素的层级关系

如果要使z-index生效，必须使该元素定位
z-index的值，谁大谁大听谁的，无单位
.d1{
position:relative;
top:50px;
left:70px;
z-index:12;
background-color:red;
}
.d2{
position:relative;
top:3px;
left:3px;
background-color:blue;
z-index:8;