关于 CSS

148 阅读2分钟

上周末是把 HTTP 基础过了一遍,博客没记错的话应该是周三写的,然后到今天早上把 CSS 基础也过了一遍,之前那篇 HTTP 的博客写的挺乱的,疯狂用了 HR 分隔,等有空了把 markdown 排版也学一下,而且说实话过这部分基础主要是知道有哪些东西,并不是为了全部记住,把一些之前可能遗漏的也了解下,等用到了再具体去看,尤其是 CSS,很多样式其实现在用的不多,这篇博客写完会去把 flex 布局看一遍,细看,因为工作中的就是这个,这边也推荐一个学习 flex 布局的小游戏,挺有意思的。说回正题,以后的博客中只会大概列出知识点,有的会附上一些别人整理的文章,充分利用互联网嘛,然后学习中或工作中遇到一些难点或者有意思的东西会详细记录下来,所以这篇整理知识点的会写的简洁点。


css: cascading style sheet 层叠样式表

各种选择器以及不同选择器的搭配,其中最常用的还是类选择器, 不过工作中用的 less, 那些搭配其实也用不太到, 说到 less , 当时直接上手就用了, 也没好好看下, 等有时间了去看下 less 文档, 看看有没有什么知识点遗漏的(肯定会有)

  • 继承性
  • 层叠性

!important 提升权重, 尽量不用


一个查看不同浏览器支持样式的网站


盒子模型


标准文档流/普通文档流

脱离标准文档流的方法:

  • 浮动 float
  • 绝对定位 absolute
  • 固定定位 fixed

为什么要脱标呢?我的理解就是有更多布局样式,不然太单调了 还有一点要注意的是 margin 本来会塌陷,但脱标后就不会塌陷了


清除浮动


伪类

主要是 a 标签的

  • a:link
  • a:visited
  • a:hover
  • a:active

用 display: block 转块设置高度


background

  • background-img: url(abc.jpg)

url: uniform resource location

  • background-repeat
  • background-position
  • background-attachment: fixed / scroll(默认)

背景图片固定不动

  • background

CSS Spirit 技术: 说的通俗点就是多个图标放在一张图片上,然后通过显示这张图片的不同部分来达到多个图标的目的。当然不限于图标


定位

  • static(默认)
  • relative
  • absolute
  • fixed

z-index: 工作中用到主要是蒙层或者弹窗、模态框之类的。 如果遇到 z-index 失效的情况,可以参考这篇文章