单位 px(像素),em(1 em = 1 font-size)
文本装饰(上中下划线) text-decoration:line-through(中划线)/underline(下划线)/none; 光标定位值 当光标移到元素上时,光标形状发生改变。 cursor;: 伪类选择器 html部分 <a href="www.baidu.com">www.baidu.com</a> css部分 a:hover{ background-color: red; }当鼠标移上去时元素会发生变化。
内容决定元素所占位置 不可以通过CSS改变宽高 span strong em a del
块级元素 独占一行 可以通过CSS改变宽高 div p ul li ol form address行块级元素 内容决定大小 改以改变宽高 img凡是带有inline的元素都有文字特性(会被空格分割)例如:img。
行级元素只能嵌套行级元素块级元素可以嵌套任何元素盒子的组成部分:
1.盒子壁(border)
2.内边距(padding)
3.盒子内容(content = width + height)
盒子模型=margin(外边距) + border + padding + content
margin/padding: xxpx xxpx xxpx xxpx; 上 右 下 左 margin/padding: xxpx xxpx xxpx; 上 左右 下 margin/padding: xxpx xxpx; 上下 左右盒模型计算 可视区(真正)宽高 = width/height + border + padding
定位后的元素会脱离原来的层 用z-index: 1;来改变层数。
相对定位(relative) 保留原来位置进行定位 position:relative; 相对于自己原来的位置进行定位。绝对定位(absolute) 脱离原来位置进行定位 position:absolute; 相对于最近的有定位的父级进行定位,如果没有父级,相对于文档进行定位。广告定位(fixed) position:fixed; 不会随页面滚动条滚动而变换位置。 定位中的两个经典BUGmargin塌陷 父子嵌套的元素,垂直方向的margin,父子结合在了一起,共同取最大值。bfc(块级格式化上下文) 如何触发一个盒子的bfc: 1.设置position:absolute; 2.设置display:inline-block 3.float:left/right; 4.overflow:hidden;
解决办法:
> 例子 html部分 <div class="circle"> <div class="cir1"></div> <div class="cir2"></div> <div class="cir3"></div> <div class="cir4"></div> <di class="cir5"v></div> </div> css部分 *{ margin: 0; padding: 0; } .circle{ position: absolute; left: 50%; top: 50%; margin-top: -93px; margin-left: -190px; } .cir1, .cir2, .cir3, .cir4, .cir5{ position: absolute; width: 100px; height: 100px; border: 10px solid black; border-radius: 50%; } .cir1{ border-color: blue; left: 0; top: 0; } .cir2{ border-color: red; left: 130px; top: 0; z-index: 1; /*改变红环层数*/ } .cir3{ border-color: yellow; left: 260px; top: 0; } .cir4{ border-color: green; left: 65px; top: 70px; } .cir5{ border-color: pink; left: 195px; top: 70px; }