❤️ Author： 老九
☕️ 个人博客：老九的CSDN博客
🙏 个人名言：不可控之事 乐观面对
😍 系列专栏：

文章目录

• @media
• • 例子
  • resolution属性
  • orientation属性
  • aspect-ratio属性
• 伪类与伪元素
• • :target
  • :disable/:enable
  • :valid/:invalid
  • :required/:optional
  • :indeterminate
• 通过outline画出一个十字架
• @font-face
• FOUT/FOUC
• resize属性
• 字体图标
• • 例子：五角星
  • svg
• 多列布局
• • column-count
  • column-width
  • column-fill
  • columns
  • column-gap
  • column-rule
  • column-span

@media

• 这段代码是屏幕大于等与600px小于等于1000px的情况下，颜色是红色的。
• media query不会改变选择器的优先级，即使它包裹在media query中
• 在less和sass中，可以用选择器包裹media query，而在原生的编辑器中不行。

@media(min-width:600px) and (max-width:1000px)
{div{color:red}
}

例子

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est, necessitatibus. Officia commodi pariatur nullaodio libero delectus, necessitatibus praesentium accusamus a repellat repellendus, corporis debitis distinctio nemoplaceat voluptas minima!

resolution属性

• 当像素点放大到原来的两倍的时候，字变成红色，这个主要是用在图片的放大，因为如果分辨率比较高的机器，如果用比较小的图片放大之后就会变糊，因此如果在max-resolution：1.5ddpx的时候，换成更小的图片就会比较好

    @media (max-resolution:2dppx),(resolution:144dpi) {div {color: red;}background-image:url('image-lores.png');background-size:100% 100%;}

orientation属性

• 控制屏幕的方向，值有两个，横向：landscape，纵向：portrait

aspect-ratio属性

• 这个是视口横纵比，aspect-ration：2/1，这个就是视口比是2：1

伪类与伪元素

• 伪类是某一个实际元素在特定条件下的情况，例如：:hover,:active；伪元素是一个新的元素，为结构添加内容的，例如：::scrollbar,::placeholder,::before,::after,::marker,::first-letter(第一个实际字符的前面),::first-line,::selection(这个是被鼠标选中的)

:target

• 这个伪类是选中目标元素，那么何为目标元素，目标元素就是当前地址栏中#后部分所指示的元素，#后面是谁的id，谁就是目标元素，所以也可以说选中id的值为地址中#后面的内容元素

:target{color:red;background-color:yellow;
}

:disable/:enable

• 这个搭配input使用，disable是不可以选中的时候，enable是可选中的时候，这两个是互斥的

:valid/:invalid

• 填对了和没填对

:required/:optional

• 必填项和选填项

:indeterminate

• input状态下的checkbox类型，在处于中间状态的时候，可以触发:indeterminate伪类

通过outline画出一个十字架

@font-face

• 这个可以加载网络上的任何字体

    @font-face {/*起名字*/font-family: 我的在线字体;/*在线的字体*/src: url(https://www.baidu.com/foo/bar/baz.ttf);/*可以设定字体的类型,这样font-family就可以是一样的名字，然后可以区分是斜体字等等。。*/font-style:italic;}

• italic是专门设计的斜体字，而oblique是倾斜得来的。

FOUT/FOUC

• 字体加载的时候，可能会因为网 速的问题，导致特殊的字体加载的慢一些，变换的时候会发生突变，这种情况就叫做FOUT
• FOUC是flash of unstyled content，这个会先展现html的页面，在网速不是特别好的情况下，页面突然闪一下才能加载出css的代码
• 他们的解决方案：把(更优的方式是把首屏的样式)样式放在页面的style里，把link标签放在页面的上方

resize属性

• 这个可以设置类似于textarea一样调整大小，值有both，horizontal，vertical，需要搭配overflow：auto

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est, necessitatibus. Officia commodi pariatur nullaodio libero delectus, necessitatibus praesentium accusamus a repellat repellendus, corporis debitis distinctio nemoplaceat voluptas minima!

字体图标

字体图标
优势：1.矢量图，无损放大2.可以随意变色3.很好维护，增减图标不用像css精灵图一样考虑图标的位置4.也很节省空间
劣势：1.一个图标整体只能是一种颜色2.不能动画

例子：五角星

svg

• svg是矢量图，放大也不会模糊，不是像素点的；一个图标可以是多种颜色组成；可以动画；使用起来不如字体图标方便，因为用的时候要< s v g >< svg> ,而字体图标就一个i标签就可以实现了；页面的顶部还得再放一个很大的svg元素。
• z是闭合，具体的查文档即可

title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, repellat omnis, perspiciatis iure cupiditateobcaecati quidem, illo tempora at optio labore debitis quam. Ea dolorum alias quas accusantium, recusandae ullam.
title
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus nisi impedit eveniet corrupti nequerepellendus, eaque recusandae possimus officia magni officiis provident unde quos esse. Pariatur sapiente temporibusrepellat. Voluptatibus?