Skip to content

CSS 笔记

CSS 全称为 Cascading Style Sheets, 中文名为层叠样式表.

元素

  • 块级元素 (block-level element)
  • 内联级元素 (inline-level element)

选择器

  • 类选择器:.
  • ID选择器: #
  • 属性选择器: []
  • 伪类选择器: :
  • 伪元素选择器: ::
  • 关系选择器
    • 后代: <space>
    • 相邻后代: >
    • 兄弟: ~
    • 相邻兄弟: +

盒子

  • 内在盒子:
    • content box: content-box
    • padding box: padding-box
    • border box: border-box
    • margin box: NONE

width/height 作用的具体细节

width:auto

width:Xpx

  • width:100px 如何作用到 <div> 元素上?
  • content box 环绕着 widthheight 给定的矩形。由于 <div> 元素默认的 padding, bordermargin 均为 0,则 <div> 呈现的像素也为 100px。

box-sizing

用于改变 width 作用的盒子

height:100%

如果包含块的高度没有显式指定(即高度由内容决定),并且该元素不是绝对定位,则计算值为 auto,而它和百分比是计算不了的,因此无效; 但如果包含块的宽度取决于该元素的宽度,产生的布局在 CSS2.1 中是未定义的,而浏览器可以自行处理未定义的行为。

div {
    width: 100%;
    height: 100%; /* invalid */
}
body {
    height: 100%;
}
html, body {
    height: 100%;
}
div {
    height: 100%;
    position: absolute;
}

em 和 rem

何时使用 Em 与 Rem

或者参考

rem、px、em之间的区别以及网页响应式设计写法 - Gabriel_wei - 博客园

简单说,

  • rem: 相对根节点
  • em: 相对父节点
  • px: 绝对值

自适应网页布局

参考 利用@media screen实现网页布局的自适应

1280分辨率以上(大于1200px)

@media screen and (min-width:1200px){
}

1100分辨率(大于960px,小于1199px)

@media screen and (min-width: 960px) and (max-width: 1199px) {
}

880分辨率(大于768px,小于959px)

@media screen and (min-width: 768px) and (max-width: 959px) {
}

display

对 img 添加

display: block

达到居中的作用

meta 标签

Meta标签给搜索引擎提供了许多关于网页的信息。

为了不让用户手动去改变页面大小,需要加上

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  1. Meta 标签与搜索引擎优化
  2. 手机网页布局经验总结

font-family的选择

看到一篇超级棒的博客

如何优雅的选择字体(font-family)

cloudflare 的rocket load module

慎用,在ESL上,出现了如下问题

A Parser-blocking, cross-origin script, http://example.org/script.js, is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity.

以及公式解析错误。

解决方案,去cloudflare主页disable掉rocket load module.

Uncaught ReferenceError: $ is not defined?

参考Uncaught ReferenceError: $ is not defined?

网页底部出现滚动条

查看footer的width是否为100%,若是,则删掉,某次是因为这个原因。

通过 flexbox,例如

/* https://demo.tutorialzine.com/2016/03/quick-tip-the-best-way-to-make-sticky-footers/styles.css */
body{
    display: flex;
    flex-direction: column;
    height: 100%;
    font: 400 15px/1.4 'Open Sans',sans-serif;
}

header{
    /* We want the header to have a static height - it will always take up just as much space as it needs.  */
    /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
    flex: 0 0 auto;
}

.main-content{
    /* By setting flex-grow to 1, the main content will take up
    all of the remaining space on the page (the other elements have flex-grow: 0 and won't contest the free space). */
    /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
    flex: 1 0 auto;
}

footer{
    /* Just like the header, the footer will have a static height - it shouldn't grow or shrink.  */
    /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
    flex: 0 0 auto;
}

参考

Mathjax 公式锚点偏移

详见 mathjax link to equation

参考资料:

Back to top