块级元素: 会单独占一行, 例如<h1>~<h6>
内联元素: 又称行内元素, 多个内联元素占一行, 例如<a>标签
行内块级元素: 行内块级元素显示会与其他相邻元素出现在同一行, 并且两个相邻元素之间存在空白空间. 例如<Button>标签
css 的display 属性
block 块级元素
inline 内联元素
inline-block 块级内联元素
背景图片
background-image: url("abc.png") 默认会铺满
定义图片的排列方式
background-repeat: no-repeat / repeat / repeat-x / repeat-y
初始位置
background-position: center
background-size: 像素值/ 100% 表示充满
案例: 社交账号注册按钮效果
展示效果
行内块级元素对齐方式的一个做法是外层套一个div, 然后设置text-align: center;即可.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>行内块级元素对齐方式</title> <style> div { margin: 0 auto; text-align: center; } a { display: inline-block; /* 设置为行内块级元素 */ /* 行内块级元素允许设置宽度和高度 */ width: 161px; height: 40px; background-repeat: no-repeat; background-size: 100%; } .btn1 { background-image: url("imgs/btn1.png"); } .btn2 { background-image: url("imgs/btn2.png"); } .btn3 { background-image: url("imgs/btn3.png"); } .btn4 { background-image: url("imgs/btn4.png"); } </style> </head> <body> <div> <a class="btn1" href="#"></a> <a class="btn2" href="#"></a> <a class="btn3" href="#"></a> <a class="btn4" href="#"></a> </div> </body> </html>
定位
positon: relative, absolute,
定位中的偏移量
left, top, right, bottom
fixed 固定定位
相对于浏览器窗口定位
absolute 绝对定位
相对于父元素
relative相对定位
相对于原来的标签
其他的一些选择器
伪类选择器
h1: hover {color: red}
层级选择器
案例: 二维码动态效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>二维码的动态效果</title> <style> body { margin: 0px; } #box { width: 100%; height: 100px; background-color: black; position: fixed; bottom: 0px; } #wechat { width: 44px; height: 44px; background-image: url("imgs/wechat.png"); background-repeat: no-repeat; background-size: 100%; margin: 28px auto; position: relative; } #code { display: none; width: 180px; height: 180px; background-color: white; background-image: url("imgs/code_wps.jpg"); background-repeat: no-repeat; background-size: 100%; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='male.png', sizingMethod='scale'); position: absolute; left: -66px; bottom: 70px; } #wechat:hover { background-image: url("imgs/wechatH.png"); } #wechat:hover>#code { display: block; } </style> </head> <body> <!-- 用于包含二维码所有的内容，显示在页面中的底部 --> <div id="box"> <!-- 用于显示微信图标 --> <div id="wechat"> <!-- 用于显示/隐藏二维码图片 --> <div id="code"></div> </div> </div> </body> </html>
底部的黑条用的是
固定定位, 然后宽度100%, 高度100像素, 距离底部0像素
#box { width: 100%; height: 100px; background-color: black; position: fixed; bottom: 0px; }
微信图标居中显示
采用相对定位.
margin: 28px auto; 表示上下各间隔(100-44) /2 = 28像素, 左右则是auto间隔.
然后鼠标放上去的效果则是 #wechat:hover { background-image: url("imgs/wechatH.png"); }
#wechat { width: 44px; height: 44px; background-image: url("imgs/wechat.png"); background-repeat: no-repeat; background-size: 100%; margin: 28px auto; position: relative; }
然后是二维码的展示
采用绝对定位, 相对于父容器.
bottom为70像素. 44 + 28 = 72更为合理些, 给我的感觉是距离父容器底部坐标的距离
left 为-66px. 大概是(180-44) / 2 = 68 的样子, 给我的感觉是距离父容器左边的距离.
默认display: node, 但是方式去就是指定的block的效果
