8.CSS1
1. CSS样式：定位：
定位一般都是和left/right/top/bottom连用
-
fixed: 固定定位。广告跟着滚动条走。
- 文档流中清除位置。相对与整个窗体定位
-
relative：相对定位： 保留原位置， 相对于原来的位置
-
absolute: 绝对定位： 清除原位置， 相对于非static父如果父没有定位相对与窗口。场景：绝对定位的父是相对定位
-
static: 默认
-
z-index;必须和定位联用。大值在上面
<style>
div>div {
width: 100px;
height: 100px;
}
div>div:nth-of-type(1) {
background-color: red;
}
div>div:nth-of-type(2) {
background-color: green;
position: relative;
top: 50px;
right: 50px;
/* z-index: 1; */
}
div>div:nth-of-type(3) {
background-color: pink;
/* position: relative;
z-index: 2; */
}
.a1 {
width: 600px;
height: 600px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="a1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
2. visibility: 显示与不显示
-
display: none;不显示， 清除位置
-
visibility:hidden; 不显示，保留位置
- visible: 可见的。
<script> var flg = false; function abc() { document.getElementById("a1").classList.remove("show"); document.getElementById("a1").classList.remove("hide"); if (!flg) { document.getElementById("a1").classList.add("hide"); document.getElementById("btn").innerHTML="显示" } else { document.getElementById("a1").classList.add("show"); document.getElementById("btn").innerHTML="隐藏" } flg = !flg; } </script> <style> .show { /* 显示 */ visibility: visible; } .hide { /* 隐藏，保留了位置 */ visibility: hidden; } .show1 { display: block; } .hide1 { /* 隐藏，不保留了位置 */ display: none; } </style> </head> <body> <button id="btn" onclick="abc();">显示</button> <div id="a1"> akslfjalkfjalksfjklas </div> 22222222
3. float: 浮动
场景：UL>LI的横向显示。
-
float:left； 左浮动
-
float:right:右浮动
-
float:inherit: 继承
※**浮动要清除 **
clear: both/left/right;
<style> div>div { border: 1px solid blue; width: 200px; } div.a2 { background-color:red; } div.a1 { float: left; } </style> <div> <div class="a1"> 1 </div> <div class="a1"> 2 </div> <div style="clear: left;"></div> <div class="a2"> 34242 </div> </div>4. CSS: 整理
文字相关;
-
font-size
-
color
-
font-famliy
-
font-weight
-
font-style
-
text-decoriation
-
letter-spacing
-
text-indent
-
white-space: nowrap; 不换行
- nobr标签，一般人不知道
-
overflow: hidden/scroll; 区域 内容超出时处理
-
text-overflow: ellipsis； 单行超出时文本处理
... -
word-break: break-all; 强制断行。英文效果明显
-
text-shadow; x轴 y轴 阴影宽 颜色； css3
text-shadow: -10px -10px 5px red; -
columns: n; 显示几列
-
column-width: 指定列宽
-
column-gap; 指定间距
-
@font-face{}关联自定义字体
@font-face {
font-family: 'myfont';
src: url('./fonts/glyphicons-halflings-regular.eot');
src: url('./fonts/glyphicons-halflings-regular.eot?#iefix')
format('embedded-opentype'),
url('./fonts/glyphicons-halflings-regular.woff2') format('woff2'),
url('./fonts/glyphicons-halflings-regular.woff') format('woff'),
url('./fonts/glyphicons-halflings-regular.ttf') format('truetype'),
url('./fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular')
format('svg');
}
.a3::before {
font-family: 'myfont';
content: '\e021';
}
3 CSS3类动画相关
第一种
-
变形： transform:
- translate: 位移
- rotate： rotate旋转角度
- scale: 缩放
- skewY：倾斜
- 万能的！记不住
-
过渡
- transition: 样式 周期秒数 过渡效果 延迟
/* 变形 + rotate旋转角度 translate位移 scale缩放 skew倾斜*/ /* transform: translateX(300px) rotateY(180deg) rotateX(180deg) scale(1.2) skewY(180deg); /* 使用webkit类型浏览器 */ /* -webkit-transform: rotateY(360deg); */ /* 过渡 all（所有的样式）1s内完成 ease慢入 0sdelay延迟 */ /* transition: all 10s ease-in 0.5s; */
第二种：万能的动画
关键帧与过渡帧。。。。。只写关键帧。过渡自动补全
- @keyframes 动画名{0% from {} 100%to{} }
- animation: 动画名 周期 过渡效果 延迟 次数（infinite）
animation: abc 2s ease-in 0s infinite;
}
@keyframes abc {
0% {
}
50% {
transform: translateX(300px) rotateY(180deg) rotateX(180deg) scale(1.2) skewY(180deg);
}
0% {
transform: translateX(0px) rotateY(360deg) rotateX(360deg) scale(1) skewY(360deg);
}
}
