对于css的学习,感谢MDN与W3school提供的优秀资料
随着学习的深入,此文章持续更新...
css中一些踩过的坑:
inline是按照基线对齐的,可通过vertical-align调节2个
inline-block中间的空格是字体大小空格,将父元素字体大小设为0可取消优先使用
overflow:auto不同系统处理不一样个人觉得css处理文本长度不如js处理稳定
伪元素
::before是真的一个元素,伪类:hover是一种状态hack处理....愿世界没有ie...建议找一个不那么在意兼容的工作
float布局会导致父元素高度坍塌,可以使用overflow:auto或者添加下方这个伪元素处理
::after {
content: '';
display: block;
clear: both;
}
最佳显示宽度
首先，网页的缺省宽度，确定为满足1024px宽度的显示器。这不仅因为1024x768是现在最常见的分辨率，还因为这个宽度对网页最合适：
1）它放得下足够的内容，足够三栏的布局；
2）单行文字不宜太长，1024px已是极限，否则容易产生阅读疲劳；
3）在当前的互联网带宽条件下，网页难以采用大分辨率所要求的大尺寸图片。
其次，网页宽度会在780px-1260px的范围内，自动变化，即最小不小于780px，最大不超过1280px。
最后，对于更大的分辨率，网页内容会自动居中。
下面就是CSS文件的写法，只要4行。需要注意的是，这几行的语句都针对整个页面，即body标签或者最外层的那个div区域。
margin: 10px auto;
这一行保证了网页在任何分辨率下，都会居中。
min-width: 780px;
max-width: 1260px;
这二行规定了网页的最小和最大宽度。
另外，如果想让内层的各个区块也自动伸缩，它们的宽度可以采用百分比的形式，比如：
#div-left{
width:50%;
}
#div-right{
width:50%;
}
媒体查询-响应式开发
响应式设计就是一套 CSS 根据当前的分辨率选择不同的样式
媒体查询主要用来:
- 检测媒体的类型, 比如 screen, tv等
- 检测布局视口的特性, 比如视口的宽高分辨率等
<style>
@media all and (min-width: 200px) and (max-width: 300px){
body {
background: red;
}
}
/* 网易移动端字体设置 */
@media screen and (max-width: 321px) {
body {
font-size:16px
}
}
@media screen and (min-width: 321px) and (max-width:400px) {
body {
font-size:17px
}
}
@media screen and (min-width: 400px) {
body {
font-size:19px
}
}
/* 横屏设置
orientation：portrait | landscape
portrait：指定输出设备中的页面可见区域高度大于或等于宽度
landscape： 除portrait值情况外，都是landscape
*/
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
</style>
上面代码中, all 是媒体类型, 代表任何设备
and 是逻辑操作
意思是, 对于任何设备, 在宽度在 200-300 的范围内应用这个样式
伪类
a:link { color: white; text-decoration: none; } /*未访问--去下划线*/
a:visited{ color: black; } /*已访问--去下划线*/
a:hover { color: red; cursor: pointer; } /*悬停--鼠标样式*/
a:active { color: lightblue; } /*选定*/
a.class:visited {color: white;} /* 独立伪类 */
定位 position
| 值 | 描述 |
|---|---|
| static | 默认 static
|
| relative | 相对定位 可相对自身偏移 |
| absolute | 完全绝对定位, 忽略其他所有东西, 往上浮动到 非 static 的元素 |
| fixed | 基于 window 的绝对定位, 不随页面滚动改变 |
非 static 元素可以用 top left bottom right 属性来设置坐标
非 static 元素可以用 z-index 属性来设置显示层次
- e.pageX——相对整个页面的坐标
- e.clientX——相对可视区域的坐标
- e.offsetX——相对当前坐标系的border左上角开始的坐标
常用css
/*截断文本 max-width:100%;*/
.truncate-text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 200px;
}
/*默哀日专用灰白色滤镜效果 */
html.o2_gray {
-webkit-filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
/*隐藏滚动条 webkit*/
.scroll::-webkit-scrollbar {
width: 0;
height: 0;
}
/*禁止ios弹出系统窗 webkit*/
-webkit-touch-callout： none；
/*禁止ios点击标签或者可执行脚本变色 webkit*/
-webkit-tap-highlight-color： none;
/*禁止iOS Safari 网页文本大小调整属性 webkit*/
-webkit-text-size-adjust: none;
/*截断多行文本省略号显示 webkit*/
p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
text-overflow: ellipsis;
}
/*移动端flex 自动3列布局 加上after伪类，解决最后一排数量不够两端分布的情况
<div class="tem-flex">
<div class="tem-list" v-for="item in len">列表</div>
</div>
*/
.tem-flex {
display: flex;
flex-wrap: wrap;
justify-content:space-between;
text-align: justify;
}
.tem-flex:after {
content: '';
width: 30%;
}
.tem-list {
width:30%;
margin-bottom: 10px;
}
/*改变按钮和其他控件的外观，使其类似于原生控件 webkit*/
-webkit-appearance: none; /*移除原生样式*/
/*input 默认元素设置*/
::-webkit-input-placeholder {
color: #ababab;
}
/*小箭头*/
&::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
/*按钮按压效果*/
.button {
display: inline-block;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {background-color: #3e8e41}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
/*2个css实现的loding效果 1rem=16px*/
@keyframes bouncing-loader {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0.1;
transform: translateY(-1rem);
}
}
.bouncing-loader {
display: flex;
justify-content: center;
}
.bouncing-loader > div {
width: 1rem;
height: 1rem;
margin: 3rem 0.2rem;
background: #8385aa;
border-radius: 50%;
animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader > div:nth-child(2) {
animation-delay: 0.2s;
}
.bouncing-loader > div:nth-child(3) {
animation-delay: 0.4s;
}
/* 第2个*/
@keyframes donut-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.donut {
display: inline-block;
border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: #7983ff;
border-radius: 50%;
width: 30px;
height: 30px;
animation: donut-spin 1.2s linear infinite;
}
/*css内部计算器多用于列表*/
ul {
counter-reset: counter;
}
li::before {
counter-increment: counter;
content: counters(counter, '.') ' ';
}
/*文本选择的伪选择器*/
::selection {
background: aquamarine;
color: black;
}
/*root等同于html,方便的全局变量定义*/
:root {
--some-color: #da7800;
--some-keyword: italic;
--some-size: 1.25em;
--some-complex-value: 1px 1px 2px whitesmoke, 0 0 1em slategray, 0 0 0.2em slategray;
}
.custom-variables {
color: var(--some-color);
font-size: var(--some-size);
font-style: var(--some-keyword);
text-shadow: var(--some-complex-value);
}
/*悬停下划线动画效果*/
.hover-underline-animation {
display: inline-block;
position: relative;
color: #0087ca;
}
.hover-underline-animation::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: #0087ca;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
/*重置所有样式为默认*/
.reset-all-styles {
all: initial;
}
/*优先使用系统字体*/
.system-font-stack {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/*三角形*/
.triangle.tr {
width: 0;
height: 0;
border-top: 20px solid #333;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
/*聊天气泡尾巴*/
.bubble-tail {
position: absolute;
top: 100%;
left: -20px;
width: 30px;
height: 9px;
border-width: 0;
border-style: solid;
border-color: transparent;
margin-top: -4px;
border-right-width: 6px;
border-right-color: #fff;
border-radius: 0 0 60px 0;
color: #fff;
}
/* 加载的...*/
dot {
display: inline-block;
height: 1em;
line-height: 1;
text-align: left;
vertical-align: -.25em;
overflow: hidden;
}
dot::before {
display: block;
content: '...\A..\A.';
white-space: pre-wrap;
animation: dot 3s infinite step-start both;
}
@keyframes dot {
33% { transform: translateY(-2em); }
66% { transform: translateY(-1em); }
}
<div class="bouncing-loader">
<div></div>
<div></div>
<div></div>
</div>
<!--第2个loding-->
<div class="donut"></div>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
<p class="hover-underline-animation">Hover this text to see the effect!</p>
<div class="triangle"></div>
正在加载中<dot>...</dot>
动态加载同一图片不同大小
srcset可以使游览器动态加载不同大小图片
sizes可以告诉游览器这张图片的宽度,支持媒体查询
<img src="img/480.png" srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w" sizes="(min-width:800ox) calc(100% - 200px), 50vw">
<picture>
<source media="(max-width:36em)" srcset="img/aaa.png 768w" />
<source media="(orientation: landscape)" srcset="img/bbb.png 768w" />
<img src="ccc.png" alt="">
</picture>
less与sass
2种预css处理器,差别不大,less使用@声明变量,scss使用$声明
这里我常用的是less,简述一些用发:
// 嵌套就不说了...
// 变量与运算
@bgcolor: #blue;
@fontSize: 14px;
.box{
background: @bgcolor;
font-size: @fontSize + 2px;
}
// mixins
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}
// extend 同样使用上面的例子
#menu a {
&:extend(.bordered) //等价于上面的,不过是把公共代码提了出来
color: #111;
}
// loop (less不支持for循环只能递归模拟)
.gen-col(@n) when (@n > 0){
.gen-col(@n - 1);
.col-@{n}{
width: 1000px/12*@n;
}
}
.gen-col(12);
// import
// 定义一个index.less 依次引入变量文件其他模块文件等...
