CSS学习

对于css的学习,感谢MDN与W3school提供的优秀资料
随着学习的深入,此文章持续更新...

css中一些踩过的坑:

1. inline是按照基线对齐的,可通过vertical-align调节
2. 2个inline-block中间的空格是字体大小空格,将父元素字体大小设为0可取消
3. 优先使用overflow:auto 不同系统处理不一样
4. 个人觉得css处理文本长度不如js处理稳定
5. 伪元素::before是真的一个元素,伪类:hover是一种状态

6.hack处理....愿世界没有ie...建议找一个不那么在意兼容的工作
7.float布局会导致父元素高度坍塌,可以使用overflow:auto或者添加下方这个伪元素处理

::after {
  content: '';
  display: block;
  clear: both;
}

媒体查询-响应式开发

响应式设计就是一套 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

/*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;
}
 /*截断文本 max-width:100%;*/
.truncate-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 200px; 
}

 /*聊天气泡尾巴*/
 .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  依次引入变量文件其他模块文件等...