html&css小问题

Fengxl 11天前 46

三个文档级标签:
Html
Head
Body
背景大小:
background-size:水平高 垂直高
设置一个值的时候,代表宽度,高度会自动根据比例缩放
值:百分比 | 像素 |  cover | contain
cover 铺满盒子 但是可能显示不完图片
contain 显示完图片  但是可能铺不满盒子
CSS3背景属性简写 要加斜杠
background:red  url("  ")  center center no-repeat  /  cover  fixed;
图像拼合精灵例子:
html代码:
<div class="icon  icon01"></div>
<div class="icon  icon02"></div>
<div class="icon  icon03"></div>
css代码:
.icon{
width:36px;   height:36px;
background:url("icon.png") no-repeat;
}
.icon02{
bankground-position:-36px 0px;
}
body的高度问题:
body的高度是内容的大小,不是浏览器的高度;
鼠标移入:
:hover
:active
:visited
:link
顺序:
a:hover 必须在  a:link  和 a:visited  之后;
a:active 必须在 a:hover  之后  。
link >visited>hover>active
定位后的影响:
绝对定位:
1 完全脱离文档流
2 释放空间
3 默认以body的0,0作为参考坐标定位
4 如果父元素有定位,那就以父元素为参考
相对定位:
1 相对自身在原本正常文档流中的位置 作为参考进行偏移
2 不会释放原本的空间
固定定位:
1 完全脱离文档流
2 以浏览器窗口作为参考
3 定位后元素的大小会是内容的大小
定位的层级:
谁有定位,谁层级高
谁后定位 谁高
层级默认都是0  取值范围:浏览器不同,z-index最大最小有差别
z-index 必须在定位后使用
margin的问题:
当上一个div和紧跟着的下一行的div
上一个div设置了margin-bottom:30px;
下一个div设置了margin-top:40px;
最后两个div间距为40px;
原则:正常文档流 上下边距取最大
第四种引入外部样式表
     @import url()
不推荐
伪元素和伪类的区别
伪元素 双冒号 ::hover
伪类 一个冒号
伪元素:利用css来对页面插入假的元素(行内元素)


最后于 3天前 被Fengxl编辑 ,原因: 修改z-index层级取值范围
最新回复 (2)
  • andyhuang 11天前
    0 引用 2
    牛B
  • Mark 11天前
    1 引用 3

    关于z-index 有时候 z-index=100 反而在 z-index=99的下面,谁知道为什么?答对了给你点赞

返回