CSS标签知识

Posted 2020-07-29 yuan纷飞

一、内联标签和块标签的区别

内联，内嵌，行内属性标签：
1、默认同行可以继续跟同类型标签；
2、内容撑开宽度
3、不支持宽高
4、不支持上下的margin和padding
5、代码换行被解析

块属性标签：
1、默认独占一行显示；
2、没有宽度时，默认撑满一排
3、支持所有css命令

二、display

display:block; 显示为块
display:inline; 显示为内嵌

display：inline-block
特性：
1、块在一行显示；
2、行内属性标签支持宽高；
3、没有宽度的时候内容撑开宽度

问题：
1、代码换行被解析（一个空格大小）；
2、ie6 ie7 不支持块属性标签的inline-block;

 

解决办法用float标签

 

三、float标签

浮动: left/right/none

元素加了浮动，会脱离文档流 ，按照指定的一个方向移动直到碰到父级的边界或者另外一个浮动元素停止

1.使块元素在一行显示

2.使内嵌支持宽高

3.不设置宽度的时候宽度由内容撑开

4.脱离文档流

5.提升层级半层（标签的内容会被挤出来）

文档流是文档中可显示对象在排列时所占用的位置

 

clear left/right/both/none 元素的某个方向不能有浮动元素

四、光标类型

cursor:text(文本类型)|pointer（光标呈现为指示链接的指针（一只手））|default（ 默认光标（通常是一个箭头））

改变当前页的鼠标图形：body{height:1500px; cursor:url(hand.cur),pointer;}    

注意：用图片cur不存在兼容性问题。

 

五、前端规范

1、所有书写均在英文半角状态下的小写；

2、id，class必须以字母开头；

3、所有标签必须闭合；

4、html标签用tab键缩进；

5、属性值必须带引号；

6、<!-- html注释 -->（注意：符号之间有空格，负责容易出现兼容性问题）

7、/* css注释 */（注意：符号之间有空格，负责容易出现兼容性问题，尤其IE6下）

8、ul,li/ol,li/dl,dt,dd拥有父子级关系的标签；

9、p,dt,h标签 里面不能嵌套块属性标签；

10、a标签不能嵌套a；

11、内联元素不能嵌套块；