CSS 常见用法¶
自适应网页布局¶
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">
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%,若是,则删掉,某次是因为这个原因。
footer 保持在底部¶
通过 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;
}
参考
em 和 rem¶
或者参考
rem、px、em之间的区别以及网页响应式设计写法 - Gabriel_wei - 博客园
简单说,
rem
: 相对根节点em
: 相对父节点px
: 绝对值
Mathjax 公式锚点偏移¶
参考资料:
:target
选择器: 用于锚#
元素的样式- 锚点定位向下偏移
- scroll issue mentioned in mkdocs-material:
- scroll issue when link anchor is in a table header #746
- and the changes seems only
scroll-margin-top
- css中一个冒号和两个冒号
- css 伪元素
- offsets anchor to adjust for fixed header
- Fixed page header overlaps in-page anchors