html欢饮滚动条,HTML和CSS基础知识的总结

form标签 有method和action属性

表单域filedset

input标签

type属性，size属性等

select标签(要写name，id等属性)

option标签(要写value属性和nanme属性等)

optgroup对下拉框进行分组

用label标签

的for属性规定与哪一个元素绑定(for='这是id名')

Talbe标签

由thead(可以省略)、tbody、tfoot(可以省略)、tr、th(表头信息，文本加粗居中)、td(普通文本左对齐)、caption、colgroup

cellpadding

属性是内容与单元格到边框的间距

cellspacing

属性是单元格之间的间距

如果需要横跨多个列或者多个行使用colspan和rowspan

了解完了html标签我们就能编写没有css样式的网页了，来解释html标签当然是浏览器了。

浏览器名 浏览器内核

浏览器内核前缀

谷歌浏览器、苹果浏览器

webkit、(blink最新版)  -webkit-

IE浏览器  trident  -ms-

欧朋浏览器  persto (最新版为webkit内核)  -o-

火狐浏览器  gecko  -moz-

………………………………………………………………………………CSS………………………………………………………………………………………………………………………………….

css引入方式有三种引入方式：标签内联、页面内嵌样式、外部引入(link和@important(不推荐使用))

这三种的引入方式的优先级：标签内联样式>页面内嵌样式>外部文件样式>浏览器默认样式

外部文件样式：

优点：

有利于维护；

代码简洁美观，便于前后台的协作；

只向服务器提交一次请求，整站载入速度快；

缺点：

单页载入慢

需要向服务器提交请求，造成服务器压力大

页面内嵌样式：

优点：

载入速度快

减少了向服务器提交请求的压力

缺点

不利于维护

标签内联样式：

优点：

速度最快，直接作用于标签

缺点：

代码繁杂

Id选择器>

class选择器

>标签选择器(class选择器无论权重加起来比id选择器大，ID选择器仍然优先级大)

background缩写方式:color |image |position |attachment

|repeat

font缩写方式：style|

weight| size| family

vertical-align:'top

| bottom |middle'它只对table支持的较好

text-align：'right|left|center|justify'

对于元素垂直居中有很多办法，但是用display：table-cell

水平方向text-align：center

垂直方向：vertical-align：middle，这种方法不管你多宽多大都是通用的。

margin-top| right | bottom |

left(顺时针方向)外边距

padding-

top| right | bottom | left(顺时针方向)内边距

border-

top| right | bottom | left(顺时针方向)边框

border-style:solid | dotted | dashed |

none边框样式

border-color边框颜色(切记不要把border缩写成 border：5px 7px 5px

6px)

下面这个图，就是利用margin负值来实现的

Float：left | right

浮动对行内元素的影响

行内标签默认是不能设置宽高，都是内容撑开宽高

浮动对块元素的影响

块元素默认都是占满一行，在没有设置宽度的情况下浮动，内容撑开宽高

清除浮动

Clear：both | left | right

这个图主要考察你的浮动布局和IE6的经典3像素bug

clear:left;

禁止左侧出现浮动元素,如果左侧存在浮动元素,则当前元素将在浮动元素下面另起一行呈现.

clear:right;

禁止右侧出现浮动元素,如果右侧存在浮动元素,则右侧的浮动元素将在当前元素下面另起一行呈现.

clear:both;

禁止左右两侧出现浮动元素,当前元素将排斥浮动元素独占一行呈现.

上面提到的行也可能是多行组成的一个块,不仅仅是一个文本行的概念.

空标签清除浮动

加入一个空标签，可以是任何标签，但是空标签会增多多余的代码

class='chennengbao'>

.Chennengbao {

Clear: both;

Height: 0;

Overflow: hidden;

}

优点：容易掌握

缺点：增加大量无语义空标签，结构和样式分离，不利于维护。

其中clear是来清除浮动的，IE6会默认行高撑开高度，用height和overflow来解决

Overflow：hidden来清除浮动

在浮动的父标签里面加入overflow：hidden；

优点：结构和样式分离，代码量少

缺点：超出内容隐藏，无法显示需要溢出的元素内容

after元素清浮动

.clearfix: after{

content:"\200B";

display:block;

height:0;

clear:both;

}

.clearfix{

*zoom:

1;

}

overflow：auto(了解)

缺点：多层嵌套之后，火狐浏览器在某些情况下会造成内容全选，IE的mouseover造成块宽度改变时，会使最外

层模块出现滚动条

让父元素发生浮动

缺点：会使父元素相邻元素的布局受到影响，不可能一直浮动到body；

br标签清浮动

父元素设置display：table

display:block |

none(该元素隐藏不显示) | inline | table

|inline-block(允许空格，在同一行，可以设置宽高)

display:none(没有占物理空间)

visibility:hidden元素隐藏(有占物理空间)

position：absolute relative

static(默认值)

fixed(可定位相对于浏览器窗口的指定坐标)

inherit

语法：right bottom top left：length |auto

position:relative 对于元素的显示效果没有影响

position：absolute

会对元素的显示效果造成影响。元素默认内容撑开宽高，但是可以设置宽高。

相对-绝对关系：

如果父级设置了position，参照(最近的)父级的内容区域的左上角为初始点，结合top

left right bottom 进行定 位；

如果没有设置，往其父级继续寻找，直到找到为止，如果一直没有，则相对与body进行定位

hack技术

_属性：属性值 ； IE6

+属性：属性值； IE7

*属性：属性值； IE6-IE7

属性：属性值\9； IE6、IE7、IE8

属性：属性值\0；所有IE

缺点：可读性差，可扩展性差，无形中增加代码的大小

优点：解决一些非常棘手的问题

透明度

rgba(255,255,255,0.4)

最后一个代表透明度(范围0~1)

opacity(不透明度)属性定义元素的不透明度

值为1元素是完全不透明，值为0是完全透明的看不见的。

filter的取值是100~0

因为IE不支持opacity，只支持自己的滤镜filter：alpha(opacity=50)

转发至微博

转发至微博