# 显示类型转换
# 块级元素
- div | p | dl | form | h1~h6 | ol | ul | li
# 块级元素的特点
1.独占一行;
2.可以设置宽高;.默认宽度是父元素的100%,高度为0px
3.可以设置正常上下外边距和内边距
4.结构上:内部可以包裹其他任意类型元素
p标签里面不能放块级标签,否则会自动加上结束标签。
# 行内元素
- a | b | em | i | img | span | strong
# 行内元素(内联元素)的特点
- 不独占一行,
- 行内元素就不能设置宽高.宽高由里面的内容撑开
- 左右外边距内边距边框有效 上下外边距内边距边框无效, auto水平居中无效.
- 标签之间解析空格
- 结构上:内部不能放块元素
a标签能包裹块级元素(特殊,区域链接)
img {
width: 500px;
height: 500px;
}
1
2
3
4
2
3
4
img虽然可以设置宽高但是其实是行内元素而非行内块元素
# 行内块元素
inline-block: (input,select)
# 行内块元素特点
- 本质上是行内元素,具有块内元素的性质.
- 支持宽高,但是宽高都是由里面内容撑开
- 上下左右外边距内边距有效,不支持auto水平居中
- 标签之间的空格解析
- 结构上:内部可以包裹其他任意类型元素
对齐方式
基线对齐,盒子在没有内容的时候,最底部就是基线,盒子里面有内容的时候,根据盒子内容最下面一行字的基线为准
# display:none
不占据空间,无法点击交互
内部后代元素也不会显示
display为none的元素浏览器不会渲染
# 默认样式
通常情况下,游览器会为元素设置一些默认样式,
默认样式的存在会影响到页面的布局,通常情况下写代码前必须要去除游览器的默认样式(pc端的页面)
# 鼠标样式
使用cursor属性,设置鼠标样式
cursor: pointer; /* 常用样式,手指点击,常用于表示可点击的元素,比如链接 */
cursor: move; /* 表示对象可以移动 */
cursor: wait; /* 表现正在加载 */
cursor: help; /* 表示需要帮助 */
cursor: url("5.png"),pointer; /* 自定义鼠标样式 */
1
2
3
4
5
2
3
4
5
图片格式一般要使用.cur和.ani为后缀图片,如果要使用png和gif大小最好不能超过32*32