<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>咸鱼联盟</title> <style> /* css层叠样式表 */ *{ margin: 0; padding: 0; } .box-one{ width: 200px; height: 100px; background-color: green; } .box-two{ width: 200px; height: 100px; background-color: pink; cursor: url("img/2.gif"),pointer; } a{/* 可以通过display:block将行内元素转换为块级元素 */ /*display: block;*/ /*width: 200px;*/ /*height: 100px;*/ background-color: red; font-size: 16px; } body{ font-size: 0; } .box-three{ /* 设置鼠标样式cursor */ width: 200px; height: 200px; background-color: blue; cursor: url("./img/2.gif"),pointer; } </style> </head> <body> <div class="box-one">咸鱼联盟</div> <div class="box-two">咸鱼联盟</div> <a href="https://www.baidu.com">百度一下</a> <a href="https://www.baidu.com">百度一下</a> <div class="box-three"></div> <!-- 标签和元素的关系 <div class="box-one">咸鱼联盟</div> 元素 = 标签+文字内容 标签的分类 怎么判断元素是块级/行内/行内块 ===>选中标签开发者工具中computed模块的display属性决定 块级元素(display=block) div p ul li h1 h2 h3 h4 h5 h6 ... 行内元素(display=inline) a image span 行内块元素(display=inline-block) input 块级元素 独自占据一行;width/height/margin/padding都有效;margin:auto支持 行内元素 不独自占据一行;width/height无效;上下margin无效;上下padding只对自身有效;margin:auto不支持 只对自身有效的意思是不管上下的元素,padding会撑大盒子但是不会占新的空白地，而是会直接覆盖上下两边的盒子 行内块元素 不独自占据一行;width/height/margin/padding都有效;margin:auto不支持 在css中可以通过添加display来改变元素 block inline inline-block none(隐藏) a标签如果没有输入内容:存在但是不显示 none是不存在 两个行内元素之间有空格的原因:第一个a标签通过回车后才有第二个a标签 解决方案1:写在一行,但是后期可读性不高 解决方案2:注释掉两个标签中间所有的空格 解决方案3:css中添加 body{ font-size: 0; } cursor属性:设置鼠标样式 cursor:point(小手掌)move(十字架移动)wait(正在加载)help(问号) cursor: url("img/2.gif"),pointer;(自定义鼠标形状) --> </body> </html>
