CSS 学习（MDN）

最新推荐文章于 2024-02-16 09:45:21 发布

LXWHeaven

最新推荐文章于 2024-02-16 09:45:21 发布

阅读量527

点赞数

分类专栏：学习之路文章标签： css

本文链接：https://blog.csdn.net/qq_43849753/article/details/120529019

版权

学习之路专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS

介绍

Cascading Style Sheets，层叠样式表，用于设计网页的风格与布局。

备注

级联规则：规则发生碰撞时哪一条规则获胜。
一条声明的值可以为函数：例如width:calc(90%-30px)、transform:rotate(0.8turn)。
@rules：比如 @import、@media。
选择器的优先级由四个部分相加（分量），可以认为是个十百千：

千位：使用内联样式则该位加一分。这样的声明没有选择器，所以它得分总是1000。
百位：使用 ID 选择器则该位加一分。
十位：使用类选择器、属性选择器或者伪类则该位加一分。
个位：使用元素选择器、伪元素选择器则该位加一分。
注意：使用通用选择器()、组合符(+, >, ~, ’ ')、否定伪类(:not)不会影响优先级。*
注意：覆盖 !important 唯一的办法就是另一个 !important 具有相同优先级而且顺序靠后，或者更高优先级。
后代选择器（’ ‘，所有后代，包括子和孙）与子代选择器（’>’，只有子，不包括孙），相邻兄弟选择器（’+’，相邻的兄弟，不包括不相邻的兄弟）与通用兄弟选择器（’~’，所有兄弟，包括相邻的和不相邻的兄弟）。
块级盒子（Block box）和内联盒子（Inline box）。
替代盒模型：box-sizing:border-box，IE 的默认使用该模型。通常浏览器默认使用标准模型，若想要所有元素都使用替代模型，要在 <html> 元素上设置 box-sizing，然后设置所有元素继承该属性，如下：
```
html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}
```
背景附加：设置元素的背景相对于元素与页面的位置，有三个值。
a. background-attachment:scroll：元素被固定在页面的同一位置，元素滚动时背景不会滚动，页面滚动时背景会滚动。
b. background-attachment:fixed：元素被固定在屏幕的同一位置，元素滚动时背景不会滚动，页面滚动时背景不会滚动。
c. background-attachment:local：元素被固定在元素的同一位置，元素滚动时背景会滚动，页面滚动时背景会滚动。
书写模式：文本的排列方向。切换书写模式时也在改变块的显示方向（块维度）与内联文本的方向（内联维度）。
逻辑属性 & 逻辑值：为了使块的宽与高等随着书写模式的切换一起变化，产生了一系列逻辑映射。比如使用内联尺寸 inline-size 与块级尺寸 block-size 来代替物理属性 width 与 height。注意：所有的 top、bottom、left 和 right 都可以使用 block-start、block-end、inline-start 和 inline-end 代替。
给 padding 与 margin 设置百分比，都是相对于块级父元素的 width 的百分数值。如果以 height 为基准，很可能会导致一个无限循环。
CSS 自定义属性：即 CSS 变量/级联变量，其值可以在整个文档中重复使用。
text-decoration：简写属性可以一次接受多个值，由 text-decoration-line、text-decoration-style 和 text-decoration-color 构成。
hyphens：告知浏览器在换行时如何使用连字符连接单词。
Web 字体：允许在访问网站时一起下载字体文件，表示任何支持 Web 字体的浏览器都可以使用指定的字体。如下代码（font-family 为自定义字体名称，src 为自定义字体下载路径）：
```
@font-face {
  font-family: 'name';
  src: url('url');
}
```
flex 添加规则：flex: 1 200px;，表示首先给每个 flex 项 200px 的可用空间，然后按比例分配剩余的可用空间。

注意1：一些不常用的字体样式与文本布局。

LXWHeaven

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 学习（MDN）

CSS介绍Cascading Style Sheets，层叠样式表，用于设计网页的风格与布局。备注级联规则：规则发生碰撞时哪一条规则获胜。一条声明的值可以为函数：例如width:calc(90%-30px)、transform:rotate(0.8turn)。@rules：比如 @import、@media。选择器的优先级由四个部分相加（分量），可以认为是个十百千：千位：使用内联样式则该位加一分。这样的声明没有选择器，所以它得分总是1000。百位：使用 ID 选择器则该位加一分。十位
复制链接

扫一扫