显示类型转换

块级元素

• div | p | dl | form | h1~h6 | ol | ul | li

块级元素的特点

1.独占一行;

2.可以设置宽高;.默认宽度是父元素的100%,高度为0px

3.可以设置正常上下外边距和内边距

4.结构上:内部可以包裹其他任意类型元素

​p标签里面不能放块级标签，否则会自动加上结束标签。

行内元素

• a | b | em | i | img | span | strong

行内元素(内联元素)的特点

1. 不独占一行,
2. 行内元素就不能设置宽高.宽高由里面的内容撑开
3. 左右外边距内边距边框有效 上下外边距内边距边框无效, auto水平居中无效.
4. 标签之间解析空格
5. 结构上:内部不能放块元素

a标签能包裹块级元素(特殊,区域链接)

img {
	width: 500px;
	height: 500px;
}

img虽然可以设置宽高但是其实是行内元素而非行内块元素

行内块元素

inline-block: (input,select)

行内块元素特点

1. 本质上是行内元素,具有块内元素的性质.
2. 支持宽高,但是宽高都是由里面内容撑开
3. 上下左右外边距内边距有效,不支持auto水平居中
4. 标签之间的空格解析
5. 结构上：内部可以包裹其他任意类型元素

对齐方式

基线对齐,盒子在没有内容的时候,最底部就是基线,盒子里面有内容的时候,根据盒子内容最下面一行字的基线为准

display:none

1. 不占据空间，无法点击交互

2. 内部后代元素也不会显示

3. display为none的元素浏览器不会渲染

默认样式

通常情况下,游览器会为元素设置一些默认样式,

默认样式的存在会影响到页面的布局，通常情况下写代码前必须要去除游览器的默认样式(pc端的页面)

鼠标样式

使用cursor属性,设置鼠标样式

cursor: pointer;  /* 常用样式，手指点击，常用于表示可点击的元素，比如链接 */
cursor: move;     /* 表示对象可以移动 */
cursor: wait;     /* 表现正在加载 */
cursor: help;     /* 表示需要帮助 */
cursor: url("5.png"),pointer;   /* 自定义鼠标样式 */

图片格式一般要使用.cur和.ani为后缀图片,如果要使用png和gif大小最好不能超过32*32