Life is short.
正在筛选分类: CSS

Reference meterials.

仔细研究了一下 Bootstrap 4 的代码, 发现真的是无敌, 比 Bootstrap 3 增加的特性不是一点半点. 好好利用 .col-auto, .d-flex, .my-2, .mw-100... 这些样式, 自己的 css 根本一句都用不着写!

独立页面

CSS: Difference between '^' and '|' selector:

Caret (^): selects elements where the value of the specified attribute starts with a certain value:

Pipe (|): selects elements where the value of the specified attribute is either exactly the value or starts with the value immediately followed by '-':

Difference between pipe (|) and caret (^) attribute selectors

独立页面

结合实际代码, 用最快速度介绍 Sass 的最常用部分特性.

以 SCSS 语法为准.

CSS 有没有 "前一相邻元素" 选择器? 为什么有 "后一相邻元素" 选择器, 却没有 "前一相邻元素" 选择器? 这和 "级联样式表" 的定义有什么关联?

原来英文里竖屏和横屏称为 "portrait" 和 "landscape", 没查过之前完全一头雾水...

独立页面

设置为 float 的子元素撑开父元素高度的方法

和 Prism 可以和谐共处, 但升级至 Bootstrap 4后, 它们之间会产生一点小小的样式冲突, 一些 token 会变得非常小, 因为 Bootstrap 加入了新的 class: .tag, 这是已经被 Prism 占用的 class, 造成了 Prism token 的字体变小(75%), 还引起其他的一些样式变化.

Mastering margin collapsing

CSS中, 有3种情况会导致margin的坍缩(collapse).

1. 垂直方向相邻的两个兄弟元素, 上方元素设置了margin-bottom, 下方元素设置了margin-top时, 二者间距取较大者;

2. 元素上方没有用border, padding, inline-content或清除浮动等方式将其第1个子元素与其margin-top分割开时, 该元素的margin-top将为其本身margin-top与其第1个子元素的margin-top的较大者, margin-bottom同理;

3. 不占位, 即没有用有效的border, padding, inline-content, height, min-height等方式将其margin-top与其margin-bottom分割开时, 其margin-top和margin-bottom将全部坍缩.

独立页面

因为搜索引擎会检索HTML页面中的所有内容, 因此把CSS语句从HTML脚本中分离并通过外部引入, 可以一定程度上提高搜索引擎的检索效率.

独立页面

CSS中, margin, border, padding可以设置1到4个值, 如果4个值都给出, 它们分别对应上, 右, 下, 左边的样式, 如果只给出1个值, 它将被应用于所有边, 如果给出2-3个值, 省略的值与其对边相等.

独立页面

CSS中, 可以将line-height设置为纯数字, 当line-height设置为纯数字时, 行高为元素字体大小值与该数字的乘积.

独立页面

CSS中, 将div(实际上本来就是inline或inline-block的元素也一样)设置为inline-block时, 有可能会在相邻两个元素间出现很迷的4px间隔. 这4px宽度其实不是padding 或 margin, 而是一个空白字符, 因此设置margin-left: 0;margin-right: 0;是无效的, 有另外一些方法可以解决这个问题.

吴俊超, 2013-2018