css属性-元素类型

根据显示方式

块级元素(block-level elements)

1. 独占父元素的一行
2. 可以设置宽高
3. div /h1~h6/ul/ol/li/p//pre/table/form/

行内级元素(inline-level elements)

1. 多个行内级元素在父元素可以同行显示
2. span/strong/img/input/a/

替换元素和非替换元素

替换元素(replaced elements)

1. 元素本身没有实际内容,浏览器根据元素的类型和属性,来决定元素的具体显示内容
2. img/input/iframe/video/embed/canvas/audio/object等

非替换内容(no-replaceed elements)

1. 有实际内容,根据自己的值显示
   • 

display 

1. block :让元素显示为块级元素
2. inline  :让元素显示为行内元素
3. none: 隐藏元素, 不占空间
4. inline-block　 :让元素同时具备块级元素和行内元素的特点
   1. 可以设置宽度和高度
   2. 可以和其他元素在同行显示
   3. 宽高默认值由内容决定
   4. 可以理解为,对外来说,它是行内元素(同行显示),对内来说,是块级元素(可以设置宽高)
5. 

visibility:

隐藏,但是还是占据空间

1. visible 显示
2. hidden 隐藏

overflow:

用于控制元素的溢出行为

1. hidden : 溢出内容隐藏
2. visible:溢出内容照样可见
3. scroll:溢出部分会隐藏,但是通过滚动可见
   1. 　　滚动条会占据高度和宽度
4. auto: 有超出部分,会设置滚动,没有溢出,正常显示
5. 还有overflow-x ,overflow-y 设置X方向,y方向的形式,

行内级元素的空格

原因:行内级元素的代码之间如果有空格,会被解析显示为空格

解决: 

1. 代码之间删除空格
2. 注释掉空格
3. 设置父元素的font-size为0,然后在元素中重新设置自己想要的font-size(Safari不适用)
4. 给元素加float(常用)

元素之间的嵌套:

1. 块级元素和行内块级(inline-block)元素可以任意嵌套(一般情况下)
2. 行内元素里面不要嵌套块级元素
3. p元素不要嵌套块级元素